以下是我的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");
});
});
清单文件:
{
"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扩展运行时,它会给我以下错误。
未捕获引用错误:未定义$
和
拒绝加载脚本'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',因为它违反了以下内容安全策略指令:"script src'self'chrome扩展资源:"
我不明白这些错误是什么。请帮我理解分机号。。
感谢
在Chrome扩展中,扩展的内容安全策略(CSP)必须在清单中明确允许外部脚本源:
如果您需要一些外部JavaScript或对象资源,您可以通过将应接受脚本的安全来源列入白名单,在一定程度上放宽策略。。。
允许通过HTTPS从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>
并将一个修改后的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的副本,并在脚本标记中使用相对路径引用它。假设您的jQuery库和HTML弹出文件在同一个子目录中,只需执行以下操作:
<script src="jquery-x.y.z.min.js"></script>
<script nonce='<?= CSP::getNonce() ?>'>
var oldCreate = document.__proto__.createElement;
document.__proto__.createElement = function (elementName) {
var el = oldCreate.apply(this, arguments);
if (elementName == "script") {
el.setAttribute('nonce', '<?= CSP::getNonce() ?>');
}
return el;
}
</script>
<script nonce='<?= CSP::getNonce()?>' type="text/javascript" src="/include/jquery.js"></script>