1

我是 chrome 扩展开发的新手。我正在编写一个将 CSS 注入页面的 chrome 扩展。通过在 manifest.json 中指定 css 文件，我已经成功地做到了这一点。

我现在想根据通过 browser_action 触发的弹出窗口中选择的链接或按钮应用不同的 css（文件）。因此，单击链接 1 将应用 style-red.css，单击链接 2 将应用 style-blue.css。第三个“重置”按钮应将 css 重置为其原始状态（删除自定义样式的红色或蓝色 css 文件）。

我的 manifest.json 如下：

{
  "name": "Redesign",
  "version": "1.0",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["*://*.my-site.com/*"],
            "js": ["jquery-3.1.0.min.js", "script.js"]
    }
    ],
    "browser_action": {
        "default_icon": "icon.png",
    "default_popup": "popup.html"
    },
  "permissions": [
        "tabs", "*://*.my-site.com/*"
   ]
}

我目前的方法是在 script.js 中有一个监听器来监听 popup.html 中按下的按钮。根据按下的按钮，以下 script.js 将使用下面的 jquery 将相应的 CSS 文件添加到 my-site.com 中：

$(document).ready(function() {
var path = chrome.extension.getURL('style-red.css');
$('head').append($('<link>')
    .attr("rel","stylesheet")
    .attr("type","text/css")
    .attr("href", path));
});

我尝试在 script.js 中使用上面的 jquery（没有 manifest.json 中的 browser_action），认为 script.js 会自动加载，但 CSS 不会应用于 my-site.com。我做错了什么或者是否有更简单的 Javascript 而不需要添加完整的 jquery 库？

即使 jquery 有效，我如何根据 popup.html 中的选择应用不同的 CSS 文件，以及如何根据用户选择将 css 重置为其原始样式？

4

1 回答 1

1
  1. 要在内容脚本中插入 css 文件，您需要将 css 文件声明为web_accessible_resources
  2. 要动态插入 css 文件，请参阅chrome.tabs.insertCSS，它可以在扩展上下文中调用，例如弹出页面。
于 2016-08-06T04:47:45.237 回答