Chrome扩展中按钮事件触发的常见陷阱
要有效解决按钮事件触发问题，首先需要了解其背后的常见原因。
1. 内容安全策略（CSP）的限制
Chrome扩展为了安全性，默认实施了严格的内容安全策略。这意味着：
- 禁止内联JavaScript：直接在HTML标签中使用 onclick="myFunction()" 这样的属性，或在HTML文件中包含 这样的内联脚本块，通常会被CSP阻止，导致 Refused to execute inline event handler because it violates the following Content Security Policy directive... 错误。
- 禁止使用 eval() 及类似函数：任何可能动态执行字符串代码的函数，如 eval()、new Function() 等，也通常被禁止。
开发者在遇到“CSP violation”错误时，应优先考虑是否违反了这一策略。
2. 事件监听器 addEventListener 的误用
addEventListener 是在JavaScript中绑定事件的推荐方式，但其用法常常被误解：
- 函数引用 vs. 函数调用：当使用 addEventListener('click', myFunc) 时，第二个参数 myFunc 应该是一个函数引用。这意味着你传入的是函数的名称，而不是调用它的结果。如果写成 addEventListener('click', myFunc())，myFunc 会立即执行，并将其返回值（如果函数没有明确返回，则为 undefined）作为事件监听器，这显然不是我们想要的结果。
- 获取DOM元素：document.getElementsByName() 返回的是一个 HTMLCollection (一个类似数组的对象)，而不是单个DOM元素。如果你想绑定事件，需要遍历这个集合，或者更常见的是，使用 document.getElementById() 或 document.querySelector() 来获取单个元素。
3. DOM加载时机与脚本位置
JavaScript代码在尝试操作DOM元素时，必须确保这些元素已经被浏览器加载并解析。
立即学习“前端免费学习笔记（深入）”；
- 如果JavaScript代码在HTML元素之前执行，它将无法找到并操作这些元素。
- 将
