Chrome扩展程序popup式窗口不起作用，点击事件无法处理
我已经创build了一个JavaScriptvariables，当我点击button应该增加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的值，并在每次单击扩展名或button时将其加1
您的代码不起作用，因为它违反了默认的内容安全政策 。 我创build了一分钟的屏幕录像，以显示出错的地方：
首先，我已经展示了如何debugging问题。 右键单击您的popup式button，然后单击“检查popup式窗口” 。 完成之后，您将看到以下错误消息：
拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src”self'chrome-extension-resource：“。
这说明你的代码不工作，因为它违反了默认的CSP： Inline JavaScript不会被执行 。 为了解决这个问题，你必须从你的HTML文件中删除所有的内嵌JavaScript，并把它放在一个单独的JS文件中。
结果如下所示：
hello.html （popup页面）
<!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;
请注意，我已经用textContentreplace了innerHTML 。 学习在打算更改文本时使用textContent而不是innerHTML 。 在这个简单的例子中，这并不重要，但在更复杂的应用程序中，它可能成为XSSforms的安全问题。
改变你的onclick ：
onclick="count"
或者改变你的计数function，如下所示：
function count() { var demo = document.getElementById("demo"); return function() { demo.innerHTML = ++a; } }
这是一个很好的演示，我放在一起：
代码（这个假设你添加id="the_button"到你的button）：
window.onload = function () { var button = document.getElementById("the_button"); button.onclick = count(); function count() { var a = 0; var demo = document.getElementById("demo"); return function () { demo.innerHTML = ++a; } } }
演示： http : //jsfiddle.net/maniator/ck5Yz/
