扩展弹出窗口单击事件失败：解决内容安全策略违规问题

错误说明

在 Chrome 扩展程序中，扩展程序图标和扩展程序图标上的单击事件弹出页面中的按钮不会生成递增 JavaScript 变量的预期响应。

检查根原因

要调试问题，请检查弹出页面并检查控制台日志。该错误消息可能表明内容安全策略 (CSP) 违规：

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

CSP 合规性受损

HTML 页面中的内联脚本违反了默认 CSP。此政策不允许内联 JavaScript。

解决方案：隔离 JavaScript

要解决此问题，请从 HTML 文件中删除所有内联 JavaScript，并将其放在单独的 JavaScript 文件中。

修改代码结构

hello.html（弹出页)

popup.js

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

注释

• 更改文本时将innerHTML替换为textContent以减轻潜在的XSS漏洞。
• 该解决方案确保符合 CSP，实现正确的脚本执行和点击事件处理。