Add Elements with ID lister

This commit is contained in:
blankie 2023-05-19 22:18:34 +07:00
parent 29db8be2f7
commit eb5cac51bf
Signed by: blankie
GPG Key ID: CC15FC822C7F61F5
2 changed files with 149 additions and 0 deletions

View File

@ -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();
}
})

View File

@ -16,6 +16,11 @@ to enable scripts to see emails again, inspired by
Hacky script to disable the client-side file limit per tab 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 ## Image Loader Placeholder Remover
Removes image loading placeholders from https://closertoday.co.uk, Removes image loading placeholders from https://closertoday.co.uk,