为什么我的 Chrome 扩展程序弹出窗口的点击事件不起作用？

Chrome 扩展程序弹出窗口无法正常工作：点击事件未处理

要解决 Chrome 扩展程序弹出窗口中未处理点击事件的问题，让我们深入探讨原因和解决方案。

问题说明：

当在弹出窗口的 HTML 页面中使用内联 JavaScript 时（例如在提供的代码中），它可能与 Chrome 扩展程序强制执行的默认内容安全策略 (CSP) 冲突。出于安全原因，此策略限制内联脚本的执行。因此，负责处理点击事件的 JavaScript 代码可能无法执行，从而导致按钮不起作用或其他基于点击的交互。

解决方案：

要解决此问题，请按照以下步骤操作：

1. 删除内联 JavaScript：删除任何内容弹出窗口的 HTML 页面中存在内联 JavaScript。
2. 创建单独的 JavaScript 文件： 将处理点击事件和其他功能的 JavaScript 代码放入单独的 JavaScript 文件（例如 popup.js） .
3. 包含 JavaScript 文件： 将 HTML 脚本标记添加到弹出窗口的 HTML 页面以包含外部 JavaScript 文件。

这是更新的代码片段：

hello.html（弹出页）：

...
<button type="button">

popup.js:

var a = 0;

function count() {
  a++;
  document.getElementById('demo').textContent = a;
}

document.getElementById('do-count').onclick = count;

注意：

此外，确保manifest.json文件正确指定弹出的HTML页面并包含相关的权限：

manifest.json：

...
"browser_action": {
  "default_icon": "icon.png",
  "default_popup": "hello.html",
  "permissions": ["activeTab"]
}
...

通过执行以下步骤，您可以确保在 Chrome 扩展程序弹出窗口中正确处理点击事件，同时遵守Chrome CSP 安全最佳实践指南。

以上是为什么我的 Chrome 扩展程序弹出窗口的点击事件不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！