Show external and internal links of a page with anchors and rel

This bookmarklet shows a list of all external and internal links of the current page, together with anchors, highlighting rel sponsored and nofollow links.

Page links

(Drag this button to your boormarks toolbar)

Source code

function getAnchor(a) {
    const div = document.createElement('div');
    div.innerHTML = a.innerHTML;
    Array.from(div.querySelectorAll('img')).forEach(img => img.replaceWith(img.alt));
    return div.textContent.trim();
}

var rows = '', total = 0, external = 0, hostnames = new Set();
Array.from(document.querySelectorAll('a[href]')).filter(a => a.protocol && a.protocol.startsWith('http')).forEach(a => {
    var isInternal = a.hostname === document.location.hostname;
    rows += '<tr' + (isInternal ? ' class="internal" style="display: none"' : '') + '>'
            + '<td' + (a.rel.includes('sponsored') ? ' style="background:#FCC"' : a.rel.includes('nofollow') ? ' style="background:#FFC"' : '') + '>' + a.rel + '</td>'
            + '<td><a href="' + a.href + '">' + decodeURI(a.href) + '</a></td>'
            + '<td>' + getAnchor(a) + '</td>'
            + '</tr>';
    total++;
    if (!isInternal) {
        hostnames.add(a.hostname);
        external++;
    }
});

var output = '<html><head><style>td {overflow: hidden; text-overflow: ellipsis; max-width: 0} tr.internal {background: #CCC}</style></head><body>'
        + '<p><b>External links with unique hostnames:</b> ' + hostnames.size + '<br/><b>External links:</b> ' + external + '<br/><b>Total links:</b> ' + total + '</p>'
        + '<p><label><input type="checkbox" onchange="document.querySelectorAll(\'tr.internal\').forEach(tr => tr.style.display = this.checked ? \'none\' : \'\')" checked/> Hide internal links</label></p>'
        + '<table width="100%" border="1" cellspacing="0" cellpadding="4"><tr><th>rel</th><th width="45%">URL</th><th width="45%">Anchor</th></tr>'
        + rows
        + '</table></body></html>';
with (window.open()) {
    document.write(output);
    document.close();
}

Notes

The bookmarklet shows all visible and invisible links with HTTP/HTTPS protocols in order they appear in HTML code.

Relative links are resolved into absolute.

For images inside links the bookmarklet shows alt text at the position of the image.

Show external and internal links of a page with anchors and rel

Source code

Notes

Feedback