Firefox WebExtension：如何向扩展窗口文本框传值并获取活跃标签URL

嘿，我来帮你搞定这两个问题，咱们一步步来解决：

核心思路 #

WebExtension里不同上下文（比如background脚本和扩展窗口页面）之间的通信主要靠runtime消息传递，而获取活跃标签URL则用tabs API，结合这两个就能满足你的需求。

步骤1：修改background.js，处理URL获取和消息发送 #

首先我们要做这几件事：

• 打开扩展窗口时记录它的ID，方便后续定向发送消息
• 获取当前活跃标签的URL
• 监听标签切换/更新事件，实时同步URL到扩展窗口
• 处理扩展窗口主动请求URL的消息

更新后的background.js代码：

let extensionWindowId = null;

// 向扩展窗口发送URL的工具函数
function sendUrlToExtensionWindow(url) {
  if (!extensionWindowId) return;
  // 找到扩展窗口内的标签页
  browser.tabs.query({windowId: extensionWindowId}).then(tabs => {
    if (tabs.length > 0) {
      // 给窗口里的第一个标签页发送消息
      browser.tabs.sendMessage(tabs[0].id, {type: "updateUrl", url: url});
    }
  });
}

// 获取当前活跃标签URL并发送
function getAndSendActiveTabUrl() {
  browser.tabs.query({active: true, currentWindow: true}).then(tabs => {
    if (tabs.length > 0) {
      sendUrlToExtensionWindow(tabs[0].url);
    }
  });
}

function openMyWindow() {
  const createWindowOpts = {
    type: "detached_panel",
    url: "window.html",
    titlePreface: "Extension Window",
    width: 350,
    height: 950
  };
  
  browser.windows.create(createWindowOpts).then(windowData => {
    extensionWindowId = windowData.id;
    // 窗口创建后立即发送当前活跃标签URL
    getAndSendActiveTabUrl();
    
    // 监听窗口关闭，重置ID避免无效发送
    browser.windows.onRemoved.addListener(removedId => {
      if (removedId === extensionWindowId) {
        extensionWindowId = null;
      }
    });
  });
}

// 绑定浏览器按钮点击事件
browser.browserAction.onClicked.addListener(openMyWindow);

// 监听标签切换事件，实时更新URL
browser.tabs.onActivated.addListener(getAndSendActiveTabUrl);

// 监听标签URL更新（比如页面跳转），实时同步
browser.tabs.onUpdated.addListener((tabId, changeInfo) => {
  if (changeInfo.url) {
    getAndSendActiveTabUrl();
  }
});

// 处理扩展窗口主动请求当前URL的消息
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "requestActiveUrl") {
    browser.tabs.query({active: true, currentWindow: true}).then(tabs => {
      sendResponse({url: tabs[0]?.url || ""});
    });
    // 返回true告诉浏览器等待异步的sendResponse
    return true;
  }
});

步骤2：修改window.html，添加脚本处理消息 #

我们需要给扩展窗口页面加一个脚本，用来接收background发来的URL消息，同时页面加载时主动请求一次初始URL：

更新后的window.html：

<html>
  <head>
    <title>Extension Window</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>My Extension Window</h1>
    <p>Active Tab URL: <input id="url" type="text" readonly></p>
    <!-- 引入处理消息的脚本 -->
    <script src="window.js"></script>
  </body>
</html>

步骤3：创建window.js，处理消息和页面更新 #

这个脚本负责监听来自background的消息，更新输入框的值，同时页面加载时主动请求初始URL：

新建window.js文件：

// 监听来自background的URL更新消息
browser.runtime.onMessage.addListener(message => {
  if (message.type === "updateUrl") {
    const urlInput = document.getElementById("url");
    urlInput.value = message.url;
  }
});

// 页面加载完成后主动请求一次当前活跃标签URL
document.addEventListener("DOMContentLoaded", () => {
  browser.runtime.sendMessage({type: "requestActiveUrl"})
    .then(response => {
      document.getElementById("url").value = response.url;
    });
});

关键解释 #

1. 如何传递值到扩展窗口？
   我们用了WebExtension的消息传递API：background通过tabs.sendMessage定向给扩展窗口的标签页发消息，窗口内的脚本通过browser.runtime.onMessage监听消息，收到后更新输入框的值。这种方式是不同上下文通信的标准做法，安全且可靠。

2. 如何获取并传递活跃标签URL？

   • 用browser.tabs.query({active: true, currentWindow: true})获取当前窗口的活跃标签，从中拿到url属性。
   • 监听tabs.onActivated（标签切换）和tabs.onUpdated（标签URL变化）事件，每次事件触发时重新获取URL并发送给扩展窗口，实现实时同步。

这样修改后，你的扩展就能满足需求：点击按钮打开窗口，初始显示当前活跃标签URL，切换或更新标签时自动同步最新URL。

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