Greasy Fork

This script is extremely useful for obtaining URLs (you combine that with a link extractor). You enter a list of URLs, and press the start button, and it will load each URL one at a time with a delay in between. When you load a page, a UI panel will appear for you to set the settings.

Problem is, certain pages can affect how this UI appears, which often affects the font size, color schemes, displayed list of unique URLs, and the line spacing. For example, with that script and being on the EFF page, the fonts, line spacing and the box itself is larger than it is on github.

Is there a way to make this div and all of its children, including recursively, not be affected by the page's style/layout? I want it to be displayed in the exact same way reguardless of the page's display style. If so can you show me the JS code/HTML/CSS to make it immune?

https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot

https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM

This should be the thing you want. Just follow that example.

https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#encapsulation_from_css

<div id="host"></div>
<span>I'm not in the shadow DOM</span>

span {
  color: blue;
  border: 1px solid black;
}

const host = document.querySelector("#host");
const shadow = host.attachShadow({ mode: "open" });
const span = document.createElement("span");
span.textContent = "I'm in the shadow DOM";
shadow.appendChild(span);

Thanks. I just updated (its now on the github page) to make use of the shadow dom. I first discovered it on the WBM's on how their toolbar on archived pages wasn't affected by the page's style and javascript. However, some of the stuff are still affected. The EFF page still affects the font, its size, and spacing. of the text