javascript - 如何在谷歌浏览器扩展中切换 css 样式( list )

Question

我在 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 中一样。

我没有任何类型的背景 .js 文件或扩展文件夹中的任何 js 文件。 所以，我的问题是，如何通过单击图标来切换“style.css”文件？ 我知道有 https://developer.chrome.com/extensions/browserAction但我不知道如何正确实现。 谢谢。

Answer 1

这是一个非常简单的 js 添加，应该可以让您获得基本功能:

在 manifest.json 中，您可以添加一个名为 toggleCss.js 的 javascript 文件:

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

您还需要为 browser_action 图标和标题添加一些配置(按照您链接的指南，忽略 default_popup)。

在 toggleCss.js 中，为浏览器操作图标添加一个点击处理程序，并在页面的 body 元素上简单地切换一个自定义类:

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

然后将所有自定义 CSS 都基于具有该类的主体。假设您希望所有 spans 都为红色:

body.customCssClass span {
    color: red;
}

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