Manifest V3中如何通过Chrome扩展popup菜单启用/禁用扩展

首先明确之前方案失效的核心原因，和SW常驻没有直接关系，主要是两个典型错误：

• 用service worker全局作用域的变量存储开关状态，SW被浏览器回收后全局变量会直接清空，状态自然丢失
• 错误使用window.localStorage存储状态：MV3的service worker运行在Worker上下文，不存在window对象，localStorage接口直接无法访问，状态根本没有成功写入持久化层

另外纠正一个认知偏差：MV3不需要service worker常驻才能响应图标点击事件。chrome.action.onClicked是浏览器系统层面维护的事件监听，用户点击扩展图标时，哪怕SW已经被销毁，浏览器也会自动唤醒SW执行对应回调，执行完成后空闲再回收，所有试图让SW持续常驻的方案都违反MV3规范，会导致扩展被下架。

方案1：调用management API实现扩展真正的自启停 #

这个方案实现的效果和用户在扩展管理页手动拨动开关完全一致，禁用后扩展的所有内容脚本、拦截规则、后台逻辑都会被浏览器停用，完全符合需求。

1. 先在manifest.json中声明必要权限：

{
  "manifest_version": 3,
  "permissions": ["management", "storage"],
  "action": {
    "default_title": "点击切换扩展状态"
  },
  "background": {
    "service_worker": "background.js"
  }
}

2. 在background.js中写入以下逻辑即可，不需要额外保活：

// 不要在全局作用域定义任何存储状态的变量，SW销毁后会丢失
const SELF_EXT_ID = chrome.runtime.id;

// 监听扩展图标点击
chrome.action.onClicked.addListener(async () => {
  // 每次触发都从持久化存储读最新状态
  const store = await chrome.storage.local.get('isEnabled');
  const currentState = store.isEnabled ?? true;

  if (currentState) {
    // 当前为启用状态，执行自禁用
    await chrome.management.setEnabled(SELF_EXT_ID, false);
    // 禁用后SW会被直接卸载，不需要后续操作
  } else {
    await chrome.management.setEnabled(SELF_EXT_ID, true);
    await chrome.storage.local.set({ isEnabled: true });
  }
});

// 扩展首次安装、浏览器重启后初始化状态
chrome.runtime.onInstalled.addListener(async () => {
  await chrome.storage.local.set({ isEnabled: true });
});
chrome.runtime.onStartup.addListener(async () => {
  await chrome.storage.local.set({ isEnabled: true });
});

注意：扩展被浏览器禁用后，图标会自动显示为Chrome默认的灰色禁用态，不需要手动修改图标资源。

方案2：不真正禁用扩展，仅控制功能开关（无特殊权限要求） #

如果不需要完全停用扩展，只是想通过图标点击切换「功能生效/功能暂停」的状态，可以用这个轻量方案，不需要申请management权限，也不会触发扩展重载：

1. 在manifest.json中声明基础权限：

{
  "manifest_version": 3,
  "permissions": ["storage", "scripting"],
  "action": {
    "default_title": "点击切换功能开关"
  },
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": ["<all_urls>"]
}

2. background.js逻辑：

chrome.action.onClicked.addListener(async (tab) => {
  const store = await chrome.storage.local.get('isFeatureOn');
  const newState = !store.isFeatureOn;
  await chrome.storage.local.set({ isFeatureOn: newState });

  // 同步更新图标和提示，给用户明确的状态反馈
  if (newState) {
    chrome.action.setIcon({ path: "icons/on.png" });
    chrome.action.setTitle({ title: "功能已开启，点击关闭" });
    // 按需向当前标签页注入生效的内容脚本
    chrome.scripting.executeScript({ target: { tabId: tab.id }, files: ["content.js"] });
  } else {
    chrome.action.setIcon({ path: "icons/off.png" });
    chrome.action.setTitle({ title: "功能已关闭，点击开启" });
    // 向已注入内容脚本发消息，通知其停止工作
    chrome.tabs.sendMessage(tab.id, { type: "TOGGLE", enabled: false }).catch(() => {});
  }
});

注意：所有需要判断开关的业务逻辑（比如请求拦截、快捷键响应、内容脚本逻辑），执行前都要从chrome.storage.local读取最新的状态值，不要依赖SW全局变量，避免SW回收后状态不一致。

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