Chrome 扩展禁止内联脚本和 javascript: 协议，必须将 JavaScript 移至外部文件并通过 引入，同时确保 DOM 加载完成后再绑定事件。本文详解正确实现方式及常见陷阱规避方法。
chrome 扩展禁止内联脚本和 javascript: 协议，必须将 javascript 移至外部文件并通过 <script src> 引入，同时确保 dom 加载完成后再绑定事件。本文详解正确实现方式及常见陷阱规避方法。</script>
在 Chrome 扩展开发中，出于内容安全策略（CSP）限制，所有内联脚本（包括 <script>...</script> 块、onclick="..." 属性、href="javascript:void(0)" 等）均被严格禁止。你遇到的“无法使用 inline JS”和“Cannot read property 'addEventListener' of null”错误，本质是两个典型问题叠加所致：
- DOM 元素尚未加载完成：脚本在 HTML 解析前执行，document.getElementById(...) 返回 null；
- 脚本未按 CSP 要求外置：直接写在 HTML 中或通过 javascript: 触发，违反扩展安全规范。
✅ 正确做法分三步：
1. 创建独立的外部 JS 文件
新建 overlay_nav.js（与 popup.html 同级目录），内容如下：
// overlay_nav.js
// 确保 DOM 完全加载后再执行
document.addEventListener('DOMContentLoaded', function () {
const menuIcon = document.getElementById('menuIcon');
const navigation = document.getElementById('Navigation');
const closeBtn = document.getElementById('closebtn');
// 防御性检查：避免元素不存在时报错
if (!menuIcon || !navigation || !closeBtn) {
console.warn('Required DOM elements not found. Check HTML structure and file paths.');
return;
}
menuIcon.addEventListener('click', function () {
navigation.style.width = '100%';
});
closeBtn.addEventListener('click', function () {
navigation.style.width = '0%';
});
});? 提示：DOMContentLoaded 是关键——它确保脚本仅在 HTML 解析完毕、DOM 树构建完成时运行，彻底规避 null 引用问题。
2. 在 HTML 中正确引入脚本
修改你的 popup.html（或其他目标页面），将 <script> 标签置于 </script>
