Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome extension with webpack style-loader couldn't find a style target

A chrome extension I have been working on runs fine on firefox but whenever I try and run it on chrome, webpack style-loader throws this error:

Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.

Once I remove the css imports, the extension will run but I need the css for the extension.

like image 590
nmu Avatar asked Oct 20 '25 08:10

nmu


1 Answers

For some reason, if you specify in your manifest that your extension should run at document_start:

"content_scripts": [
    {
      "run_at": "document_start",
      "matches": // ...
      "js": // ...
    }
  ],

On firefox this will run after the <head> has been constructed and so style-loader will successfully inject the styles. But, as per Chrome's documentation, document_start will inject "before any other DOM is constructed or any other script is run."

So I think the style-loader fails to inject the css into the <head> on chrome because at document start it hasn't been constructed yet.

TL;DR: Change "document_start" to "document_idle":

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://*.nytimes.com/*"],
      "run_at": "document_idle",
      "js": ["contentScript.js"]
    }
  ],
  ...
}
like image 123
nmu Avatar answered Oct 21 '25 22:10

nmu



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!