如何通过编程修改Firefox扩展工具栏图标？

你的核心问题是内容脚本无法调用browser.browserAction/browser.pageAction这类扩展特权API。内容脚本运行在目标网页的上下文环境中，只能访问网页DOM和部分有限的扩展API，没有权限操作扩展的工具栏图标这类UI元素。

正确实现方式 #

要修改扩展工具栏图标，必须把图标修改逻辑放在后台脚本中，然后通过消息通信或者事件监听来触发修改。

方案1：内容脚本发消息通知后台修改图标 #

1. 更新manifest.json，添加后台脚本配置：

{
  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",
  "description": "Adds a colored border to all webpages matching mozilla.org.",
  "icons": {
     "64": "icons/leaf-64.png"  
  },
  "browser_action": {      
    "default_icon": {               
      "64": "icons/leaf-64.png"   
    }
  },
  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

2. 修改borderify.js，移除无效的API调用，改为发送消息给后台：

document.body.style.border = "5px solid cyan";

// 通知后台修改当前标签页的图标
browser.runtime.sendMessage({ action: "updateIcon" });

3. 创建background.js，接收消息并执行图标修改：

// 监听内容脚本的消息
browser.runtime.onMessage.addListener((message, sender) => {
  if (message.action === "updateIcon") {
    // 指定tabId只修改当前标签页的图标
    browser.browserAction.setIcon({
      path: "icons/redleaf-64.png",
      tabId: sender.tab.id
    });
  }
});

方案2：后台自动监听标签页事件修改图标 #

如果不需要内容脚本触发，想在匹配页面加载完成时自动修改图标，可以直接在后台脚本监听标签页更新事件：

// 当标签页加载完成且URL匹配mozilla.org时修改图标
browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === "complete" && tab.url.includes("mozilla.org")) {
    browser.browserAction.setIcon({
      path: "icons/redleaf-64.png",
      tabId: tabId
    });
  } else {
    // 离开匹配页面时恢复默认图标
    browser.browserAction.setIcon({
      path: "icons/leaf-64.png",
      tabId: tabId
    });
  }
});

注意事项 #

• 确保icons/redleaf-64.png文件存在，路径与代码中一致
• 使用tabId参数可以仅修改当前标签页的图标，不会影响其他标签页的扩展图标显示
• 你当前使用的是Manifest V2，若后续升级到V3，API会有调整（比如browserAction改为action）

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