Display #Anchors is a Chromium extension with a single purpose: It offers an easy way to see all (invisible) anchors in a page, to make it easier to link to a specific part of a webpage.
- Chrome Web store: https://chrome.google.com/webstore/detail/display-anchors/poahndpaaanbpbeafbkploiobpiiieko
- Finds all anchors in a page and shows a marker next to it.
- Does not alter the layout; so no jumpy pages or expensive repaints.
- The anchored content is highlighted on Hover over the marker.
- The marker is highlighted on hover over the anchored content.
- Click on the toolbar button to remove all markers.
- The extension consumes no memory until it's actually used (using an event page).
- Click on the input field at "Display #Anchors" (by default, it is "Not set").
- Press the keys for the desired shortcut (e.g. Ctrl + Shift + L).
- From now on, you can use the chosen shortcut to toggle anchors.
Custom anchor text
By default, the anchor is used as a label for the link. You may also opt in for a fixed value, as follows:
- Right-click on the "#" button in the toolbar.
- Toggle the "Show full #anchor text" menu item.
- If the menu item is unchecked, then a paragraph symbol ("¶") is used.
If you prefer a different label, visit the options page, set a different value and save the changes.
Before creating this extension, I've been using the "Display Anchors" feature of Chris Pederick's "Web Developer" extension for Chrome. An unfortunate "feature" of this implementation is that the markers cause changes to the layout, resulting in some loss of time to find the position of the page before activating the anchors (and a broken layout looks ugly). Besides that, the extension had too much overhead (it activates on every page, and consumes memory even when I did not use it). This encouraged me to develop a new extension that offers the desired feature in an optimal way.