我正在为Firefox开发一个浏览器插件，该插件应该获取CSS资源文件的内容(存在于插件的目录中(，并将其添加到访问的每个网站。
加载HTML文件效果良好：
$.get(browser.runtime.getURL("some-html-file.html"), function(data) {
console.log(data); // correctly displays content of the file
}
但是加载CSS文件不起作用：
$.get(browser.runtime.getURL("style.css"), function(data) {
alert("Got the CSS file!"); // not executed
console.log(data); // nothing in the console
}
我在manifest.json:中将两个文件都添加为web-accessible resources
"web_accessible_resources": [
"some-html-file.html",
"style.css"
]
这很好：
$("head").append('<link rel="stylesheet" href="' + browser.runtime.getURL("style.css") + '" type="text/css" />');
然而，我不想将CSS添加到整个页面，而只想将其添加到影子DOM中。这就是为什么我需要CSS文件的实际内容，而不仅仅是它的URL。
为什么会出现这种情况以及如何解决？
谢谢你的帮助！
我注意到可以向shadow DOM添加<head>，所以这是一个解决方案：
var shadowHead = document.createElement("head");
$(shadowHead).append('<link rel="stylesheet" href="' + browser.runtime.getURL("/css/insert-styles.css") + '" type="text/css" />');
$(shadow).prepend(shadowHead);
然而，为什么$.get()在这里不起作用的问题仍然存在。