Chrome/Edge扩展popup.js代码不运行 点击无跳转问题咨询

问题根因与修复方案 #

1. 扩展图标未绑定弹窗资源

你在manifest.json的browser_action配置项中仅声明了default_title，缺少default_popup字段指定弹窗页面路径，点击扩展图标时浏览器不会主动加载你写的popup.html作为弹窗，你看到的popup.html内容是chrome_url_overrides.newtab配置的新标签页重载效果，和扩展图标点击触发的弹窗逻辑完全无关。

如果你的需求是点击扩展图标弹出对应页面，补充browser_action配置即可：

"browser_action": {
    "default_title": "My extension",
    "default_popup": "popup/popup.html"
}

2. 资源路径不匹配

你配置的新标签页指向路径是popup/popup.html，如果popup.js没有存放在popup目录下和popup.html同级，popup.html中引入的src="popup.js"会返回404，导致脚本无法加载执行。

3. 调试方式错误

popup页面（包括作为新标签页加载的popup.html）是独立的JavaScript上下文，日志不会输出到普通网页控制台或者扩展后台脚本控制台：

• 若为弹窗形式的popup，右键点击扩展图标，选择「审查弹出内容」即可打开对应开发者工具查看日志和报错
• 若为作为新标签页加载的popup.html，直接在新标签页打开开发者工具即可看到对应输出

额外优化点

你manifest.json的permissions数组里"*://*.youtube.com/*"后面多了多余的逗号，部分严格的浏览器版本会解析报错，建议删掉。

可选实现方案 #

如果你的需求仅为点击扩展图标就跳转指定站点，不需要弹窗展示内容，可以删掉popup相关代码，在background.js中添加如下逻辑即可，性能开销更低：

chrome.browserAction.onClicked.addListener(() => {
  chrome.tabs.create({
    active: true,
    url: "https://my.site.com/"
  })
})

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