Question

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

我存储应该触发负载的变量＆＃34; tm＆＃34;

现在，在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清单中使用背景，并且出于其他原因我需要保留此版本。我确实有＆＃34;标签＆＃34;和＆＃34; activeTab＆＃34;在我的权限，以及扩展程序的页面。任何人都可以从这里指出我正确的方向吗？很高兴在需要时提供更多信息。

Answer 1

你可以使用Manifest v2的后台页面/脚本。 documentation说：

background_page属性已替换为包含background或scripts属性的page属性。有关详细信息，请参阅Event Pages文档。
您可以使用弹出式/后台脚本中的chrome.tabs.insertCSS
您无法使用内容脚本中的chrome.tabs.insertCSS

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

send a message到后台脚本并将CSS文件插入消息侦听器

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

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

Chrome扩展程序：如何使用insertCSS从chrome存储中插入CSS条件？

1 个答案: