diff --git a/Elements with ID lister.user.js b/Elements with ID lister.user.js new file mode 100644 index 0000000..2e56edc --- /dev/null +++ b/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(); + } +}) \ No newline at end of file diff --git a/README.md b/README.md index ec247b2..0418fee 100644 --- a/README.md +++ b/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,