javascript - Chrome 扩展 : Inject different CSS files depending on Option in localStorage

Question

因此，我正在尝试制作一个具有选项页面的扩展，以选择随后实现的 CSS 变体。

我可以使用内容脚本将 CSS 成功添加到页面，我的 list 是:

{
  "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

您应该从 list 中删除 content_scripts 属性(因为无法动态“自定义”它)并使用 Programmatic Injection 而不是(更具体地说是 chrome.tabs.insertCSS )。
(注意:根据您使用/调用它的方式，您需要在 list 中声明 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 */