Chrome扩展content.js中定制内置元素无法工作的解决咨询

核心原因 #

Chrome扩展的Content Script与页面顶层JavaScript上下文是完全隔离的：

• Content Script中的customElements实例独立于页面上下文的customElements
• 当你通过innerHTML插入HTML时，浏览器会使用页面上下文的元素解析逻辑，而该上下文并未注册你的定制内置元素，因此不会触发元素的构造和回调
• 自主自定义元素能正常工作，是因为它是独立标签，Content Script插入后会被自身的customElements识别处理

解决方案 #

方案1：直接用document.createElement创建元素 #

避免使用innerHTML，直接在Content Script中调用document.createElement并指定is属性，这样会使用Content Script的customElements实例：

// 先在Content Script内注册元素
window.customElements.get('custom-builtin-element') || customElements.define('custom-builtin-element', class extends HTMLInputElement {
  constructor() {
    super();
    console.log('custom-builtin-element constructed');
  }
  
  connectedCallback(){
    console.log('custom-builtin-element connected');
  }
}, {extends: 'input'});

// 直接创建元素而非通过innerHTML
const input = document.createElement('input', { is: 'custom-builtin-element' });
input.type = 'radio';
document.body.appendChild(input);

方案2：将元素定义注入到页面上下文 #

如果必须使用innerHTML，需要把定制内置元素的注册逻辑注入到页面顶层上下文，让页面的customElements能识别该元素：

// 在Content Script中注入注册脚本到页面上下文
const injectScript = document.createElement('script');
injectScript.textContent = `
if (!window.customElements.get('custom-builtin-element')) {
  customElements.define('custom-builtin-element', class extends HTMLInputElement {
    constructor() {
      super();
      console.log('custom-builtin-element constructed');
    }
    
    connectedCallback(){
      console.log('custom-builtin-element connected');
    }
  }, {extends: 'input'});
}
`;
document.head.appendChild(injectScript);
injectScript.remove();

// 现在可以正常使用innerHTML插入元素
const cbie = document.createElement('div');
cbie.innerHTML = `<input is='custom-builtin-element' type="radio">`;
document.body.appendChild(cbie);

方案3：移除不必要的Polyfill #

你的Chrome版本（119.0.6045.123）已经原生支持定制内置元素，无需加载webcomponents-sd-ce.js或webcomponents-bundle.js。移除Polyfill可以避免隔离环境下的兼容性冲突，简化逻辑。

内容的提问来源于stack exchange，提问作者Lerner Zhang