Chrome扩展需多次点击才能移除CSS的问题排查及优化方案求助

大家好，我最近开发一个Chrome Manifest V3扩展，目标是给example.com网站注入自定义CSS，并且点击扩展图标可以移除该CSS。目前CSS注入是正常的，但移除环节出了问题：点击一次扩展图标根本删不掉CSS，得连续点好几次才生效。我试过在点击事件里循环调用多次removeCSS，虽然能解决，但这代码写得太烂了，肯定有更合理的解决方式，想请教下各位大佬。

先贴出我当前的代码：

现有实现代码 #

background.js #

chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  if (tab.url?.startsWith('https://example.com')) {
    await chrome.scripting.insertCSS({
      files: ['style.css'],
      target: { tabId: tabId }
    });
    await chrome.action.enable(tabId);
  }
});

chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url?.startsWith('https://example.com')) {
    await chrome.scripting.removeCSS({
      files: ['style.css'],
      target: { tabId: tab.id }
    });
  }
});

manifest.json #

{
  "manifest_version": 3,
  "name": "__MSG_application_title__",
  "description": "__MSG_application_description__",
  "version": "1.0.0",
  "default_locale": "en_US",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "Toggle dark mode"
  },
  "host_permissions": [
    "*://example.com/*"
  ],
  "permissions": [
    "scripting"
  ]
}

临时的“歪招”解决方案 #

我试过在点击事件里连续调用7次removeCSS，确实能实现一次点击就删掉CSS，但这明显是饮鸩止渴，代码既不优雅也不可维护，后续如果有其他逻辑肯定会出问题。

chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url?.startsWith('https://example.com')) {
    // 连续调用多次，太蠢了
    await chrome.scripting.removeCSS({ files: ['style.css'], target: { tabId: tab.id } });
    await chrome.scripting.removeCSS({ files: ['style.css'], target: { tabId: tab.id } });
    await chrome.scripting.removeCSS({ files: ['style.css'], target: { tabId: tab.id } });
    await chrome.scripting.removeCSS({ files: ['style.css'], target: { tabId: tab.id } });
    await chrome.scripting.removeCSS({ files: ['style.css'], target: { tabId: tab.id } });
    await chrome.scripting.removeCSS({ files: ['style.css'], target: { tabId: tab.id } });
    await chrome.scripting.removeCSS({ files: ['style.css'], target: { tabId: tab.id } });
  }
});

想请教的两个问题 #

1. 为什么会出现这种“单次点击无法移除CSS，必须多次点击”的现象？我猜测是不是CSS被重复注入了？
2. 有没有规范、优雅的解决方案，既能避免重复注入，又能实现“一次点击切换CSS的注入/移除状态”？

内容来源于stack exchange