Firefox Manifest V3扩展非ES6方式跨文件导入方法问询

针对你不想在多个content script中重复UI生成代码的需求，除了你提到的Background调用方案外，还有以下可行替代方案：

1. 利用scripting API注入共享代码 #

把UI生成的核心逻辑放到独立文件（比如ui-generator.js），通过浏览器的scripting.executeScriptAPI在需要的content script中注入该文件，实现代码复用：

• 首先在manifest中声明scripting权限
• 在任意需要的content script中执行：

// content-script-xxx.js
browser.scripting.executeScript({
  target: { tabId: browser.devtools.inspectedWindow.tabId },
  files: ['ui-generator.js']
}).then(() => {
  // 调用共享文件里的方法生成UI
  window.generateCustomUI();
});

2. 暴露共享文件为可访问资源并动态引入 #

将UI生成代码封装成自执行函数挂载到全局，通过web_accessible_resources配置允许content script访问：

• ui-generator.js示例：

(function() {
  window.generateCustomUI = function() {
    // 这里写UI生成逻辑
    const customUI = document.createElement('div');
    customUI.className = 'ext-custom-ui';
    customUI.textContent = '扩展自定义UI';
    document.body.appendChild(customUI);
  };
})();

• 在manifest.json中添加配置：

"web_accessible_resources": [
  {
    "resources": ["ui-generator.js"],
    "matches": ["https://目标网站域名/*"] // 替换为你需要匹配的网站规则
  }
]

• 在content script中动态引入：

const script = document.createElement('script');
script.src = browser.runtime.getURL('ui-generator.js');
script.onload = () => {
  window.generateCustomUI();
  script.remove(); // 避免冗余DOM
};
document.head.appendChild(script);

3. 基于消息传递触发共享代码执行 #

将UI生成代码作为独立文件，通过content script向Background发送消息，由Background调用scripting API注入代码并执行：

• Background中监听消息：

browser.runtime.onMessage.addListener((msg, sender) => {
  if (msg.type === 'triggerUI') {
    return browser.scripting.executeScript({
      target: { tabId: sender.tab.id },
      func: () => {
        // 这里直接写UI生成逻辑，或者引入外部文件
        const ui = document.createElement('div');
        ui.textContent = '触发生成的UI';
        document.body.appendChild(ui);
      }
    });
  }
});

• Content script中发送消息：

browser.runtime.sendMessage({ type: 'triggerUI' });

4. 你现有方案的优化方向 #

如果已经在用Background调用生成UI的方式，可以优化为：将UI生成逻辑抽离到独立文件，由Background通过scripting.executeScript注入到目标页面，同时通过消息传递接收content script的触发指令，减少Background中的冗余代码。

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