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

Question

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

扩展的图片

Answer 1

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 .这说明您的代码不起作用，因为它违反了默认的 CSP：内联 JavaScript 不会被执行。 To solve the problem, you have to remove all inline JavaScript from your HTML file, and put it in a separate JS file.要解决此问题，您必须从 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`

var a=0;
function count() {
    a++;
    document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;

Note that I've replaced innerHTML with textContent .请注意，我已将innerHTML替换为textContent 。 Learn to use textContent instead of innerHTML when you intend to change the text.当您打算更改文本时，学习使用textContent而不是innerHTML 。 In this simple example it does not matter, but in more complex applications, it might become a security issue in the form of XSS.在这个简单的例子中没有关系，但在更复杂的应用程序中，它可能会以 XSS 的形式成为安全问题。

Answer 2

Change your onclick :更改您的onclick ：

onclick="count"

Or change 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;
        }
    }
}

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

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

问题描述

2 个解决方案

解决方案1
146 已采纳 2013-07-12 10:36:22

`hello.html` (popup page) `hello.html` （弹出页面）

`popup.js`

解决方案2
-1 2013-07-11 19:20:45

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

问题描述

2 个解决方案

解决方案1 146 已采纳 2013-07-12 10:36:22

hello.html (popup page) hello.html （弹出页面）

popup.js

解决方案2 -1 2013-07-11 19:20:45

解决方案1
146 已采纳 2013-07-12 10:36:22

`hello.html` (popup page) `hello.html` （弹出页面）

`popup.js`

解决方案2
-1 2013-07-11 19:20:45