为了账号安全,请及时绑定邮箱和手机立即绑定

Chrome扩展弹出不起作用,单击事件无法处理

Chrome扩展弹出不起作用,单击事件无法处理

Chrome扩展弹出不起作用,单击事件无法处理我已经创建了一个JavaScript变量,当我单击该按钮时,它应该会增加1,但不会发生。这是manifest.json.{   "name":"Facebook",   "version":"1.0",   "description":"My Facebook Profile",   "manifest_version":2,   "browser_action":{     "default_icon":"google-plus-red-128.png",     "default_popup":"hello.html"   }}以下是html页面的代码<!DOCTYPE html><html><head><script>var a=0;function count(){   a++;   document.getElementById("demo").innerHTML=a;   return a;}</script></head><body><p id="demo">=a</p><button type="button" onclick="count()">Count</button></body></html>我希望扩展显示a的值,并在每次单击扩展名或按钮时将其递增一次。
查看完整描述

2 回答

?
哔哔one

TA贡献1854条经验 获得超8个赞

您的代码无法工作,因为它违反了默认设置。内容安全策略..我制作了一个一分钟的屏幕来说明出了什么问题:


首先,我演示了如何调试问题。右键单击弹出按钮,然后单击“检查弹出”..这样做之后,您将看到以下错误消息:

拒绝执行内联脚本,因为它违反了以下内容安全策略指令:“script-src‘Self’chrom-扩展名:”。

这说明您的代码无法工作,因为它违反了默认的CSP:内联JavaScript不会被执行..要解决这个问题,您必须从HTML文件中删除所有内联JavaScript,并将其放入单独的JS文件中。

结果如下:

hello.html(弹出页)、

<!DOCTYPE html><html><head></head><body><p id="demo">=a</p><button type="button" id="do-count">Count</button><script src="popup.js">
</script></body></html>

popup.js

var a=0;function count() {
    a++;
    document.getElementById('demo').textContent = a;}document.getElementById('do-count').onclick = count;

请注意,我已经替换了innerHTML带着textContent..学会使用textContent而不是innerHTML当您打算更改文本时。在这个简单的例子中,它并不重要,但在更复杂的应用程序中,它可能会以XSS的形式成为一个安全问题。


查看完整回答
反对 回复 2019-06-20
  • 2 回答
  • 0 关注
  • 1342 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信