如何在chrome.tabs.sendMessage的回调中传递当前tab.id

我需要把发起消息的tab.id传递给chrome.tabs.sendMessage的回调函数，这样就能在回调内的其他函数里用到对应标签页的ID和URL。

已知回调参数由contentScript发送，本来可以让contentScript传递标签页信息，但这种方式只在连接由标签页（含内容脚本）发起时才有效。而我的场景是从popup.js发起连接，所以没法直接在回调里拿到tab.id。

初始尝试代码 #

// popup.js
chrome.tabs.query({ active: true, lastFocusedWindow: true }, function (tabs) {
  chrome.tabs.sendMessage(
    tabs[0].id,
    { from: 'popup', subject: 'testCallback' },
    callbackFunction
  );
});

const callbackFunction= info => {
   console.log(info.tab.id);
   console.log(info.tab.url);
};

当前解决方案 #

我现在的做法是在回调里再次查询标签页来获取当前标签页，但想知道有没有不用额外查询的实现方式：

// popup.js
chrome.tabs.query({ active: true, lastFocusedWindow: true }, function (tabs) {

  chrome.tabs.sendMessage(
    tabs[0].id,
    { from: 'popup', subject: 'testCallback' },
    callbackFunction
  );
});

const callbackFunction = info => {
   chrome.tabs.query({ active: true, currentWindow: true }, function (activeTabs) {
      console.log(activeTabs[0].id);
      console.log(activeTabs[0].url);
   });
};

无需额外查询的优化方案 #

可以利用闭包直接保留发起请求时的标签页信息，避免重复查询：

方案1：直接在回调内使用闭包 #

// popup.js
chrome.tabs.query({ active: true, lastFocusedWindow: true }, function (tabs) {
  const targetTab = tabs[0];
  chrome.tabs.sendMessage(
    targetTab.id,
    { from: 'popup', subject: 'testCallback' },
    function(info) {
      console.log(targetTab.id);
      console.log(targetTab.url);
      // 可直接将标签页信息传入其他函数
      handleCallbackResult(info, targetTab);
    }
  );
});

const handleCallbackResult = (info, tab) => {
  console.log(`标签页ID：${tab.id}，URL：${tab.url}`);
  // 执行其他业务逻辑
};

方案2：通过函数绑定传递标签页信息 #

如果需要保留独立的回调函数，可以用bind将标签页信息作为参数绑定进去：

// popup.js
chrome.tabs.query({ active: true, lastFocusedWindow: true }, function (tabs) {
  const targetTab = tabs[0];
  chrome.tabs.sendMessage(
    targetTab.id,
    { from: 'popup', subject: 'testCallback' },
    callbackFunction.bind(null, targetTab)
  );
});

const callbackFunction = (tab, info) => {
  console.log(tab.id);
  console.log(tab.url);
};

优势说明：

• 避免了额外的chrome.tabs.query调用，提升性能
• 防止用户在消息发送与回调执行之间切换标签页导致的信息错误，确保拿到的是发起请求时的目标标签页信息

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