Chrome擴展程序：根據localStorage中的Option注入不同的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"]
      }
    ]
}

效果很好，“選項”頁面只是Google “ 選項”頁面上的默認示例HTML和JavaScript。

這與將值存儲到localStorage一起工作，我不確定是如何使用該存儲的值基於該值添加不同的CSS的。 就像具有“紅色”的存儲值將向網站加載一個CSS文件一樣，而“綠色”則將加載一個完全不同的CSS文件。

提前謝謝了。

Answer 1

您應該從清單中刪除content_scripts屬性（因為無法動態地“自定義”該屬性），而應改用Programmatic Injection （尤其是chrome.tabs.insertCSS ）。
（注意：根據您使用/調用它的方式，您需要在清單中聲明activeTab或tabs權限以及相應的主機匹配模式 。）

例：

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