Search code examples
csswebpackgoogle-chrome-extensionfirefox-addon-webextensionswebpack-style-loader

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.

Solution

  • 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"]
    }
  ],
  ...
}