How to load css file without xhr warning?

[giggity-hub]

I'm loading the css content for the style tag from a web accessible resource inside a content script.
If i load the file with an asynchronous request there is a brief moment where you can see the original style before the custom style is applied.

const style = document.createElement('style');

const url = chrome.runtime.getURL('styles/layout.css');

fetch(url)
.then(response => response.text())
.then(css => style.textContent = css)

document.documentElement.appendChild(style);

new MutationObserver((mutations, observer) => {
  if (document.body) {
    observer.disconnect();
    document.documentElement.appendChild(style); // move the style
  }
}).observe(document.documentElement, {childList: true});

If i load the file with a synchronous request instead i do not have that problem but i get a warning that
synchronous XHTML Requests should not be executed in the main thread because they are blocking.

const style = document.createElement('style');

const url = chrome.runtime.getURL('styles/layout.css');

$.ajax({
  url: chrome.runtime.getURL('styles/layout.css'),
  success: function(result){
      style.textContent = result;
  },
  async: false
})

document.documentElement.appendChild(style);

new MutationObserver((mutations, observer) => {
  if (document.body) {
    observer.disconnect();
    document.documentElement.appendChild(style); // move the style
  }
}).observe(document.documentElement, {childList: true});

I see that you are also retreiving the styles synchronously in apply.js getStylesViaXhr().
Do you also get that warning message or is there a work around?

[tophf]

Do you also get that warning message

Yes. You can hide it by right-clicking it in devtools console.

I'm loading the css content for the style tag from a web accessible resource

Don't do it. Put the code inside the inline string as I shown originally. If you use a build system there should be a plugin that reads a file and puts its contents instead of a predefined placeholder.

The only alternative is to read the file in the background script in chrome.webNavigation.onBeforeNavigation, store it in a global variable, then send via message to the content script. But it's really an unnecessary complication in case of a single-theme extension.

[giggity-hub]

Do you have any bundler suggestions for this?

[tophf]

Nope. Any modern bundler should be able to do it I think