Chrome 扩展：如何使用插入 CSS 从 Chrome 存储中插入以变量为条件的 CSS？

Question

我对 Chrome 扩展程序有点陌生，所以我想我可能只是遗漏了一些小东西，但我试图让用户根据他们的选项加载一个额外的 CSS 页面和一个 JS 页面（这基本上是一个不同的主题）。

我将触发负载的变量存储为tm

现在，在 JS 页面中，我有：

var Theme;
function getVars() {
  chrome.storage.sync.get({
    tm: "",
  }, function(items) {
    Theme = items.tm;
    changeTheme();
  });
}

这会触发changeTheme函数，并根据Theme的值运行正确的 JS 函数。

问题是我还需要加载一个 CSS 表，但我无法弄清楚这部分。 现在，在同一个 JS 文件中，在changeTheme函数中，我也在调用：

chrome.tabs.insertCSS({file: "starWars.css"});

这给了我错误：

 Error in response to storage.get: TypeError: Cannot read property 'insertCSS' of undefined
at changeTheme (chrome-extension://ipicalmjapbogbfpaddglpachiijdffn/starWars.js:96:14)
at Object.callback (chrome-extension://ipicalmjapbogbfpaddglpachiijdffn/starWars.js:7:5)
at getVars (chrome-extension://ipicalmjapbogbfpaddglpachiijdffn/starWars.js:3:23)
at chrome-extension://ipicalmjapbogbfpaddglpachiijdffn/starWars.js:10:1

我的清单版本是2 ，这与我在此找到的其他 StackOverflow 帖子不同。 您不能在第 2 版清单中使用背景，出于其他原因我需要保留在此版本中。 我的权限中确实有"tabs"和"activeTab" ，以及扩展程序所在的页面。

任何人都可以从这里指出我正确的方向吗？ 如果需要，很高兴提供更多信息。

Answer 1

1. 您可以在 Manifest v2 中使用背景页面/脚本。 文档说：

background_page 属性已被替换为包含scripts或page属性的background属性。 事件页面文档中提供了详细信息。 2.可以使用chrome.tabs.insertCSS从弹出/背景脚本3.您不能使用chrome.tabs.insertCSS从内容脚本

因此，如果您想在内容脚本中注入 CSS 文件，您有两个选择：

1. 向后台脚本发送消息并在消息侦听器中插入 CSS 文件

2. 在 manifest.json 中的"web_accessible_resources"键下声明 CSS 文件，然后简单地添加一个指向该 CSS 文件的<link>元素：

    document.head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" type="text/css" href="' + chrome.runtime.getURL("starWars.css") + '">' );