Javascript 如何检查是否已在Chrome扩展中注入脚本？

我正在制作一个Chrome扩展（清单版本3），当用户单击扩展图标时，我通过调用Chrome.scripting.executeScript和injectCSS来注入我的内容脚本。我希望避免多次注入脚本及其附带的CSS文件。我还想在用户再次单击图标时调用removeCSS。我如何做到这一点

这就是我到目前为止所做的：

Manifest.json

"manifest_version": 3,
  "background": {
      "service_worker": "./background.js"
  },
  "permissions": [
      "activeTab",
      "tabs",
      "storage",
      "scripting"
  ]
}

Background.js

chrome.action.onClicked.addListener((tabId) => {
            chrome.scripting.executeScript({
                target: {tabId: tabId.id},
                files: ["./foreground.js"],
            })
                .then(() => {
                    chrome.scripting.insertCSS({
                        target: {tabId: tabId.id},
                        files: ["./foreground_styles.css"]
                    })
                        .then(() => {
                            console.log("Injected foreground script");
                        });
                })
                .catch(err => console.log(err));
        });

提前谢谢你的帮助