DEV Community

Cover image for Tampermonkey script to show anchor tag links on articles
Sung M. Kim
Sung M. Kim

Posted on • Originally published at on


Tampermonkey script to show anchor tag links on articles


I started using Tampermonkey browser extension for some forums without "filtering" capabilities using a personal JavaScript code.

As I've been moderating, I found it necessary to go thru all links to verify they follow Content Policy.

Tampermonkey made it easy to display all anchor links on a specific domain using a client-side JavaScript YOU write.

I won't go into much details on Tampermonkey installation but will cover just how to create a script to display all anchor links in a post.

If you want to quickly just paste a CSS to achieve a similar effect, check out this CSS by Robin @darksmile92 Kretzschmar :)

#article-body a::after {
  content: " (" attr(href) ") ";
  color: #52d849;


What you will see in the end on every post looks like this.

Reference: Mesure your create react app build.


Tampermonkey script

Let's take a full source first (as it's short)

// ==UserScript==
// @name
// @namespace
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match*
// @grant        none
// ==/UserScript==

;(function() {
  "use strict"

  // Your code here...
    .querySelectorAll("#article-body a")
    .forEach(a =>
        `➡<strong style="color: red">${a.href}</strong>`

@match is the important bit, where we instruct Tampermonkey which domain we want to execute the JavaScript code.

Note: Refer to Tampermonkey documentation for other UserScript header (such as @name).

Let's see how JavaScript code is implemented.

Selecting article links only

Each DEV article has an element with id='article-body', which is what we are interested in.

document.querySelectorAll("#article-body a")

As there are multiple links, I used querySelectorAll to match only anchor tags under #article-body using the descendant combinator.

Showing raw link next to anchor tags

As document.querySelectorAll("#article-body a") returns multiple anchor elements, we can iterate it with NodeList#forEach (Note that querySelectorAll returns a NodeList, not an array).

We can then get a hold of an anchor element in the callback (I labeld it as a), to which we can insert a custom HTML.

The custom HTML will be an aweful-looking red-colored strong element.

    .forEach(a =>
        `➡<strong style="color: red">${a.href}</strong>`

Element.insertAdjacentHTML() provides a way to add a custom HTML next to the current element.

You can play around with position (first parameter, beforeEnd) the way you see fit.

Image by Stefan Keller from Pixabay

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

Learn the ins and outs of Promises and Async/Await!