开发Firefox扩展：实现切换browser.display.document_color_use设置的按钮

嘿，别慌！我一步步带你搞定这个按钮开发，其实流程很清晰，咱们慢慢来：

第一步：先明确核心——这是个Firefox浏览器扩展 #

你要修改的browser.display.document_color_use是Firefox的系统配置项，只有浏览器扩展（WebExtension）才有权限修改它，所以咱们的目标就是做一个超轻量的小扩展。

第二步：创建扩展的核心文件 #

先在电脑上建个文件夹（比如叫ColorToggleBtn），然后在里面创建这几个关键文件：

1. manifest.json（扩展的“身份配置文件”） #

这个文件告诉Firefox你的扩展叫啥、能做啥，把下面代码复制进去就行：

{
  "manifest_version": 3,
  "name": "颜色配置切换器",
  "version": "1.0",
  "description": "一键切换浏览器颜色配置",
  "permissions": ["storage", "browserSettings"],
  "action": {
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png"
    },
    "default_title": "切换颜色配置"
  },
  "background": {
    "scripts": ["background.js"]
  }
}

• 这里browserSettings权限是用来修改浏览器配置的，storage是帮咱们记住按钮的当前状态（比如下次打开浏览器不用重新调整）。
• 图标可以找两个尺寸的PNG图（16x16和48x48），暂时没有的话用纯色占位图也不影响测试。

2. background.js（按钮的核心逻辑脚本） #

这是实现点击切换的关键代码，复制进去：

// 初始化：先获取当前配置值，设置按钮初始状态
async function init() {
  const currentSetting = await browser.browserSettings.displayDocumentColorUse.get({});
  await browser.storage.local.set({ currentValue: currentSetting.value });
  // 更新按钮提示，让你知道当前状态
  updateButtonStatus(currentSetting.value);
}

// 更新按钮的提示文本（也可以加切换图标的逻辑）
function updateButtonStatus(value) {
  const tipText = value === 1 ? "当前：使用系统颜色，点击切换为自定义" : "当前：自定义颜色，点击切换为系统";
  browser.action.setTitle({ title: tipText });
}

// 处理按钮点击事件
browser.action.onClicked.addListener(async () => {
  const savedValue = await browser.storage.local.get("currentValue");
  const newValue = savedValue.currentValue === 1 ? 2 : 1;
  
  // 修改浏览器配置项
  await browser.browserSettings.displayDocumentColorUse.set({ value: newValue });
  // 保存新状态到本地
  await browser.storage.local.set({ currentValue: newValue });
  // 更新按钮提示
  updateButtonStatus(newValue);
});

// 扩展加载时自动初始化
init();

• 这里的browser.browserSettings.displayDocumentColorUse就是对应你要改的browser.display.document_color_use，1是系统颜色，2是自定义颜色，逻辑就是点击一下就互换。

3. 图标文件 #

准备两个PNG图标，命名为icon16.png和icon48.png放进文件夹里，没有的话随便找个小图片改尺寸就行。

第三步：在Firefox里加载测试 #

• 打开Firefox，地址栏输入about:debugging回车，进入扩展调试页面。
• 点击“此 Firefox”（有些版本是“临时加载附加组件”）。
• 点击“加载临时附加组件...”，选中你刚才创建的manifest.json文件。
• 现在浏览器右上角就会出现你的按钮啦，点击它就能切换配置值了！

第四步：验证效果 #

• 点击按钮后，打开about:config，搜索browser.display.document_color_use，看看值是不是在1和2之间切换。
• 也可以打开一个网页，看看颜色显示有没有对应变化（比如你之前设置了自定义背景色的话，切换后会立刻生效）。

小补充 #

• 要是想让按钮状态更直观，可以在updateButtonStatus里加个切换图标的逻辑，比如状态1用绿色图标，状态2用蓝色图标。
• 要是以后想把这个扩展发布到Firefox插件商店，只需要把文件夹打包成ZIP，按照Mozilla的提交流程走就行，测试阶段用临时加载完全够。

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