0

I've made an extension that adds an overlay to websites. The website stylesheet & the overlay styles usually conflict with each other and instead of fighting website stylesheets I decided to use custom elements.

Initially I would inject a script which would do the following:

class overlayDiv extends HTMLElement {
    constructor(...args) {
        super(...args);
    }
};

customElements.define('overlay-div', overlayDiv);

But youtube.com does something where they modify window.HTMLElement & window.customElements, and as a result my code fails.

A solution I thought of was to define window.extension_HTMLElement & window.extension_customElements which would be equal to the initial value of window.HTMLElement & window.customElements so even after youtube.com modifies them I would still be able to use it.

Since content scripts don't have access to the window object the page uses, I have to inject a script (or so I believe) and I need the HTML to load to be able to do that, which at that point ... is too late because my target window properties are already modified. use_at wasn't very helpful here.

Another thing I've tried (I don't know why this didn't work honestly) is this:

window.extensionComponents_customElements = window.frames[0].window.customElements;
window.extensionComponents_HTMLElement = window.frames[0].window.HTMLElement;

class overlayDiv extends window.extensionComponents_HTMLElement {
    constructor(...args) {
        super(...args);
    }
};

window.extensionComponents_customElements.define('overlay-div', overlayDiv);

So now I'm looking for a way to either access and duplicate the window.HTMLElement & window.customElements properties before the other scripts do or a way to get my hands on an unmodified window object which I can then later use to define window.extension_HTMLElement & window.extension_customElements.

Maybe what I'm looking for is impossible, if you have other suggestions to solve the problem I would love to hear it, thank you in advance.

a.ak
  • 659
  • 2
  • 12
  • 26
Ase Last
  • 7
  • 6
  • Why can't you create a new field into the `window` object? – Lajos Arpad Apr 21 '21 at 10:48
  • @LajosArpad I can, I just can't get the unmodified `window.HTMLElement` & `window.customElements`. I need those so I can set the new fields as them – Ase Last Apr 21 '21 at 11:00
  • Is there a way to run a function before Youtube screws up your data? – Lajos Arpad Apr 21 '21 at 12:05
  • The only way to access `window` of the page is to do it inside a DOM script. To make sure it runs before the page use textContent ([method 2 here](https://stackoverflow.com/a/9517879)) in a content script declared with "run_at":"document_start". – wOxxOm Apr 21 '21 at 13:43
  • @wOxxOm Thank you so much for linking me that question. Everything is working just fine now. – Ase Last Apr 21 '21 at 18:21

0 Answers0