javascript Chrome 扩展弹出窗口不起作用，未处理单击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17601615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The Chrome extension popup is not working, click events are not handled
提问by Sainath
I have created a JavaScript variable and when I click on the button it should increment by 1, but its not happening.
我创建了一个 JavaScript 变量，当我点击按钮时，它应该增加 1，但它没有发生。
Here's manifest.json.
这是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"
}
}
Here is the code for the html page
这是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>
I want the extension to show me the value of a and increment it by one each time I click on the extension or the button
我希望扩展程序向我显示 a 的值，并在每次单击扩展程序或按钮时将其增加 1
回答by Rob W
Your code is not working because it violates the default Content Security Policy. I've created a screencast of one minute to show what's wrong:
您的代码无法正常工作，因为它违反了默认的内容安全策略。我创建了一个一分钟的截屏视频来显示问题所在：
First, I've shown how to debug the problem. Right-click on your popup button, and click on "Inspect popup". After doing that, you will see the following error message:
首先，我已经展示了如何调试问题。右键单击您的弹出按钮，然后单击“检查弹出窗口”。执行此操作后，您将看到以下错误消息：
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self' chrome-extension-resource:”。
This explains that your code is not working, because it violates the default CSP: Inline JavaScript will not be executed. To solve the problem, you have to remove all inline JavaScript from your HTML file, and put it in a separate JS file.
这说明您的代码不起作用，因为它违反了默认的 CSP：内联 JavaScript 不会被执行。要解决此问题，您必须从 HTML 文件中删除所有内联 JavaScript，并将其放入单独的 JS 文件中。
The result is shown below:
结果如下所示：
hello.html(popup page)
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
popup.js
var a=0;
function count() {
a++;
document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;Note that I've replaced innerHTMLwith textContent. Learn to use textContentinstead of innerHTMLwhen you intend to change the text. In this simple example it does not matter, but in more complex applications, it might become a security issue in the form of XSS.
请注意，我已替换innerHTML为textContent. 当您打算更改文本时，学习使用textContent而不是innerHTML。在这个简单的例子中没有关系，但在更复杂的应用程序中，它可能会以 XSS 的形式成为安全问题。
回答by Naftali aka Neal
Change your onclick:
改变你的onclick：
onclick="count"
Orchange your count function to something like this:
或者将您的计数功能更改为这样的：
function count()
{
var demo = document.getElementById("demo");
return function() {
demo.innerHTML = ++a;
}
}
Here is a nice demo I put together:
这是我放在一起的一个很好的演示：
Code (this assumes that you add id="the_button"to your button):
代码（这假设您添加id="the_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;
}
}
}
