0

所以，我正在尝试制作一个扩展，它有一个选项页面来选择然后实现的 CSS 的变体。

我可以使用内容脚本成功地将 CSS 添加到页面，我的清单是：

{
  "name": "Extension",
  "description": "Description.",
  "version": "0.1",
  "manifest_version": 2,
  "options_page": "options.html",


    "content_scripts": [
      {
        "matches": ["http://www.google.com*"],
        "css": ["Test.css"]
      }
    ]
}

效果很好，选项页面只是Google选项页面中的默认示例 HTML 和 JavaScript 。

这适用于存储到 localStorage 的值，我不确定如何使用该存储的值基于该值添加不同的 CSS。就像“red”的存储值会将一个 CSS 文件加载到网站，而“green”将加载一个完全不同的 CSS 文件。

提前谢谢了。

4

1 回答 1

3

您应该content_scripts从清单中删除该属性（因为无法动态“自定义”它）并改用编程注入（更具体地说是chrome.tabs.insertCSS）。
（注意：根据您使用/调用它的方式，您需要在清单中声明activeTabortabs权限，以及适当的主机匹配模式。）

例子：

在WhatEverView.htmlJS 上下文中：

var color = ...;
localStorage.setItem("color", color);

在background.js：

function injectCSS(tabId) {
    var color = localStorage.getItem("color");
    var path = (color == "green") ? "file4green.css" : "file4red.css"; 
    chrome.tabs.insertCSS(tabId, {
        file: path,
        allFrames: false
    });
}

/* Call `injectCSS` in a callback of an event, e.g.
 *  - When the bowser-/page-action is clicked
 *  - When a tab is updated etc */
于 2013-11-14T09:28:14.350 回答