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)