Question

我正在制作图像裁剪小工具的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中调用该文件，在我的popup.html中调用它，但都没有用。

任何人都可以告诉我我做错了什么，或者我还应该尝试使其有效？

提前致谢...

Answer 1

来自Chrome extension CSP docs：

不会执行内联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>

Answer 2

如果您使用的是React：

在项目根目录中创建一个.env文件
添加变量，如下所示：INLINE_RUNTIME_CHUNK=false
再次构建项目并再次加载扩展。

Source

Answer 3

您必须将内容安全策略添加到manifest.json文件

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

您将在控制台找到

Answer 4

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

Chrome显示错误：由于Content-Security-Policy而拒绝执行内联脚本

4 个答案: