Add Elements with ID lister

Elements with ID lister.user.js

@@ -0,0 +1,144 @@
+// ==UserScript==
+// @name        Elements with ID lister
+// @namespace   blankie-scripts
+// @match       *://*/*
+// @grant       GM_registerMenuCommand
+// @version     1.0
+// @author      blankie
+// @description A userscript that adds a "Show elements popup" option to the Monkey Menu which lists all elements with an ID
+// @inject-into content
+// ==/UserScript==
+
+"use strict";
+
+const DIALOG_WRAPPER_ID = "element_lister-dialog_wrapper";
+const ACCENT_COLOR = "#962AC3";
+const BRIGHT_ACCENT_COLOR = "#DE6DE6";
+
+function showElementList() {
+    if (document.getElementById(DIALOG_WRAPPER_ID)) {
+        return;
+    }
+
+    let dialogWrapper = document.createElement("div");
+    dialogWrapper.id = DIALOG_WRAPPER_ID;
+    let shadowRoot = dialogWrapper.attachShadow({mode: "closed"});
+
+    let style = document.createElement("style");
+    style.innerText = `dialog::backdrop { background-color: rgba(0, 0, 0, .5); }\n`;
+    style.innerText = `a:hover { color: ${BRIGHT_ACCENT_COLOR} !important; text-decoration: underline !important; }`;
+    shadowRoot.append(style);
+
+    let dialog = document.createElement("dialog");
+    dialog.style.color = "white";
+    dialog.style.backgroundColor = "black";
+    dialog.style.minWidth = "25em";
+    dialog.addEventListener("close", hideElementList, {once: true, passive: true});
+    dialog.addEventListener("click", function(e) {
+        let rect = dialog.getBoundingClientRect();
+        if (rect.top <= e.clientY && rect.left <= e.clientX && rect.bottom >= e.clientY && rect.right >= e.clientX) {
+            return;
+        }
+        hideElementList();
+    }, {passive: true});
+
+    let buttonWrapper = document.createElement("div");
+    buttonWrapper.style.textAlign = "right";
+    let button = document.createElement("button");
+    button.innerText = "Close";
+    button.addEventListener("click", hideElementList, {once: true, passive: true});
+    buttonWrapper.append(button);
+    dialog.append(buttonWrapper);
+
+    let hr = document.createElement("hr");
+    dialog.append(hr);
+
+    let elements = getElementList();
+    if (elements.length) {
+        let ul = document.createElement("ul");
+        for (let i of getElementList()) {
+            ul.append(i);
+        }
+        dialog.append(ul);
+    } else {
+        dialog.append("There are no elements with an ID.");
+    }
+
+    shadowRoot.append(dialog);
+    document.body.append(dialogWrapper);
+    dialog.showModal();
+}
+
+function hideElementList() {
+    let dialogWrapper = document.getElementById(DIALOG_WRAPPER_ID);
+    if (!dialogWrapper) {
+        return;
+    }
+
+    dialogWrapper.remove();
+}
+
+
+
+function getElementList() {
+    let elements = [];
+
+    for (let element of document.querySelectorAll("[id]")) {
+        let rect = element.getBoundingClientRect();
+        if (rect.x === 0 && rect.y === 0 && rect.right === 0 && rect.bottom === 0 && rect.width === 0 && rect.height === 0) {
+            continue;
+        }
+        elements.push(getElementListItem(element));
+    }
+
+    return elements;
+}
+
+function getElementListItem(element) {
+    let li = document.createElement("li");
+
+    let a = document.createElement("a");
+    a.href = a.innerText = "#" + element.id;
+    a.style.color = ACCENT_COLOR;
+    a.style.textDecoration = "none";
+    a.addEventListener("click", hideElementList, {once: true, passive: true});
+    li.append(a);
+
+    let description = getElementDescription(element);
+    if (description) {
+        li.append(" (", description, ")");
+    }
+
+    return li;
+}
+
+function getElementDescription(element) {
+    let addEilipses = false;
+    let text = (element.innerText || "").trim();
+
+    let newlineIndex = text.indexOf("\n");
+    if (newlineIndex !== -1) {
+        text = text.substring(0, newlineIndex);
+        addEilipses = true;
+    }
+
+    if (text.length > 50) {
+        text = text.substring(0, 50);
+        addEilipses = true;
+    }
+
+    if (addEilipses) {
+        text += "...";
+    }
+    return text;
+}
+
+
+
+GM_registerMenuCommand("Show elements popup", function() {
+    if (!document.getElementById(DIALOG_WRAPPER_ID)) {
+        showElementList();
+    } else {
+        hideElementList();
+    }
+})

README.md

@@ -16,6 +16,11 @@ to enable scripts to see emails again, inspired by
 
 Hacky script to disable the client-side file limit per tab
 
+## Elements with ID lister
+
+A userscript that adds a "Show elements popup" option to the Monkey Menu which
+lists all elements with an ID
+
 ## Image Loader Placeholder Remover
 
 Removes image loading placeholders from https://closertoday.co.uk,