如何在浏览器扩展的外部弹窗页面中获取当前活动标签页的URL

刚接触浏览器扩展开发遇到这种问题很正常，别担心！你当前的核心问题在于manifest里的default_popup是静态配置项，没办法直接把动态变化的当前标签页URL作为参数传递进去。我们需要换个思路：通过后台脚本监听扩展图标点击事件，先获取当前标签页的URL，再构造带参数的Popup URL并打开它。

下面是具体的步骤和代码示例：

1. 修改你的manifest.json #

首先移除browser_action里的default_popup字段，然后添加后台脚本配置（同时保留已有的tabs权限）：

{
  "browser_action": {
    "browser_style": true,
    "default_title": "Name of addon"
  },
  "icons": {
    "48": "lock.svg",
    "96": "lock.svg"
  },
  "description": "Open given page in window on top of browser I guess...?",
  "manifest_version": 2,
  "name": "Name of addon",
  "version": "1.0.11",
  "permissions": ["tabs"],
  "background": {
    "scripts": ["background.js"]
  },
  "applications": {
    "gecko": {
      "id": "name@testdomain.com"
    }
  }
}

2. 创建background.js脚本 #

在扩展根目录新建这个文件，写入监听点击事件、获取标签页URL并打开带参数Popup的逻辑：

// 监听扩展图标的点击事件
browser.browserAction.onClicked.addListener(async () => {
  // 获取当前窗口的活动标签页
  const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
  
  // 对标签页URL进行编码，避免特殊字符导致参数传递错误
  const encodedUrl = encodeURIComponent(tab.url);
  
  // 构造带参数的Popup目标URL
  const popupUrl = `https://www.testdomain.com/dir/?currentUrl=${encodedUrl}`;
  
  // 打开Popup样式的窗口（可调整width/height匹配你需要的弹窗大小）
  await browser.windows.create({
    url: popupUrl,
    type: "popup",
    width: 400,
    height: 600,
    focused: true
  });
});

关键细节说明 #

• 放弃default_popup的原因：它是编译扩展时就固定的静态配置，无法在运行时动态插入当前标签页的URL。
• encodeURIComponent必须加：标签页URL里可能包含&、?等特殊字符，编码后才能作为URL参数安全传递，避免参数截断或解析错误。
• 弹窗尺寸可自定义：你可以根据原Popup的大小调整windows.create里的width和height参数，保持体验一致。

这样调整后，当你点击扩展图标时，就会自动获取当前标签页的URL，并将其作为currentUrl参数传递给你的外部页面了~

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