如何将background.js中的URL传递到popup.js？getSelected已废弃

Chrome扩展Manifest V3版本下有两种常用的实现方式：

方案1：使用chrome.storage.local共享存储 #

这种方式适合需要跨场景持久化保存当前标签页URL、popup随时打开都能拿到最新值的场景。

第一步：修改background.js代码，将获取到的URL存入存储 #

// 原有监听逻辑不变，增加存储逻辑
chrome.action.onClicked.addListener((tab: chrome.tabs.Tab) => {
  const urlTab: string = tab.url as string;
  console.log(urlTab)
  // 存入本地存储
  chrome.storage.local.set({ currentTabUrl: urlTab })
});

chrome.tabs.onActivated.addListener((activeInfo: chrome.tabs.TabActiveInfo) => {
  const tabId: number = activeInfo.tabId;
  chrome.tabs.get(tabId, (tab: chrome.tabs.Tab) => {
    const urlTab: string = tab.url as string;
    console.log(urlTab)
    // 存入本地存储
    chrome.storage.local.set({ currentTabUrl: urlTab })
  });
});

第二步：popup.js中读取存储值 #

如果只需要popup打开时读取一次：

chrome.storage.local.get('currentTabUrl', (res) => {
  const currentUrl = res.currentTabUrl || ''
  console.log('从background拿到的URL：', currentUrl)
  // 后续业务逻辑
})

如果需要popup打开期间实时监听URL变化：

// 先读一次最新值
chrome.storage.local.get('currentTabUrl', (res) => {
  console.log('当前URL：', res.currentTabUrl || '')
})
// 监听存储变化实时更新
chrome.storage.onChanged.addListener((changes, area) => {
  if (area === 'local' && changes.currentTabUrl) {
    const newUrl = changes.currentTabUrl.newValue
    console.log('URL更新为：', newUrl)
  }
})

注意配置manifest.json权限 #

需要在permissions字段中添加storage权限：

{
  "permissions": ["tabs", "storage"]
}

方案2：运行时消息传递 #

这种方式不需要额外申请存储权限，适合popup打开时主动向background拉取一次最新URL的场景。

第一步：background.js增加消息监听 #

// 先把urlTab提升为全局变量保存最新值
let latestTabUrl = ''
// 原有监听逻辑更新全局变量
chrome.action.onClicked.addListener((tab: chrome.tabs.Tab) => {
  latestTabUrl = tab.url as string;
  console.log(latestTabUrl)
});

chrome.tabs.onActivated.addListener((activeInfo: chrome.tabs.TabActiveInfo) => {
  const tabId: number = activeInfo.tabId;
  chrome.tabs.get(tabId, (tab: chrome.tabs.Tab) => {
    latestTabUrl = tab.url as string;
    console.log(latestTabUrl)
  });
});

// 新增消息监听，响应popup的请求
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'getCurrentTabUrl') {
    sendResponse({ url: latestTabUrl })
  }
})

第二步：popup.js主动发消息请求 #

chrome.runtime.sendMessage({ type: 'getCurrentTabUrl' }, (res) => {
  const currentUrl = res?.url || ''
  console.log('拿到的当前URL：', currentUrl)
})

额外注意事项 #

如果你在manifest.json中配置了action.default_popup，那么chrome.action.onClicked监听会失效，此时点击扩展图标会直接打开popup，不会触发background的对应监听逻辑。这种情况更推荐直接在popup中调用chrome.tabs.query获取当前激活标签页的URL，不需要经过background中转：

// popup.js直接获取，不需要background配合
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  const currentUrl = tabs[0]?.url || ''
  console.log(currentUrl)
})

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