google-chrome - jquery扩展拒绝加载脚本,因为内容安全策略指令

  显示原文与译文双语对照的内容

下面是我的HTML代码

脚本:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<script src="background.js"></script>



html :


 <button name="btnlogin" id="btnlogin">Login</button><br/><br/>



下面是 js


$(document).ready(function(){


document.getElementById("#btnlogin").click(function(){


 alert("s");


 });


});



清单 file:


{


"manifest_version": 2,


"name":"One-click Kittens",


"description":"This extension demonstrates a 'browser action' with kittens.",


"version":"1.0",


"browser_action": {


"default_icon":"icon.png",


"default_popup":"popup.html"


},


}



我发现当我在浏览器中运行这个代码时,当我将它作为 Chrome 扩展运行时,会出现错误。

未捕获的Uncaught: $ 未定义

由于违反了以下内容安全策略指令,拒绝加载脚本'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js': "脚本源'自我'chrome-extension-resource:"。

我不明白这些错误是什么。 请帮我理解这个扩展。

谢谢你

时间: 原作者:

在 Chrome 扩展中,必须通过清单中的扩展内容安全策略 ( CSP )的显式允许外部脚本源:

如果需要某些外部JavaScript或者对象资源,可以通过。安全来源将策略放在受限范围内。

允许从 example.com 加载脚本资源的松松策略定义如下所示:


"content_security_policy":"script-src 'self' https://example.com; object-src 'self'"



脚本只能通过HTTPS加载到扩展,因此你必须通过HTTPS加载 jQuery CDN资源:


<script src="https://ajax.googleapis.com/..."></script>



在 Manifest 中添加一个已经修改的CSP,以允许该HTTPS资源:


{


"manifest_version": 2,


"name":"One-click Kittens",


"description":"This extension demonstrates a 'browser action' with kittens.",


"version":"1.0",


"browser_action": {


"default_icon":"icon.png",


"default_popup":"popup.html"


 },


"content_security_policy":"script-src 'self' https://ajax.googleapis.com; object-src 'self'"


}



但是,对于你的特定案例,更好的解决方案是将jQuery包括在你的扩展中,而不是从 Internet ( 例如你的扩展当前无法脱机工作) 加载。 只需在扩展文件夹中包含一个jQuery副本,并在脚本标记中使用 relative 路径引用它。 假设你的jQuery库和HTML弹出文件位于同一子目录中,只需执行以下操作:


<script src="jquery-x.y.z.min.js"></script>



原作者:
...