Chrome扩展程序：根据localStorage中的选项注入不同的CSS文件

Question

所以，我正在尝试制作一个包含选项页面的扩展程序，以选择随后实现的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"]
      }
    ]
}

哪种方法正常，“选项”页面只是Options Page on Google中默认的HTML和JavaScript示例。

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

非常感谢提前。

Answer 1

您应该从清单中移除content_scripts属性（因为无法动态“自定义”）并使用 Programmatic Injection （更具体地说， chrome.tabs.insertCSS ）。
（注意：根据您使用/调用它的方式，您需要在清单中声明activeTab或tabs权限，以及相应的 host match pattern(s) 。）

示例：

在WhatEverView.html的JS背景：

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 */