Chrome扩展V3出现chrome.tabs.query未定义报错 谷歌幻灯片分享失效

1. 你将process.js配置为了内容脚本(Content Script)，Chrome扩展的内容脚本运行在网页的隔离执行上下文，仅有权限调用chrome.runtime、chrome.storage等少数扩展API，无法直接访问chrome.tabs系列API，所以代码执行时chrome.tabs为undefined，调用query方法就会抛出对应类型错误。
2. 该未捕获的错误会中断当前内容脚本的后续执行，部分场景下会干扰注入页面的原有JS逻辑执行，因此导致谷歌幻灯片的分享按钮功能异常。

方案1（最适配当前场景，推荐） #

你当前代码的需求是获取当前页面的URL和标题，运行在内容脚本中完全不需要调用chrome.tabsAPI，直接读取页面上下文的原生属性即可，修改process.js代码如下：

let url = window.location.href;
url = url.replace('//', ';;').replace(/[/]/g, ';');
let pageTitle = document.title;
pageTitle = pageTitle.replaceAll("'", '*');
pageTitle = pageTitle.replaceAll('"', '**');
pageTitle = pageTitle.replace('//', '__').replace(/[/_]/g, '_');

方案2（适用于需要调用更多tabs API的场景） #

如果后续逻辑需要调用完整的chrome.tabs能力，可通过内容脚本和后台服务Worker通信实现：

1. 在process.js中发送消息请求数据：

chrome.runtime.sendMessage({action: 'getCurrentTabInfo'}, res => {
    const {url, title} = res;
    // 原有处理逻辑
    url = url.replace('//', ';;').replace(/[/]/g, ';');
    let pageTitle = title;
    pageTitle = pageTitle.replaceAll("'", '*');
    pageTitle = pageTitle.replaceAll('"', '**');
    pageTitle = pageTitle.replace('//', '__').replace(/[/_]/g, '_');
})

2. 在background.js中监听消息并返回数据：

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
    if (msg.action === 'getCurrentTabInfo') {
        chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
            sendResponse({
                url: tabs[0].url,
                title: tabs[0].title
            })
        })
        return true; // 保持消息通道开放等待异步返回
    }
})

修改完成后重新加载扩展，错误就会消失，谷歌幻灯片的分享功能也会恢复正常。

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