猿问

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的值，并在每次单击扩展名或按钮时将其递增一次。


月关宝盒
浏览 1415回答 2
2回答

哔哔one

您的代码无法工作，因为它违反了默认设置。内容安全策略..我制作了一个一分钟的屏幕来说明出了什么问题：首先，我演示了如何调试问题。右键单击弹出按钮，然后单击“检查弹出”..这样做之后，您将看到以下错误消息：拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src‘Self’chrom-扩展名：”。这说明您的代码无法工作，因为它违反了默认的CSP：内联JavaScript不会被执行..要解决这个问题，您必须从HTML文件中删除所有内联JavaScript，并将其放入单独的JS文件中。结果如下：hello.html(弹出页)、<!DOCTYPE&nbsp;html><html><head></head><body><p&nbsp;id="demo">=a</p><button&nbsp;type="button"&nbsp;id="do-count">Count</button><script&nbsp;src="popup.js"> </script></body></html>popup.jsvar&nbsp;a=0;function&nbsp;count()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;a++; &nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('demo').textContent&nbsp;=&nbsp;a;}document.getElementById('do-count').onclick&nbsp;=&nbsp;count;请注意，我已经替换了innerHTML带着textContent..学会使用textContent而不是innerHTML当您打算更改文本时。在这个简单的例子中，它并不重要，但在更复杂的应用程序中，它可能会以XSS的形式成为一个安全问题。
0
随时随地看视频慕课网APP

相关分类

JavaScript
算法与数据结构
数据结构中，与所使用的计算机无关的数据是什么？ 1 回答
学完C语言之后是先学数据结构还是先学JAVA好呢？ 1 回答
我要回答