Chrome扩展中动态注入的Lit Web Component函数无法调用求助

核心原因：Chrome扩展的上下文隔离机制 #

Chrome扩展的content script与页面主执行上下文（main world）是相互隔离的：

• 两者共享DOM结构，但各自的JavaScript运行环境独立，变量、函数、DOM元素的方法/属性都不互通。
• 你通过动态注入的<script type="module">是在页面的main world中执行的，因此<add-to-list>组件的productAdded方法被定义在main world的元素原型上。
• 而你在content script中获取到的<add-to-list>元素，属于content上下文的对象，这个对象并没有挂载main world中定义的productAdded方法，所以调用时会抛出“productAdded is not a function”错误。

解决方案 #

方案1：通过自定义事件跨上下文通信 #

利用DOM事件可以跨上下文传递的特性，在content script中触发自定义事件，在main world中监听事件并调用组件方法：

1. 在你的组件脚本add-to-list.js末尾添加事件监听代码：

// add-to-list.js
window.addEventListener('call-product-added', (e) => {
  const { id, status } = e.detail;
  document.getElementById('comp').productAdded(id, status);
});

2. 修改content script中的调用逻辑，替换为触发自定义事件：

// inject.js 中的setTimeout部分
setTimeout(function () {
  window.dispatchEvent(new CustomEvent('call-product-added', {
    detail: { id: 'id', status: 'success' },
    bubbles: true,
    composed: true // 确保事件能穿透shadow DOM并跨上下文传递
  }));
}, 100);

方案2：将组件操作全部放在main world中执行 #

把创建组件、调用方法的逻辑都封装到注入页面的脚本里，避免跨上下文操作：

// inject.js（content script）
window.addEventListener('WebComponentsReady', () => { 
  const script = document.createElement('script');
  script.setAttribute("type", "module");
  script.textContent = `
    import 'https://localhost:8000/add-to-list.js';
    // 等待组件定义完成
    customElements.whenDefined('add-to-list').then(() => {
      const box = document.createElement('add-to-list');
      box.className = 'comp';
      box.id = 'comp';
      document.body.appendChild(box);
      // 组件就绪后直接调用方法
      box.productAdded('id', 'success');
    });
  `;
  const head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
  head.insertBefore(script, head.lastChild);
});

这种方式让所有组件相关操作都在main world中执行，完全规避上下文隔离问题。

方案3：使用Manifest V3的world: "MAIN"配置（仅适用于Manifest V3+） #

如果你的扩展使用Manifest V3，可以将content script配置为直接运行在main world中，这样就能直接调用组件方法：
修改manifest.json中的content_scripts配置：

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["webcomponents-sd-ce.js"],
    "world": "MAIN"
  },
  {
    "matches": ["https://*/*", "http://*/*"],
    "js": ["src/inject/inject.js"],
    "world": "MAIN"
  }
]

⚠️ 注意：此方式会让content script暴露在页面的执行环境中，存在被页面脚本篡改的安全风险，需谨慎使用。

额外注意事项 #

• 确保webcomponents-sd-ce.js与组件脚本运行在同一上下文，否则组件可能无法正确初始化。
• 动态模块脚本的加载是异步的，建议使用customElements.whenDefined('add-to-list')替代固定延迟的setTimeout，确保组件完全定义后再执行方法调用。

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