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

user_1649917 0
Viewed 1861

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.

webpack-style-loader firefox-addon-webextensions webpack google-chrome-extension css
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"]
    }
  ],
  ...
}
user_16499170
Related