源代码:在chrome中on click失效
$(`.AddBox`).on('click',()=>{
let url = window.prompt('输入要增加的网址');
// if(url.indexOf(`https://`) !== 0){
// url = `https://` + url;
// }
console.log(url);
hashMap.push({
logo: simplifyUrl(url)[0].toUpperCase(),
url: url
})
render()
})
原因:因为Chrome 禁止通过内容安全策略扩展任何类型的内联代码.
内联JavaScript将不会被执行.此限制禁止内联
<script>块和内联事件处理程序(例如<button onclick="...">).
如何检测
如果这确实是问题,Chrome会在控制台中产生以下错误:
拒绝执行内联脚本,因为它违反了以下内容安全策略指令:"script-src'self'chrome-extension-resource:".要么是'unsafe-inline'关键字,哈希('sha256 -...'),要么是nonce('nonce -...')来启用内联执行.
要访问弹出窗口的JavaScript控制台(通常对调试很有用),请右键单击扩展的按钮,然后从上下文菜单中选择"检查弹出窗口".
有关调试弹出窗口的更多信息,请参见此处.
怎么修
需要删除所有内联JavaScript.Chrome文档中有一个指南.
假设原件看起来像:
<a onclick="handler()">Click this</a> <!-- Bad -->
需要删除onclick属性并为元素提供唯一ID:
<a id="click-this">Click this</a> <!-- Fixed -->
然后从脚本(必须在.js文件中,假设popup.js)附加侦听器:
// Pure JS:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("click-this").addEventListener("click", handler);
});
// The handler also must go in a .js file
function handler() {
/* ... */
}
请注意DOMContentLoaded事件中的包装.这确保了元素在执行时存在.现在添加脚本标记,例如在<head>文档中:
<script src="popup.js"></script>
如果您使用jQuery,请选择:
// jQuery
$(document).ready(function() {
$("#click-this").click(handler);
});
放宽政策
问: 错误提到了允许内联代码的方法.我不想/不能更改我的代码,如何启用内联脚本？
答: 尽管错误说明了,但您无法启用内联脚本:
没有放松对执行内联JavaScript的限制的机制.特别是,设置包含的脚本策略
'unsafe-inline'将不起作用.
更新: 自Chrome 46以来,可以将特定内联代码块列入白名单:
从Chrome 46开始,可以通过在策略中指定源代码的base64编码哈希来将内联脚本列入白名单.此哈希必须以使用的哈希算法(sha256,sha384或sha512)作为前缀.有关示例,请参阅元素的哈希用法
<script>.
但是,我没有看到使用它的理由,也不会启用内联属性onclick="code".
