Chrome扩展开发：添加覆盖式导航的JavaScript事件监听问题求助

问题根源分析 #

你遇到的事件监听报错，核心原因是JS代码执行时机早于DOM元素加载完成，导致document.getElementById()返回null，无法绑定事件；另外Chrome扩展的内容安全策略（CSP）默认严格禁止内联JS，这也是你最初用内联代码被拦截的原因。

具体修复步骤 #

1. 确保JS在DOM加载完成后执行 #

把事件监听代码包裹在DOMContentLoaded回调里，或者将JS脚本放在HTML的</body>标签之前，保证DOM元素已渲染完成：

修改后的JS代码：

document.addEventListener('DOMContentLoaded', function() {
  // 提前缓存DOM元素，避免重复查询
  const menuIcon = document.getElementById("menuIcon");
  const closeBtn = document.getElementById("closebtn");
  const navigation = document.getElementById("Navigation");

  // 绑定菜单展开事件
  if (menuIcon && navigation) {
    menuIcon.addEventListener("click", function(){
      navigation.style.width = "100%";
    });
  }

  // 绑定菜单收起事件
  if (closeBtn && navigation) {
    closeBtn.addEventListener("click", function(){
      navigation.style.width = "0%";
    });
  }
});

2. 正确配置Chrome扩展Manifest文件 #

Chrome扩展的CSP会限制脚本执行权限，确保manifest.json配置符合规则：

Manifest V3 版本（推荐）

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'none';"
  }
}

Manifest V2 版本（兼容旧版本）

{
  "manifest_version": 2,
  "name": "你的扩展名称",
  "version": "1.0",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "content_security_policy": "script-src 'self'; object-src 'none'"
}

3. 规范引入JS文件 #

将JS代码放在单独的文件（比如nav.js）中，在HTML末尾通过<script>标签引入，禁止使用内联脚本：

<!-- 放在</body>标签前 -->
<script src="nav.js"></script>
</body>

额外优化建议 #

• 给导航栏添加CSS过渡效果，让展开/收起更流畅：

.Overlay {
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #333;
  overflow-x: hidden;
  transition: width 0.3s ease; /* 添加入场退场动画 */
}

• 增加DOM元素存在性判断，避免因元素缺失导致的控制台报错。

内容的提问来源于stack exchange，提问作者YSUF_Z