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

IT技术 javascript google-chrome button google-chrome-extension content-security-policy
2021-02-08 17:59:00

我创建了一个 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 的值，并在每次单击扩展程序或按钮时将其增加 1

扩展的图片

2个回答

您的代码无法正常工作，因为它违反了默认的内容安全策略。我创建了一个一分钟的截屏视频来显示问题所在：

截屏

首先，我已经展示了如何调试问题。右键单击您的弹出按钮，然后单击“检查弹出窗口”。执行此操作后，您将看到以下错误消息：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self' chrome-extension-resource:”。

这说明您的代码不起作用，因为它违反了默认的 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 的形式成为安全问题。

@skaz 摆脱<form>. 现在，当您按下按钮时，将提交一个表单，从而导致页面重新加载。或添加document.forms[0].onsubmit = function(e){e.preventDefault();};
2021-03-14 17:59:00
+1 用于创意图形 GIF :) 有时间你必须教我如何制作这些。
2021-03-19 17:59:00
@skaz 当弹出窗口关闭时，页面被卸载。如果您想保存状态，请将数据存储在某处，例如在chrome.storage后台页面中或在后台页面中。
2021-03-25 17:59:00
这是我在 S/O 上见过的最高质量的答案之一，我在这里已经 6 年了
2021-03-29 17:59:00
@BenjaminGruenbaum 它是使用 byzanz 创建的，我编写了 shell 脚本来简化使用：askubuntu.com/a/201018/45058
2021-04-04 17:59:00

改变你的onclick：

onclick="count"

或者将您的计数功能更改为这样的：

function count()
{

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

}

这是我放在一起的一个很好的演示：

代码（这假设您添加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;
        }
    }
}

演示：http : //jsfiddle.net/maniator/ck5Yz/

如果我将其更改为计数，如果我是对的，它将不会将其识别为函数 count()
2021-03-11 17:59:00
仍然我的 chrome 扩展现在只显示计数，无论我点击多少，它仍然只有一个值
2021-03-11 17:59:00
<!DOCTYPE html> <html> <head> <script> window.onload = function () { var button = document.getElementById("the_button"); button.onclick = count(); 函数计数（）{ var a = 0; var demo = document.getElementById("demo"); 返回函数 () { demo.innerHTML = ++a; } } } </script> </head> <body> <p id="demo">0</p> <button type="button" id="the_button">计数</button> </body> < /html>
2021-03-14 17:59:00
我已经更改了代码，当我将它作为 html 文件运行时它可以工作，但是当我将它加载到 chrome 扩展时，当我点击它时，这里是清单 { "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" } }
2021-03-24 17:59:00
@sainath 带有递增和递减函数：jsfiddle.net/maniator/ck5Yz/7
2021-04-07 17:59:00
其它你可能感兴趣的问题
上一篇为什么两个相同的对象不相等？ 下一篇JavaScript 函数表达式前的加号