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

Chrome Extension: How to insert CSS conditioned on variable from Chrome storage using insert CSS?

本文关键字：Chrome 插入 CSS 变量 条件 扩展 何使用 存储      更新时间：2023-09-26

我对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"，以及扩展所针对的页面。

有人能从这里给我指正确的方向吗？如果需要，很乐意提供更多信息。

  1. 可以使用Manifest v2的后台页面/脚本。文件中写道：

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

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

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

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

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