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中，如果那是你的意思偏爱。

如何在Google Chrome扩展程序（清单）中切换css样式

1 个答案: