Question

我开始使用React构建一个Chrome扩展程序。我的第一个目标就是让React徽标在浏览器扩展中打开，就像任何React项目在其初始构建后一样。我遵循了一些教程并设置了清单文件：

{
  "short_name": "React App",
  "name": "React Extension",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "public/index.html",
    "default_title": "React Ext"
  },
  "version": "1.0"
}

我还没有编辑任何其他文件，所以index.html看起来像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>
  </body>
</html>

当我将扩展程序文件上传到Chrome并尝试运行此扩展程序时，只会显示一个小白框。我希望通常的React徽标都能在我的扩展程序中呈现出来。我一直在研究各种解决方案，但确实发现，如果在index.html中添加

标记和一些文本，则该文本将出现在浏览器扩展中。

我猜我需要一些信息来告诉清单。index.html将引用哪些文件，但是到目前为止我还没有运气。如果有人能让我走上正确的道路，我将不胜感激。

Answer 1

问题在于扩展程序生成了错误，很可能是内容安全策略错误。

这是我解决该问题的方法：

转到扩展程序标签（chrome：// extensions）
在您的扩展程序下，您应该看到一个错误按钮，单击它（如果您没有看到它，请单击弹出的扩展程序。）
您将看到类似Refused to execute inline script because it violates the following Content Security Policy directive之类的错误。复制您在错误消息（'sha256-....'）上看到的sha
转到您的manifest.json
添加以下密钥

"content_security_policy": "script-src 'self' 'sha256-...INSERT COPIED SHA256 HERE'; object-src 'self'"`

再次运行npm run build或yarn build。
重新加载扩展程序
现在应该可以使用！

反应Chrome扩展不呈现

1 个答案: