55

我正在创建图像裁剪小部件的 Chrome 扩展。我的代码popup.html如下：

<body>
    <textarea id="widget_script" style="border:1px solid #ccc;padding:5px;width:600px" rows="5" readonly></textarea>
    <script type="text/javascript">
        var protocol=window.location.protocol;
        var host= window.location.host;
        var head=('<div id="wd_id" style="margin-bottom: 20px;"></div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></\script>
    <script type="text/javascript" src="'+protocol+'//'+host+'Image_crop/cropimages/img_crop_widget.js'+'"><\/script>
    <script type="text/javascript">init_widget()<\/script>');
        document.getElementById("widget_script").innerHTML=head;
    </script>
</body>

变量协议和主机从浏览器中的 URL获取协议和主机。当我尝试将其集成为 Chrome 扩展时，它不起作用。当它完美运行时，它会在 textarea 中显示以下代码：

<div id="wd_id" style="margin-bottom: 20px;"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://localhost/cropimages/img_crop_widget.js"></script>
<script type="text/javascript">init_widget()</script>

我有一些事情，比如将 JS 代码放在外部 JS 文件中，并manifest.json在 my中调用文件时调用该文件popup.html，但没有一个起作用。

谁能告诉我我做错了什么，或者我还应该怎么做才能让它发挥作用？

提前致谢...

4

4 回答 4

96

来自Chrome 扩展 CSP 文档：

内联 JavaScript 将不会被执行。此限制禁止内联<script>块和内联事件处理程序（例如<button onclick="...">）。

您的扩展 HTML中不能有内联脚本，例如：

<script>alert("I'm an inline script!");</script>

<button onclick="alert('I am an inline script, too!')">

相反，您必须将脚本放入单独的文件中：

<script src="somescript.js"></script>
于 2013-04-22T18:16:23.013 回答
30

如果您将 React 与 create-react-app 一起使用：

  1. .env在项目根目录中创建一个文件

  2. 添加变量如下：INLINE_RUNTIME_CHUNK=false

  3. 再次构建项目并再次加载扩展。

资源

于 2020-01-07T12:54:35.950 回答
12

您必须添加content_security_policy到您的manifest.json文件中：

"content_security_policy": "script-src 'self' 'sha256-B+Qe/KNUDtGDd/m1g5ycAq1DgpLs9ubKmYTlOHBogC8='; object-src 'self'"

您将从控制台找到哈希。

在此处输入图像描述

于 2018-09-25T12:24:12.143 回答
0

我在开发扩展程序时遇到了这个问题。我删除了扩展并再次加载它，这使得错误消息消失了。

于 2021-03-19T18:15:59.887 回答