Show HN: Pinpointer – A Firefox extension to share links to page elements
addons.mozilla.orgI wanted to try making a browser extension and it seemed weird to me that there didn't seem to exist any means of linking to specific elements on a web page if they hadn't been given IDs to make a fragment identifier out of, so I made this.
You select a page element and generate a link, which you can then share. For someone without the extension, the link will work as normal and just take them to the page, but someone with the extension will have the selected element focused on and highlighted for them.
There's also a repo on GitHub (for now)[1] and I wrote about how I made it[2]. My next priorities are to make it not look like ass and to shorten the links somehow. Let me know what you think.
[1] https://github.com/Rumperuu/Pinpointer
[2] https://bengoldsworthy.net/2018/04/developing-pinpointer/
> there didn't seem to exist any means of linking to specific elements on a web page if they hadn't been given IDs to make a fragment identifier out of
There's archive sites that do this, without a browser extension, and since it's an archive site instead of a live page, the content won't change underneath the target: http://archive.is/RUyWM#selection-253.74-253.223
You might want to take a look at https://github.com/karanlyons/pinpoint to see if there's anything there you want to grab, especially around the selector creation: https://github.com/karanlyons/pinpoint/blob/4b2ec192c0400f26...
This is really interesting, I'm not sure how I didn't find it before. What I'd like to know is whatever happened to the CSS-selectors-as-fragment-identifiers movement and why it didn't take off. The proposal that inspired that extension[1] was written by Simon St.Laurent and Eric Mayer, so it's not like it was a fringe thing, and they co-chaired a W3C Working Group on the topic[2], but it apparently never published any reports and the last recorded activity was in Jan 2013. Anyone know what happened?
Yeah, I dunno why it never took off, though Meyer was one of the few to star the repo, so I thought that was nice. I was never able to get much traction on my extension either, though some people did port it to every browser, which was also nice.
I think this is just one of those problems that's hard to sell to people.
You should also give more explanation on the addons pages, I read it and didn't understand what it does until I read this comment.
You should post such a generated link here as an example, so people can immediately try it by clicking on it.
Good point. https://en.wikipedia.org/wiki/Nelson_Mandela#aHRtbCA%2BIGJvZ...
(I wasn't kidding about needing to shorten those links.)
Shorter link that still works with your addon: https://en.wikipedia.org/wiki/Nelson_Mandela#cDpudGgtb2YtdHl...
I simply tried to find a suffix of the path that still identifies the element uniquely. Turns out that p:nth-of-type(3) is good enough already. If you want to be a bit more robust to changes on the page, you could also search for the last element with an ID in the path, i.e. #mw-content-text > div.mw-parser-output > p:nth-of-type(3).
Cypress (the testing framework) has a way to get a short, unique selector for any element on a page. It's even in its own npm package: https://www.npmjs.com/package/@cypress/unique-selector
It kind of defeats the point that you need the extension to view the generated links.
You may want to add an option to select only from the anchors/ids from the page to generate links which work in any browser.
Though there may already be an extension for this.
If you mean what I think you mean, you can already send a link that specifies a valid element ID on the page to anybody and have their browser focus on it — that's what fragment identifiers are for. However, if the page designer has neglected to provide a unique ID for each page element (and they probably have), you're out of luck. Ideally, you'd be able to specify any valid CSS selector that only selects one element as a fragment identifier, but that's not the case (and is basically what this extension makes possible).
Would an XPath work for this? Seems like that would be easiest considering Firefox already has built-in support for getting the XPath from an element on the page.
"It requires your permission to: Access your data for all web sites"
I wish Firefox had a permission along the lines of 'Access all data from pages on which I activate the extension', which is presumably all this would need.
It also needs data when you click on a link it created in the past, which there's no real way for it to know in advance. (It could possibly use a custom protocol but it would break backwards compatibility with HTTP which would be a big downside)
As yoklov said, I had to have a small script[1] run a quick check on every page you visit to check if the URL is a Pinpointer URL. As far as I can tell there's no way around this (and I'd say breaking backwards compatibility with HTTP is a bit drastic for a little browser extension like this).
[1] https://github.com/Rumperuu/Pinpointer/blob/master/content_s...
Could you not use webNavigation[0] to check the url and permissions API to ask for permission[1] if necessary?
EDIT: Or tabs.onUpdated if webNavigation doesn't fire for hash changes[2]
[0] https://developer.mozilla.org/en-US/Add-ons/WebExtensions/AP...
[1] https://developer.mozilla.org/en-US/Add-ons/WebExtensions/AP...
[2] https://developer.mozilla.org/en-US/Add-ons/WebExtensions/AP...
There is the "activeTab" permission: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/ma...
It looks like that can only be triggered if the user interacts with the extension in some way. Presumably, then, it won't work if there's a script that should run on each page load.
EDIT: I had a look at the manifest.json[1], and it turns out that's the only permission I've requested. Not sure why Firefox says I'm asking for everything and the kitchen sink.
[1] https://github.com/Rumperuu/Pinpointer/blob/master/manifest....
A video or a few screenshots would help me understand how it works better and probably help with the number of installs.
I have installed it and it doesn't work.
In the Mozilla addons page it just says "Pinpointer error".
In this HN page, it prompts me to select and click a green button, but fails to do anything.
It's an interesting concept, keep going!
edit: Firefox 62.0b9 (32-bit) in up-to-date Ubuntu 16.04, with uMatrix and other extensions running.
As far as I can tell the Mozilla addons page doesn't like addons running on it. I'll add a more explanatory error message though. I hadn't thought to test it on HN, so that's intriguing. I'll look into it, but I'd presume it's due to some sort of quirky DOM structure.
There's an about:config entry regarding this.
extensions.webextensions.restrictedDomains
(Self-reply) It worked in the next page I tried:
https://www.metafilter.com/175389/None-Dare-Call-It-Treason#...
Content scripts are disabled on addons.mozilla.org
Great fix for one of biggest web usability issues when quoting, and referencing complex documents.