xnl-h4ck3r / lookmark

A browser bookmark to show hidden fields and enable disabled fields on a web page

LookMark

A browser bookmark to show hidden and disabled elements on a targets page.

This was made with the help of ChatGPT in responses to this tweet from @ctbbpodcast and taking inspiration from an example by @joaxcar

Just create a browser bookmark, setting the URL to the code below. 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.

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 = `<span style="color: blue;">Disabled ${elementType} [${elementName}]  </span>`; 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 = `<span style="color: red;">Hidden ${elementType} [${elementName}]  </span>`; 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 = `<span style="color: red;">Hidden ${elementType} [${elementName}]  </span>`; 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 = `<span style="color: red;">Hidden ${elementType} [${elementName}]  </span>`; e.parentNode.insertBefore(d, e).appendChild(e); } });

NOTES:

• When showing hidden elemetns, it looks for attributes hidden, type=hidden, style*="display: none; or visibility: hidden;.
• When enabling disabled elements, it looks for attributes disabled or disabled="".
• The following types of elements are ignored <img>,<span> and <div> 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.
• 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.