Question

我一直在使用的chrome扩展程序在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"]
    }
  ],
  ...
}

带有webpack样式加载器的Chrome扩展程序找不到样式目标

1 个答案: