javascript - 访问未触及的窗口对象

Question

我做了一个扩展，为网站添加了覆盖。网站样式表和覆盖样式通常相互冲突，而不是与网站样式表冲突，我决定使用自定义元素。

最初我会注入一个脚本，它会执行以下操作：

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

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

但是 youtube.com 在他们修改window.HTMLElement&的地方做了一些事情，window.customElements结果我的代码失败了。

我想到的一个解决方案是定义window.extension_HTMLElement& window.extension_customElements，它等于window.HTMLElement&的初始值，window.customElements所以即使在 youtube.com 修改它们之后，我仍然可以使用它。

由于内容脚本无权访问页面使用的窗口对象，因此我必须注入一个脚本（或者我相信）并且我需要加载 HTML 才能做到这一点，此时......为时已晚，因为我的目标窗口属性已被修改。use_at在这里不是很有帮助。

我尝试过的另一件事（我不知道为什么这不能诚实地工作）是这样的：

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);

所以现在我正在寻找一种在其他脚本之前访问和复制window.HTMLElement&window.customElements属性的方法，或者寻找一种方法来获取未修改的窗口对象，然后我可以使用它来定义window.extension_HTMLElement& window.extension_customElements。

也许我正在寻找的东西是不可能的，如果您有其他解决问题的建议，我很乐意听到，提前谢谢您。

标签： javascriptgoogle-chrome-extension