Firefox扩展Page Action图标适配明暗主题的最佳实践

这个问题问得很到位！确实Firefox的page_action不像browser_action那样支持theme_icons属性，要实现主题适配得绕点路，但有两个靠谱的方案能完美满足你的需求——咱们一步步来看：

方案1：用带currentColor的SVG图标（无需JS，最简方案） #

这是最省心的办法，利用CSS颜色继承特性让图标自动适配主题：

1. 把你的图标做成SVG格式，将填充色（fill属性）设为currentColor，而不是固定的黑色。比如：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <!-- 替换成你自己的图标路径 -->
  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" fill="currentColor"/>
</svg>

2. 在manifest.json里把page_action的default_icon设为这个SVG文件。

这样一来：

• 浅色主题下，工具栏文本是深色（比如黑色），currentColor会继承这个颜色，图标显示深色；
• 深色主题下，工具栏文本是浅色（比如白色），图标自动切换为浅色；
• 菜单里的图标会继承菜单的文本颜色（通常是黑色），正好符合你“菜单图标保持黑色”的需求。

这个方案完全不用写代码，也不需要额外权限，是首选方案。

方案2：用JS监听主题变化，动态切换图标（更灵活） #

如果SVG方案无法满足你的精细控制需求（比如需要针对特定主题显示不同图标），可以用JavaScript实现动态切换：

步骤1：准备两套图标 #

准备深色版（icon-dark.svg，用于浅色主题）和浅色版（icon-light.svg，用于深色主题）图标，放在扩展的icons目录下。

步骤2：编写后台脚本（background.js） #

// 判断当前是否为深色主题
async function checkIsDarkTheme() {
  const currentTheme = await browser.theme.getCurrent();
  if (!currentTheme?.colors) return false;
  
  // 通过工具栏文本颜色判断主题类型：文本越亮，背景越暗
  const toolbarTextColor = currentTheme.colors.toolbar_text;
  if (!toolbarTextColor) return false;
  
  // 把十六进制颜色转成亮度值
  const rgb = parseInt(toolbarTextColor.slice(1), 16);
  const r = (rgb >> 16) & 0xff;
  const g = (rgb >> 8) & 0xff;
  const b = rgb & 0xff;
  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
  
  // 亮度高于128说明文本是浅色，对应深色主题
  return brightness > 128;
}

// 设置page_action图标
async function updatePageActionIcon() {
  const isDark = await checkIsDarkTheme();
  const iconPath = isDark ? "./icons/icon-light.svg" : "./icons/icon-dark.svg";
  await browser.pageAction.setIcon({ path: iconPath });
}

// 初始化时设置图标
updatePageActionIcon();

// 监听主题变化，实时更新图标
browser.theme.onUpdated.addListener(updatePageActionIcon);

步骤3：更新manifest.json #

添加后台脚本和theme权限：

{
  "manifest_version": 2,
  "name": "你的扩展名称",
  "version": "1.0",
  "page_action": {
    "default_icon": "./icons/icon-dark.svg",
    "default_title": "你的Page Action标题"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": ["theme"]
}

这个方案需要申请theme权限，但能精确控制图标的切换逻辑，适合复杂场景。

总结 #

如果追求简单高效，优先选SVG方案；如果需要更灵活的控制，就用JS动态切换。这两种都是目前Firefox下page_action主题适配的最佳实践。

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