如何在后台脚本中查询当前活动选项卡的URL

Question

我最近开始编写一个隐私扩展，它要求我创建一个活动域列表来为每个域运行后台任务。我是编写浏览器扩展的新手，但我的想法是在

browser.tabs.query

事件监听器中使用

chrome.tabs.onActivated

查询活动选项卡。

let activeTabDomain
const getActiveTabDomain = tabs => {
  activeTabDomain = tabs[0].url
}

const onError = _ => {
  activeTabDomain = "none"
}

chrome.tabs.onActivated.addListener(activeInfo => {
  browser.tabs.query({active: true, currentWindow: true}).then(getActiveTabDomain, onError)
  if (activeTabDomain) {
    const match = activeTabDomain.match(/^(?:https?:\/\/)?(?:www\.)?([^/#]+)/)
    if (match) activeTabDomain = match[1]
    console.log(`domain: ${activeTabDomain}`)
  }                                                                                 
})  

但是，当我在后台脚本中运行此代码时，我得到的结果始终是打印的前一个活动域。我对事件监听器做错了什么吗？

Answer 1

我也有同样的问题。您似乎混合使用了

chrome

和

browser

命名空间，这可能会导致问题。要使用的正确命名空间取决于您为其开发扩展的浏览器。

如果您正在为 Chrome 进行开发，请使用

chrome

命名空间：

chrome.tabs.onActivated.addListener(activeInfo => {
  chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
    const activeTabDomain = tabs[0].url;
    
    const match = activeTabDomain.match(/^(?:https?:\/\/)?(?:www\.)?([^/#]+)/);
    const domain = match ? match[1] : "none";
    
    console.log(`domain: ${domain}`);
  });
});

如果您正在为 Firefox 进行开发，请使用

browser

命名空间：

browser.tabs.onActivated.addListener(activeInfo => {
  browser.tabs.query({ active: true, currentWindow: true }).then(tabs => {
    const activeTabDomain = tabs[0].url;
    
    const match = activeTabDomain.match(/^(?:https?:\/\/)?(?:www\.)?([^/#]+)/);
    const domain = match ? match[1] : "none";
    
    console.log(`domain: ${domain}`);
  });
});

确保您在整个扩展代码中一致地使用正确的命名空间。混合它们可能会导致意想不到的行为。

另外，请注意，

chrome.tabs.query

函数是异步的，因此您需要将域处理逻辑移至回调内部或使用 Promise 来处理结果。

为您的目标浏览器选择适当的命名空间并相应地更新您的代码。如果您仍然遇到问题，请告诉我：）