文章/答案/技术大牛

发布

社区首页 >问答首页 >响应Chrome扩展程序不呈现

问响应Chrome扩展程序不呈现
EN

Stack Overflow用户

提问于 2018-11-14 13:50:51

回答 1查看 2K关注 0票数 1

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

{
  "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并尝试运行这个扩展名时，只会出现一个小的白色框。我希望通常的反应标志已经呈现在我的扩展。我一直在玩各种各样的解决方案，我发现如果我加上

标签和一些文本进入我的index.html，然后该文本将出现在浏览器扩展。

我猜我需要一些东西来告诉我的清单，index.html将引用哪些文件，但到目前为止，我还没有任何运气。如果有人能让我走上正确的轨道，我会非常感激的。

reactjs

google-chrome-extension

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-24 20:24:41

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

我就是这样解决这个问题的：

转到扩展选项卡(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。
再装填延伸
它现在应该能用了！

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53301805

复制

相似问题

问响应Chrome扩展程序不呈现
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应Chrome扩展程序不呈现EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应Chrome扩展程序不呈现
EN