如何为浏览器扩展Popup传递不同参数以实现差异化启动？

直接在manifest.json的default_popup中添加查询参数（比如main.html?something=true）是不可行的，Chrome扩展的Manifest配置不允许在popup路径中包含查询参数。但可以通过以下两种方式实现传递参数、让Popup执行不同操作的需求：

方法一：动态设置Popup的URL（Manifest V2/V3通用逻辑，API略有差异） #

Manifest V2 实现 #

1. 移除manifest.json中browser_action里的default_popup配置（如果有），这样点击图标时会触发browserAction.onClicked事件。
2. 在后台脚本（比如background.js）中监听点击事件，动态生成带参数的Popup URL并设置：

chrome.browserAction.onClicked.addListener(() => {
  // 根据业务逻辑生成不同参数的URL
  const targetParams = 'something=true'; // 可根据条件动态修改参数
  const popupUrl = chrome.runtime.getURL(`main.html?${targetParams}`);
  
  // 设置Popup URL
  chrome.browserAction.setPopup({ popup: popupUrl }, () => {
    // 由于V2没有直接打开Popup的API，需要用户再次点击图标打开带参数的Popup
    // 如果想避免二次点击，可以改用方法二，或者打开新窗口替代Popup
  });
});

Manifest V3 实现 #

V3中browser_action改为action，且新增了action.openPopup() API，可以设置后立即打开：

1. 移除manifest.json中action里的default_popup配置。
2. 在后台服务工作者（service-worker.js）中监听点击事件：

chrome.action.onClicked.addListener(async () => {
  const targetParams = 'something=true';
  const popupUrl = chrome.runtime.getURL(`main.html?${targetParams}`);
  
  await chrome.action.setPopup({ popup: popupUrl });
  // 立即打开设置好的带参数Popup
  await chrome.action.openPopup();
});

方法二：通过扩展内部通信传递参数（推荐，更灵活） #

这种方法不需要修改Popup的URL，而是在Popup加载时从后台或扩展存储中获取参数，更符合Chrome扩展的开发规范：

1. 保留manifest.json中的default_popup配置（main.html）。
2. 在后台脚本中存储或准备好需要传递的参数：

// 示例：根据不同场景存储参数（比如监听快捷键、右键菜单等事件时设置）
chrome.storage.local.set({ popupParams: { something: true } });

3. 在main.html对应的JS文件（比如popup.js）中，加载时获取参数：

document.addEventListener('DOMContentLoaded', async () => {
  const result = await chrome.storage.local.get('popupParams');
  const params = result.popupParams;
  
  if (params?.something) {
    // 执行对应的操作
    console.log('执行带参数的逻辑');
  } else {
    // 执行默认逻辑
    console.log('执行默认逻辑');
  }
  
  // 用完可以清除存储的参数，避免影响下次打开
  await chrome.storage.local.remove('popupParams');
});

这种方法的优势在于：不需要处理动态设置Popup的二次点击问题，参数传递更灵活，还能传递复杂的对象类型（而URL参数只能传递字符串）。

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