Chrome扩展中content_script.js获取激活标签页URL报错如何解决？

1. 直接调用tabs[0].url报错：全局环境下不存在内置的tabs变量，因此触发未定义引用错误。
2. 调用chrome.tabs.query报错：chrome.tabs 属于扩展专属API，仅可在扩展的后台服务工作者、弹窗页、设置页等扩展自身上下文中调用。content script运行在网页的隔离执行上下文，默认无权限访问该API，因此chrome.tabs为undefined。

你注入的content script本身就运行在当前匹配的目标标签页内，完全不需要调用tabs API，直接读取页面上下文的location对象即可获取当前页面URL：

// 直接在content-script.js中使用即可
const currentTabUrl = window.location.href;
// 若仅需要基础路径，可按需取location的对应属性
const baseUrl = `${window.location.origin}${window.location.pathname}`;

如果业务需要访问其他标签页信息，必须通过扩展消息通信实现：

1. 先在manifest.json中声明tabs权限：

"permissions": ["tabs"]

2. 在后台服务工作者中监听消息并返回查询结果：

// service-worker.js 代码
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.action === 'queryActiveTabUrl') {
    chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
      sendResponse({url: tabs[0].url});
    });
    // 异步响应必须返回true，告知消息通道保持开启
    return true;
  }
});

3. 在content script中发送消息获取结果：

// content-script.js 代码
async function getActiveTabUrl() {
  const result = await chrome.runtime.sendMessage({action: 'queryActiveTabUrl'});
  return result.url;
}

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