Chrome 带有 webpack style-loader 的扩展找不到样式目标

Question

一个 chrome 扩展我一直在运行s 上工作，在 firefox 上很好，但每当我尝试运行它在 chrome，webpack style-loader引发此错误：

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

删除 css 导入后，扩展将运行但我需要 css 作为扩展。

Answer 1

出于某种原因，如果您在清单中指定您的扩展程序应运行在 document_start：

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

在 firefox 上，这将在 <head> 构建之后运行，因此 style-loader 将成功注入样式。但是，根据 Chrome's documentation，document_start 将注入 "在构造任何其他 DOM 或任何其他脚本运行."

之前

所以我认为 style-loader 无法将 css 注入到 chrome 上的 <head> 中，因为在文档开始时它尚未构建。

TL;DR：将 "document_start" 更改为 "document_idle"：

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://*.nytimes.com/*"],
      "run_at": "document_idle",
      "js": ["contentScript.js"]
    }
  ],
  ...
}

Chrome 带有 webpack style-loader 的扩展找不到样式目标

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

css

google-chrome-extension

webpack

webpack-style-loader

firefox-addon-webextensions