Question

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

picture of the extension

Answer 1

您的代码无效，因为它违反了默认Content Security Policy。我创建了一分钟的截屏视频，以显示错误：

首先，我展示了如何调试问题。右键单击弹出按钮，然后单击"Inspect popup"。执行此操作后，您将看到以下错误消息：

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

这说明您的代码无效，因为它违反了默认的CSP：Inline JavaScript will not be executed。要解决此问题，您必须从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形式的安全问题。

Answer 2

更改您的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/

Chrome扩展弹出窗口无效，点击事件无法处理

2 个答案:

`hello.html`（弹出页面）

`popup.js`

Chrome扩展弹出窗口无效，点击事件无法处理

2 个答案:

hello.html（弹出页面）

popup.js

`hello.html`（弹出页面）

`popup.js`