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

Posted 2023-02-22

技术标签:

【中文标题】Chrome 扩展弹出窗口不起作用，未处理点击事件【英文标题】：The Chrome extension popup is not working, click events are not handled 【发布时间】：2013-07-10 05:04:04 【问题描述】：

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

【问题讨论】：

你错过了开头<script type="text/javascript"> @TimothyOnggowasito 那也是。（我的回答） @Neal 将其添加到您的答案中，以便更明显:) @timothyonggowasito 在我点击扩展程序时仍然遇到同样的问题，它显示 =a 和计数按钮，当我点击计数按钮时它保持不变 @TimothyOnggowasito 花式时间：jsfiddle.net/maniator/ck5Yz/7 ^_^ 【参考方案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 形式的安全问题。

【讨论】：

+1 用于创意图形 GIF :) 你得教我如何制作这些。 @BenjaminGruenbaum 它是使用 byzanz 创建的，我编写了 shell 脚本以方便使用：askubuntu.com/a/201018/45058 @skaz 当弹出窗口关闭时，页面被卸载。如果要保存状态，请将数据存储在某处，例如在chrome.storage 或后台页面中。 @skaz 摆脱<form>。现在，当您按下按钮时，会提交一个表单，导致页面重新加载。或添加document.forms[0].onsubmit = function(e)e.preventDefault();; 这是我在 S/O 上见过的最高质量的答案之一，我在这里已经 6 年了【参考方案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/

【讨论】：

如果我将其更改为计数，如果我是对的，它不会将其识别为函数 count() @sainath 具有递增和递减函数：jsfiddle.net/maniator/ck5Yz/7 我的 chrome 扩展现在仍然只显示计数，无论我点击多少它仍然只有一个值我已经更改了代码，当我将它作为 html 文件运行时它可以工作，但是当我将它加载到 chrome 扩展程序时，当我点击它时，这里是清单 "name":"Facebook" , "version":"1.0", "description":"我的 Facebook 个人资料", "manifest_version":2, "browser_action": "default_icon":"google-plus-red-128.png", "default_popup": “你好.html”

以上是关于Chrome 扩展弹出窗口不起作用，未处理点击事件的主要内容，如果未能解决你的问题，请参考以下文章

弹出窗口内的按钮不会触发弹出窗口外的点击事件

window.open 在 Chrome 中不起作用

自定义 chrome 扩展不启动设备列表

如何缩小 chrome 扩展的弹出窗口

如何展开我的 Chrome 扩展程序的弹出窗口

弹出窗口未正确显示

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

hello.html（弹出页面）

popup.js

`hello.html`（弹出页面）

`popup.js`