Header Anchors: A Safari Extension

Ever want to link to a specific part of a web page? Well-designed web pages have anchors at the start of each section, which can serve as targets of links.1 You’ve probably seen URLs that end in #something; that fragment identifier, or “frag-id”, refers to a specific anchor on the page.

What’s annoying, though, is that even if an author includes them, they’re hard to discover. Sometimes there’s a table of contents, sometimes not. What I really wanted was a way to just click on the nearest header and grab the link. So I wrote “Header Anchors”.

Header Anchors is a Safari extension which turns any header into a link if it has an associated anchor. It won’t look like a link (that’s my preferred design choice) but if you mouse over a header that has an anchor, the cursor will change to the usual “click here” pointer. You can then grab or copy the URL as usual.

The quickest way to test this is to go to a Wikipedia article. Each section on the page has a header (such as “References”) which has an associated anchor. With Header Anchors installed, clicking on “References” will show you the URL that refers to that part of the page in your location bar.

Download Header Anchors. Requires Safari 5.

Header Anchors will never access personal data, other than any preferences it might have in the future. Header Anchors will never access the internet; it does all its work in the browser.

You can check out the source on Github. If anyone wants to port this to Chrome or Firefox, be my guest…and please tell me about it, so I can link to your port!

  1. The term “anchor” is why the HTML tag for linking is called a; its other use was to introduce an anchor on the page. Today I think the standard way to do that is just to use an id attribute. ↩︎