plugin to show anchors in an HTML page?

Question

I often find my self looking for a link that will drop me in the middle of a web page. Often I find that the page has the needed <a name='foo'> tags but no easy way (e.g. a table of contents) to find them. Does anyone know of a plugin that shows where/what those tags are?

I'd need chrome but answered for others would be useful.

---

FWIW: this is what I ended up using:

javascript:(function(){var i,n,a;as=document.anchors;for(i=0;i<as.length;++i) {a=as[i];n=a.name;a.appendChild(document.createTextNode("#"+n));a.style.border="1px solid";;a.href="#"+n;}})();

Take that, and put it as the link address in a bookmark.

Answer 1

Web Development Bookmarklets has a JavaScript bookmarklet called named anchors that will insert links at each <a name=""> anchor. To use the bookmarklet, add it to your favorites menu or links bar. Then, on any page, click on the "named anchors" bookmark to insert links into the current page. However, it doesn't work on Wikipedia or other sites that use id attributes of tags as anchors.

Edit:
Show Anchors is a more modern bookmarklet that shows both <a name=""> and id elements with an anchor icon. The icon is embedded in the bookmarklet as a data: URL, so it might not work in older browsers. (The bookmarklet link is at the very top of the post.)

Answer 2

The Show Anchors 2 add-on does just that on Firefox.

Answer 3

Display Anchors seems to be the most popular Chrome plugin.

Answer 4

BCS's answer adapted to work with frames:

javascript:(function(){function f(e){var i,n,a;as=e.anchors;for(i=0;i<as.length;++i){a=as[i];n=a.name;a.appendChild(e.createTextNode('\u2693'+n));a.style.color='#fff';a.style.background='#666';a.style.borderRadius='5px';a.href='#'+n;}}if(window.frames.length)for(var i=0;i<window.frames.length;++i)f(window.frames[i].document);else f(document);})();