Chrome扩展程序:如何使用insertCSS从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属性已替换为background包含a scripts或pageproperty的属性.详细信息可在" 事件页面"文档中找到.

2. 您可以使用chrome.tabs.insertCSS弹出/后台脚本
3. 您无法使用chrome.tabs.insertCSS内容脚本

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

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

2. 在"web_accessible_resources"键下的manifest.json中声明CSS文件,只需添加一个<link>指向该CSS文件的元素:

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