Javascript Chrome扩展弹出窗口不工作，未处理单击事件_Javascript_Google Chrome_Button_Google Chrome Extension_Content Security Policy

Javascript Chrome扩展弹出窗口不工作，未处理单击事件

javascript google-chrome button google-chrome-extension

Javascript Chrome扩展弹出窗口不工作，未处理单击事件,javascript,google-chrome,button,google-chrome-extension,content-security-policy,Javascript,Google Chrome,Button,Google Chrome Extension,Content Security Policy,我已经创建了一个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

我已经创建了一个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>


var a=0；
函数计数（）
{
a++；
document.getElementById（“demo”）.innerHTML=a；
返回a；
}
=a
计数

我希望扩展名显示a的值，并在每次单击扩展名或按钮时将其递增1

再次单击更改您的

：
onclick="count"

或将计数函数更改为以下内容：
function count()
{

    var demo = document.getElementById("demo");
    return function() {
        demo.innerHTML = ++a;
    }

}


下面是我制作的一个很好的演示：
代码（假设您将id=“the_按钮”添加到按钮）：
演示：
您的代码不工作，因为它违反了默认设置。我制作了一个一分钟的屏幕放映，以显示问题所在：

首先，我展示了如何调试这个问题。右键单击弹出按钮，然后单击。执行此操作后，您将看到以下错误消息：
拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script src'self'chrome extension resource:”
这说明您的代码无法工作，因为它违反了默认CSP:。要解决这个问题，必须从HTML文件中删除所有内联JavaScript，并将其放在单独的JS文件中
结果如下所示：
hello.html（弹出页面）

=a
计数

popup.js
var a=0；
函数计数（）{
a++；
document.getElementById（'demo'）.textContent=a；
}
document.getElementById（'do-count'）。onclick=count
请注意，我已将innerHTML
替换为textContent
。当您打算更改文本时，请学习使用textContent
而不是innerHTML
。在这个简单的示例中，这并不重要，但在更复杂的应用程序中，它可能会以XSS的形式成为一个安全问题。
您也错过了开头的
@TimothyOnggowasito。（使用我的答案）@Neal将其添加到您的答案中，以便更直观：）@timothyonggowasito仍然存在相同的问题，当我单击分机时，它显示我=a和计数按钮，当我单击计数按钮时，它保持不变same@TimothyOnggowasito花式时间：^ ^如果我将其更改为count，它将不会将其识别为函数count（）如果我是right@sainath使用递增和递减功能：我的chrome扩展现在仍然只显示count，无论我点击多少次，它仍然只有一个值。我已经更改了代码，当我将其作为html文件运行时，它可以工作，但当我将其加载到chrome扩展，当我点击它时，这里是清单{“name”：“Facebook”，“版本”：“1.0”，“描述”：“我的Facebook个人资料”，“清单版本”：“浏览器操作”：{“默认图标”：“google-plus-red-128.png”，“默认弹出窗口”：“hello.html”}}}}}window.onload=function（）{var button=document.getElementById”（“按钮”）；button.onclick=count（）；function count（）{var a=0；var demo=document.getElementById（“demo”）；返回函数（）{demo.innerHTML=++a；}}}}0
Count+1用于创造性图形GIF:）你得教我什么时候做这些。@BenjaminGruenbaum它是用拜占庭创建的，我编写了shell脚本来简化使用：@skaz当弹出窗口关闭时，页面被卸载。如果你想保存状态，请将数据存储在某处，例如在chrome.storage
或后台page.@skaz去掉
。现在，当你按下按钮时，表单被提交，导致页面重新加载。或者添加文档。表单[0]。onsubmit=function（e）{e.preventDefault（）；}；这是我在S/O上见过的质量最高的答案之一，我在这里已经6年了
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;
        }
    }
}