0

I'm working on a browser addon for Firefox that is supposed to fetch the content of a CSS resource file (present in the addon's directory) and add it to every website visited.

Loading an HTML file works fine:

$.get(browser.runtime.getURL("some-html-file.html"), function(data) {
  console.log(data); // correctly displays content of the file
}

But loading the CSS file doesn't work:

$.get(browser.runtime.getURL("style.css"), function(data) {
  alert("Got the CSS file!"); // not executed
  console.log(data); // nothing in the console
}

I added both files as web-accessible resources in the manifest.json:

"web_accessible_resources": [
  "some-html-file.html",
  "style.css"
]

This works fine:

$("head").append('<link rel="stylesheet" href="' + browser.runtime.getURL("style.css") + '" type="text/css" />');

However, I don't want to add the CSS to the entire page, but only to a shadow DOM. That's why I need the actual content of the CSS file, not just its URL.

Why is that and how to fix it?

Thanks for your help!

Pixelcode
  • 357
  • 3
  • 15
  • It's either a bug in jQuery (you don't need it to fetch the style, just use `fetch`) or in Firefox. – wOxxOm Sep 25 '22 at 18:44

1 Answers1

0

I noticed it's possible to add a <head> to a shadow DOM, so this is a work-around:

var shadowHead = document.createElement("head");
$(shadowHead).append('<link rel="stylesheet" href="' + browser.runtime.getURL("/css/insert-styles.css") + '" type="text/css" />');
$(shadow).prepend(shadowHead);

However, the question why $.get() doesn't work here still stands.

Pixelcode
  • 357
  • 3
  • 15