开发网站覆盖层浏览器扩展遇HTMLElement、customElements被篡改致自定义元素失效咨询

问题本质与已验证的无效尝试 #

• 开发带覆盖层的浏览器扩展时，为隔离页面与扩展的样式冲突，原本选择用自定义元素实现覆盖层逻辑
• 该方案在YouTube站点失效：YouTube的脚本会主动改写window.HTMLElement、window.customElements的原生实现，直接导致自定义元素定义、注册逻辑完全跑不通
• 两类尝试方案均已验证无法工作：
  • 计划提前备份原生API的方案受限于content script沙箱隔离：之前的注入时机始终晚于YouTube的API篡改动作，即使调整run_at配置也无法抢过时序
  • 从页面首个frame提取原生API的方案失效：跨frame访问到的对象已经被YouTube的代理层包装，不是真正的原生实现，基于该对象定义的自定义元素无法正常挂载

可落地的实现路径 #

1. 抢占执行时序完成原生API备份 #

之前的时序问题本质是把注入逻辑放在了页面加载中后期，完全错过了抢占窗口。正确的配置与实现方式为：

• 在扩展manifest中，将负责注入备份逻辑的content script配置为"run_at": "document_start"——这个时机是浏览器刚启动页面解析、尚未加载、执行任何页面自有JS资源的阶段
• 在该content script中，向主世界注入体量极小的备份逻辑，这段逻辑会比YouTube所有业务脚本更早运行，此时主世界的HTMLElement、customElements仍为浏览器原生实现，完全未被篡改：

  // 注入到主世界的备份脚本
  window.__nativeHTMLElement = HTMLElement;
  window.__nativeCustomElements = customElements;
  // 锁定备份属性，防止被后续脚本篡改
  Object.defineProperties(window, {
    __nativeHTMLElement: { writable: false, configurable: false },
    __nativeCustomElements: { writable: false, configurable: false }
  });
  

• 后续定义自定义元素时，直接使用备份的原生实现即可：

  class overlayDiv extends window.__nativeHTMLElement {
    constructor(...args) {
      super(...args);
    }
  }
  window.__nativeCustomElements.define('overlay-div', overlayDiv);
  

2. 无依赖替代方案 #

如果不想维护主世界脚本的注入链路，也可以从根源避开被篡改的全局API：

• 完全绕开全局customElements注册机制，手动实现覆盖层逻辑：所有覆盖层节点通过原生document.createElement('div')创建，手动绑定交互事件、维护内部状态、处理显隐逻辑，全程不依赖被站点篡改的全局构造函数与注册器
• 配合Shadow DOM实现样式隔离：覆盖层节点挂载独立的Shadow Root，所有扩展样式直接写在Shadow Root内部，完全切断页面样式对扩展元素的影响，不需要依赖自定义元素的全局注册能力实现样式隔离效果

内容的提问来源于stack exchange，提问作者Ase Last