A Chrome extension for easy ID linking

Occasionally I want to link to specific section of a web page. Previously, I would bring up the source of the web page to see if there was a named anchor tag for the section in question, then I would manually add the anchor name as the URL fragment. Recently, however, I learned that any element with an ID attribute can act as a link target. It’s only been stated in the HTML 4 specification like forever. :-)

Anyway, I thought it might be useful to create a web browser extension that lets me automate the link target-finding process a bit. As a bonus, I figured I would also learn how to write an extension. Enter LinkToId, a Chrome extension (I mostly use Chrome nowadays, which is why) that:

• Lets you discover the closest possible link target, if any. The link target is identified via a tooltip.
• Lets you update the fragment of the current URL to point to the link target.

Here is a screenshot that shows the extension in action on a StackOverflow page:

Had I left-clicked at this point, the current URL would be updated to include #answer-4971817 as the fragment.

To use the extension, you simply press the Ctrl and Alt keys (the trigger keys) simultaneously while pointing to the section you want to link to. If the section has an ID, the tooltip will show. To update the URL, left-click while still holding the trigger keys.

Note that the extension is still very primitive, and thus has a number of limitations:

• The trigger keys (Ctrl + Alt) are hard-coded and cannot be configured.
• The DOM tree is searched backwards to find an element with an ID. In practice, this means that the element you find may be very far away. Some option to limit the search would be useful.
• Tooltip message is not localizable.

The extension source code is on GitHub. To install the extension, go to the Downloads page and click on one of the download packages (it’s not in Chrome Web Store yet). If you’re using Chrome, you will automatically be prompted to install it.

To run the tests, go to the Chrome Extensions page (chrome://chrome/extensions) and make a note of the LinkToId extension ID. Next, enter the following URL into the browser: chrome-extension://\<extension ID>/test/index.html.

Any comments and feedback are welcome!