~/Tampermonkey Script to Generate Tags from HTML IDs

Jan 7, 2025

Tampermonkey is a userscript manager that lets users inject JavaScript into web pages. A common automation task is extracting HTML element ID attributes and generating tags or categorizations from them. This article details how to create a Tampermonkey script that automatically collects all element IDs from the DOM and generates tags.

Tampermonkey scripts execute in the browser and can modify the page or export data. You can use this technique to assist with content organization, process data for SEO, or facilitate debugging.

Tampermonkey Script Example

The following code will collect all unique IDs present in the web page, generate tag strings, and output them as a comma-separated string. You can modify the output method as desired.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// ==UserScript==
// @name         Generate Tags From HTML IDs
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Collects all element IDs and generates tags
// @author       George
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Collect all elements with id attribute
    let elementsWithId = document.querySelectorAll('[id]');
    let ids = new Set();
    elementsWithId.forEach(el => {
        if(el.id && el.id.length) {
            ids.add(el.id);
        }
    });

    // Convert set of ids to array and join as tags
    let tags = Array.from(ids);

    // Example: log tags as CSV string
    console.log('Generated Tags: ' + tags.join(', '));

    // Optionally, inject into page
    let tagDiv = document.createElement('div');
    tagDiv.style.cssText = 'position:fixed;top:10px;right:10px;background:#fff;padding:10px;border:1px solid #ccc;z-index:9999;';
    tagDiv.innerText = 'Tags: ' + tags.join(', ');
    document.body.appendChild(tagDiv);

})();

• The querySelectorAll call finds all elements with an id attribute.

• Only unique IDs are collected due to Set usage.

• Output options include console logging, page injection, or network requests for downstream collection.

• ID attributes are required to be unique within a page by the HTML standard, but invalid HTML sometimes contains duplicates.

• Tampermonkey scripts are often used for web scraping prototyping.

• Pages with many dynamically generated elements can change their IDs on the fly, so for dynamic sites consider using MutationObserver to track changes.

Advanced Options

To monitor new IDs inserted dynamically, you can leverage MutationObserver:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

let observedIds = new Set();
let observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        mutation.addedNodes.forEach(node => {
            if(node.nodeType === 1 && node.id) {
                observedIds.add(node.id);
            }
        });
    });
    // Output or store observedIds as needed
    console.log('Dynamic IDs:', Array.from(observedIds).join(', '));
});
observer.observe(document.body, { childList: true, subtree: true });

Relevant Links

• Tampermonkey Documentation
• MDN Element id property
• Best Practices for HTML IDs
• Userscripts in Web Development
• SEO and Semantic HTML
• Unique Constraints in HTML
• Information Architecture and Tagging
• Guide to DOM Traversal
• MutationObserver Patterns
• Debugging with Console Log

Practical applications include debugging broken anchor links, gathering front end metadata, or supporting custom accessibility tools.

It is not recommended to run userscripts on banking or sensitive sites. Always comply with page terms of service.

There is an XKCD comic poking fun at ID and class name proliferation in web pages.

This method does not generate semantic tags from IDs, it only collects the literal strings present in the DOM. For further automation, integrate with external natural language processing tools.