Chrome扩展popup.html中JavaScript失效问题求助

问题描述 #

按照Chrome扩展开发文档步骤开发Manifest V3扩展，popup.js完全无响应——即使是简单的console.log也无输出，点击按钮也没有任何反应。扩展结构及各文件代码如下：

扩展目录结构 #

extension
├── images
│   ├── icon-128.png
│   ├── icon-16.png
│   ├── icon-32.png
│   ├── icon-48.png
│   └── icon-64.png
├── manifest.json
├── popup.css
├── popup.html
└── popup.js

各文件代码 #

manifest.json

{
  "manifest_version": 3,
  "name": "My extension",
  "description": "Extension example",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "images/icon-48.png"
  },
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="popup.css">
</head>
<body>
    <div class="cta-wrapper">
        <button id="cta-btn" class="btn">CLICK ME</button>
    </div>
    <script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById('cta-btn').addEventListener('click', function(e) {
    console.log('Click')
})

可能的原因及解决方法 #

• 错误打开控制台
  不要直接按F12打开当前网页的控制台，popup有独立调试环境。正确操作：右键点击扩展图标，选择「检查」，在弹出的开发者工具中查看popup的日志和报错。

• DOM加载时机问题
  若DOM未完全渲染，document.getElementById('cta-btn')可能返回null，导致事件绑定失败。将代码包裹在DOMContentLoaded事件中：

  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('cta-btn').addEventListener('click', function(e) {
      console.log('Click')
    });
    console.log('Popup script loaded');
  });
  

• 扩展未重新加载
  修改代码后需刷新扩展，否则Chrome仍运行旧版本。打开chrome://extensions/，开启「开发者模式」，点击扩展卡片上的「重新加载」按钮。

• 文件路径或拼写错误
  检查popup.html中popup.js的引用路径是否正确，文件名是否拼写错误。可在popup开发者工具的「网络」标签中查看脚本是否加载成功，是否有404错误。

• 内容安全策略（CSP）限制
  Manifest V3默认CSP允许加载本地脚本，但如果手动设置过错误的CSP会导致脚本无法运行。可在manifest中明确添加正确策略：

  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'none';"
  }
  

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