└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # LookMark 2 | A browser bookmark to show hidden and disabled elements on a targets page. 3 | 4 | This was made with the help of ChatGPT in responses to this [tweet](https://x.com/ctbbpodcast/status/1717151268622233614?s=20) from [@ctbbpodcast](https://twitter.com/ctbbpodcast) and taking inspiration from an example by [@joaxcar](https://twitter.com/joaxcar) 5 | 6 | Just create a browser bookmark, setting the URL to the code below. 7 | Then go to a target page and click the bookmark. Hidden elements will be shown and highlighted in red with an identifier, and Disabled fields will be enabled and highlighted in blue with an identifier. 8 | 9 | ```javascript 10 | javascript:document.querySelectorAll(':not(img):not(span):not(div)[disabled],:not(img):not(span):not(div)[disabled=""]').forEach((e) => {const src = e.getAttribute("src"); if (src && !/googletagmanager|doubleclick|google-analytics/.test(src)) {e.disabled = false; e.style.cssText = "border-color: blue; border-width: 3px"; const d = document.createElement("div"); const elementType = e.getAttribute("type") || e.tagName; const elementName = e.getAttribute("name") || e.getAttribute("id"); d.innerHTML = `Disabled ${elementType} [${elementName}] `; e.parentNode.insertBefore(d, e).appendChild(e); } });document.querySelectorAll(":not(img):not(span):not(div)[type=hidden],:not(img):not(span):not(div)[hidden]").forEach((e) => {const src = e.getAttribute("src"); if (!src || !/googletagmanager|doubleclick|google-analytics/.test(src)) {e.type = "text"; e.style.cssText = "border-color: red; border-width: 3px"; const d = document.createElement("div"); const elementType = e.getAttribute("type") || e.tagName; const elementName = e.getAttribute("name") || e.getAttribute("id"); d.innerHTML = `Hidden ${elementType} [${elementName}] `; e.parentNode.insertBefore(d, e).appendChild(e); } });document.querySelectorAll(':not(img):not(span):not(div)[style*="display: none;"]').forEach((e) => {const src = e.getAttribute("src"); if (!src || !/googletagmanager|doubleclick|google-analytics/.test(src)) {e.type = "text"; e.style.cssText = "border-color: red; border-width: 3px"; e.style.display = "block"; const d = document.createElement("div"); const elementType = e.getAttribute("type") || e.tagName; const elementName = e.getAttribute("name") || e.getAttribute("id"); d.innerHTML = `Hidden ${elementType} [${elementName}] `; e.parentNode.insertBefore(d, e).appendChild(e); } });document.querySelectorAll(':not(img):not(span):not(div)[style*="visibility: hidden;"]').forEach((e) => {const src = e.getAttribute("src"); if (!src || !/googletagmanager|doubleclick|google-analytics/.test(src)) {e.type = "text"; e.style.cssText = "border-color: red; border-width: 3px"; e.style.visibility = "visible"; const d = document.createElement("div"); const elementType = e.getAttribute("type") || e.tagName; const elementName = e.getAttribute("name") || e.getAttribute("id"); d.innerHTML = `Hidden ${elementType} [${elementName}] `; e.parentNode.insertBefore(d, e).appendChild(e); } }); 11 | ``` 12 | 13 | ## NOTES: 14 | - When showing hidden elemetns, it looks for attributes `hidden`, `type=hidden`, `style*="display: none;` or `visibility: hidden;`. 15 | - When enabling disabled elements, it looks for attributes `disabled` or `disabled=""`. 16 | - The following types of elements are ignored ``,`` and `
` using the code `:not(img):not(span):not(div)`. If you want to check those, or add more exclusions, this is the code you need to change. 17 | - If an element has a `src` attribute and it includes the text `googletagmanager`, `doubleclick` or `google-analytics` then it will be ignored. This is donw withthe code !/googletagmanager|doubleclick|google-analytics/.test(src)`. If you want to change that or ad more exlcusions, this is the code you need to change. 18 | --------------------------------------------------------------------------------