Firefox扩展中background script调用content script函数的最优方法是什么

实现可行性 #

该需求完全可以实现，最短实现路径是通过Firefox扩展内置的跨上下文消息通信机制完成，无需额外依赖，仅需修改少量代码即可正常运行。

具体修改步骤 #

• 1. 补全manifest.json权限配置 #

  新增必要的menus和activeTab权限，确保后台脚本可以调用菜单接口、访问当前标签页内容：

  {
    "permissions": ["menus", "activeTab"],
    "background": {
      "scripts": ["background.js"]
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
      }
    ]
    // 其余原有配置保持不变即可
  }
  

• 2. 修改content.js监听消息请求 #

  移除冗余的全局变量和旧函数，新增消息监听逻辑，收到获取选中文本的请求时直接返回结果：

  browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'fetchSelectedText') {
      sendResponse(window.getSelection().toString());
    }
  });
  

• 3. 修改background.js触发消息请求 #

  替换原有直接调用content函数的逻辑，菜单点击时向当前标签页的content脚本发消息，拿到返回结果后执行后续业务逻辑：

  browser.menus.onClicked.addListener(async (info, tab) => {
    // 向当前标签页发送请求获取选中文本
    const selectedText = await browser.tabs.sendMessage(tab.id, { action: 'fetchSelectedText' });
    // 后续业务逻辑直接使用selectedText即可
    /* Doing various stuff that have to use the text variable */
  });
  

补充说明 #

• 该方案兼容Manifest V2/V3两个版本，如果你使用的是Manifest V3，仅需将background的scripts配置改为service_worker即可，通信逻辑无需改动
• 若当前页面无选中文本，返回值为空字符串，可根据业务需求自行添加判空逻辑
• 不需要额外维护全局变量存储选中文本，每次请求实时获取可以避免数据过时的问题

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