Chrome扩展自定义元素调用方法触发Uncaught TypeError问题排查

我来帮你分析下问题根源，以及对应的解决方案：

问题核心原因 #

Chrome扩展的Content Script运行在独立的隔离上下文中，和页面的主执行上下文是完全分开的。你遇到的问题主要来自两个点：

1. 元素未添加到DOM树（基础错误） #

你原代码里创建了test元素，但没有执行document.body.appendChild(test)把它添加到页面DOM中。这直接导致document.getElementById("test")返回null，调用null.foobar()自然会触发TypeError。

2. 跨上下文的实例隔离（核心问题） #

即使你把元素添加到DOM，当你通过页面控制台、或者看似全局的DOM API获取元素时，拿到的是页面主上下文中的元素实例——而你定义的CustomElement类只存在于Content Script的上下文里，页面主上下文根本不知道这个类的存在，所以实例上没有foobar方法。

你代码里test.foobar()能成功，是因为这个test是在Content Script上下文里创建的实例，直接属于你定义的类；但跨上下文获取的元素实例，就会丢失自定义方法。

针对性解决方案 #

方案一：仅在Content Script内使用自定义元素 #

如果你不需要在页面主上下文（比如控制台）操作这个元素，只需要修正两个小问题即可：

1. 把创建的元素添加到DOM
2. 所有方法调用都在Content Script上下文完成

修改后的background.js代码：

class CustomElement extends HTMLElement {
  constructor() {
    super();
  }
  foobar() {
    console.log("foobar!");
  }
}
// 定义新元素
customElements.define('custom-element', CustomElement);
const test = document.createElement("custom-element");
test.id = "test"; 
document.body.appendChild(test); // 新增：将元素添加到DOM
// 此处可行（Content Script上下文的实例）
test.foobar(); 
// 现在此处也可行（Content Script内获取的实例）
$("#test").get(0).foobar(); 
// 现在此处也可行（Content Script内获取的实例）
document.getElementById("test").foobar();

方案二：让页面主上下文也能访问自定义元素 #

如果需要在页面控制台或页面自身的脚本中调用自定义元素的方法，你需要把自定义元素的定义和Web Components Polyfill注入到页面主上下文中，而不是放在Content Script里。

步骤如下：

1. 重命名原background.js为inject.js，修改内容为动态注入脚本：

function injectToPageContext() {
  // 先注入Web Components Polyfill
  const polyfillScript = document.createElement('script');
  polyfillScript.src = chrome.runtime.getURL('scripts/webcomponents-bundle.js');
  polyfillScript.onload = function() {
    this.remove();
    // 再注入自定义元素的定义代码
    const customElementScript = document.createElement('script');
    customElementScript.textContent = `
      class CustomElement extends HTMLElement {
        constructor() {
          super();
        }
        foobar() {
          console.log("foobar!");
        }
      }
      customElements.define('custom-element', CustomElement);
      
      // 在页面上下文创建并测试元素
      const test = document.createElement("custom-element");
      test.id = "test";
      document.body.appendChild(test);
      test.foobar();
      // 此时在页面控制台调用document.getElementById("test").foobar()也能成功
    `;
    document.head.appendChild(customElementScript);
    customElementScript.remove();
  };
  document.head.appendChild(polyfillScript);
}

injectToPageContext();

2. 修改manifest.json，添加web_accessible_resources声明（让页面能访问Polyfill脚本）：

{
  "name": "Test",
  "version": "1.0",
  "description": "Test",
  "browser_action": {
    "default_title": "Test",
    "default_popup": "html/popup.html"
  },
  "content_scripts": [
    {
      "js": [ "scripts/jquery-3.3.1.min.js", "scripts/inject.js" ],
      "matches": ["<all_urls>"]
    }
  ],
  "web_accessible_resources": [
    "scripts/webcomponents-bundle.js"
  ],
  "manifest_version": 2
}

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