Hacker News Reader

Comment by Rumperuu | Hacker News Reader

I 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/

View on HN

> 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?

[1] http://simonstl.com/articles/cssFragID.html

[2] https://www.w3.org/community/cssselfrags/

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).

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).

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

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.

Reply on news.ycombinator.com