浏览器扩展点击browser_action图标打开background页面重复新建标签问题

• 你将扩展后台常驻页面和点击图标要打开的展示页共用了同一套代码，browser.browserAction.onClicked 是扩展全局事件，每加载一次包含注册逻辑的脚本，就会多绑定一次监听器，点击时会触发所有绑定的回调，一次性打开多个标签
• 额外的逻辑问题：browser.runtime.onStartup 仅在浏览器启动时触发，扩展首次安装、重新加载、重启启用时都不会触发该事件，初始状态下可能出现点击图标无响应的问题

这里提供两种可选方案，按需选择即可：

方案1：拆分页面逻辑（更推荐） #

将后台常驻逻辑和前台展示逻辑拆分，避免监听器被重复注册

1. 新建单独的前台展示页面，比如路径为 pages/panel.html，内容如下：

<html>
  <head>
  </head>
  <body>
    <h1>Content will be added</h1>
    <!-- 不要引入包含监听器注册逻辑的script.js，自有逻辑单独写新的JS文件 -->
  </body>
</html>

2. 修改 background/script.js 代码，移除不必要的onStartup包裹，直接在后台页初始化时注册一次监听器：

browser.browserAction.onClicked.addListener(onClicked);

function onClicked() {
  browser.tabs.create({
    // 打开单独的前台展示页，不要打开后台页本身
    url: "/pages/panel.html"
  });
}

方案2：添加上下文判断（无需拆分文件） #

如果确实需要复用同一个页面作为后台页和展示页，可以增加上下文判断，仅在后台常驻页的环境下注册监听器：
直接修改background/script.js代码即可：

// 仅当前页面是后台常驻页时才注册监听器
if (browser.extension.getBackgroundPage() === window) {
  browser.browserAction.onClicked.addListener(onClicked);
}

function onClicked() {
  browser.tabs.create({
    url: location.href
  });
}

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