React Chrome Extension无法呈现

问题描述 投票：1回答：1

我开始使用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会引用哪些文件，但到目前为止我还没有运气。如果有人能让我走上正轨，我将非常感激。

reactjs google-chrome-extension
1个回答
2
投票

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

这就是我解决这个问题的方法：

  1. 转到扩展程序标签（chrome：// extensions）
  2. 在您的扩展程序下，您应该看到一个错误按钮，单击它（如果您没有看到它，请单击弹出的扩展名）。
  3. 你会看到一个像Refused to execute inline script because it violates the following Content Security Policy directive这样的错误。复制您在错误消息上看到的sha（'sha256-....'）
  4. 去你的manifest.json
  5. 添加以下密钥
"content_security_policy": "script-src 'self' 'sha256-...INSERT COPIED SHA256 HERE'; object-src 'self'"`
  1. 再次运行npm run build或yarn build。
  2. 重新加载扩展
  3. 它现在应该工作！
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.