Chrome扩展Manifest V3获取当前标签页URL遇query未定义报错

报错原因 #

你遇到的Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'query')，核心原因是Manifest V3的Service Worker（background.js）中直接顶层调用chrome.tabs.query的时机不对：

• Service Worker是事件驱动的临时上下文，脚本加载时chrome.tabs模块可能未完成初始化；
• activeTab权限需要用户交互（比如点击扩展图标）才能激活，无交互时后台脚本无法访问tabsAPI。

另外你的代码还有逻辑错误：已经用const [tab] = await chrome.tabs.query(...)解构出了第一个标签对象，后续却用tab[0].url，这会导致额外的undefined报错。

分场景修复方案 #

方案1：弹窗中获取URL（最常用） #

把代码移到popup.js，弹窗打开时自动拥有activeTab权限，无需额外配置：

// popup.js
async function getTabUrl() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  return tab.url;
}

// 弹窗加载完成后执行
document.addEventListener('DOMContentLoaded', async () => {
  const currentUrl = await getTabUrl();
  console.log(currentUrl);
});

方案2：后台通过用户交互触发获取 #

如果必须在后台处理，需要绑定用户交互事件（比如点击扩展图标），注意设置了default_popup的话，action.onClicked不会触发，需移除default_popup或改用其他触发方式：

// background.js
chrome.action.onClicked.addListener(async (tab) => {
  // 回调参数tab直接包含当前激活标签的信息，无需调用query
  console.log(tab.url);
});

方案3：内容脚本中获取URL #

如果是要获取当前页面的URL，content.js可以直接访问页面上下文，无需调用扩展API：

// content.js
console.log(window.location.href);

权限配置补充 #

• 保持manifest.json中的"activeTab"权限即可满足弹窗/交互触发的场景；
• 如果需要无交互随时获取标签URL，可将权限改为"tabs"（但会扩大权限申请范围，不推荐除非必要）。

内容的提问来源于stack exchange，提问作者engineer-x