Javascript 如何在google chrome扩展（清单）中切换css样式

我在manifest.json中有以下代码：

{
  "name": "Simple Css Modification",
  "description": "Simple Css Modification",
  "version": "0.1",
  "browser_action": {
  "default_icon": "icon.png"
  },
  "content_scripts": [
  {
  "matches": ["*://localhost/*"],
  "css": ["style.css"]
  }
  ],
"manifest_version": 2
}

样式很好，就像style.css中的样式一样

我没有任何类型的background.js文件或扩展文件夹中的任何js文件。 所以，我的问题是，如何通过单击图标来切换“style.css”文件？ 我知道有，但我不知道如何正确实施。

---

谢谢。

这里有一个非常简单的js添加，可以让您获得基本功能：

在manifest.json中，您可以添加一个名为

toggleCss.js

的javascript文件：

"content_scripts": [
  {
    "matches": ["*://localhost/*"],
    "css": ["style.css"],
    "js": ["toggleCss.js"]
  }
],

您还需要为

browser\u操作

图标和标题添加一些配置（按照链接的指南进行操作，忽略

default\u弹出窗口

）

在

toggleCss.js

中，为浏览器操作图标添加一个单击处理程序，只需在页面的

body

元素上切换一个自定义类：

chrome.browserAction.onClicked.addListener(function(){
    document.body.classList.toggle('customCssClass');
});

然后将所有自定义css基于该类的主体。假设您希望所有

跨距
为红色：

body.customCssClass span {
    color: red;
}

根据您的目标，使用javascript直接在您想要影响的元素上切换类可能会更有效，但是使用
body
可以使您的逻辑保持在css中（如果您喜欢的话）