Chrome扩展Manifest V3弹出窗口获取活动标签URL为undefined求助

问题说明 #

在Chrome扩展弹出窗口中调用chrome.tabs.query获取当前活跃标签时，返回的tab对象中url字段为undefined，已尝试添加"tabs"和"activeTab"权限但问题未解决。

相关代码 #

获取标签的函数 #

export const getTab = () => {
    return new Promise((res) => {
        chrome.tabs.query({ currentWindow: true, active: true }, (tabs) => {
            console.log('tabs:', tabs);
            res(tabs[0]);
        });
    });
};

返回的tab对象 #

{
    "active": true,
    "audible": false,
    "autoDiscardable": true,
    "discarded": false,
    "groupId": -1,
    "height": 624,
    "highlighted": true,
    "id": 2297,
    "incognito": false,
    "index": 1,
    "mutedInfo": {
        "muted": false
    },
    "openerTabId": 128,
    "pinned": false,
    "selected": true,
    "status": "complete",
    "width": 160,
    "windowId": 1
}

原manifest.json #

{
    "manifest_version": 3,
    "name": "Test",
    "version": "1.0.0",
    "action": {
        "default_title": "Test",
        "default_popup": "popup.html"
    },
    "permissions": ["tabs"],
    "background": {
        "service_worker": "src/background.js",
        "type": "module"
    },
    "content_scripts": [
        {
            "js": ["src/contentScript.js"],
            "matches": ["<all_urls>"],
            "run_at": "document_start",
            "all_frames": true
        }
    ],
}

解决办法 #

原因分析 #

Manifest V3中，"tabs"权限仅允许调用tabsAPI，但获取标签的url、title等敏感信息需要主机权限或activeTab权限的配合。此外，Chrome限制扩展获取chrome://、chrome-extension://等系统/扩展自身页面的URL，这类场景下url字段必然为undefined。

方案1：添加主机权限 #

在manifest.json中新增host_permissions字段，配置需要访问的页面范围，比如允许所有页面：

{
    "manifest_version": 3,
    "name": "Test",
    "version": "1.0.0",
    "action": {
        "default_title": "Test",
        "default_popup": "popup.html"
    },
    "permissions": ["tabs"],
    "host_permissions": ["<all_urls>"],
    "background": {
        "service_worker": "src/background.js",
        "type": "module"
    },
    "content_scripts": [
        {
            "js": ["src/contentScript.js"],
            "matches": ["<all_urls>"],
            "run_at": "document_start",
            "all_frames": true
        }
    ]
}

方案2：使用activeTab权限 #

如果不想申请广泛的主机权限，可改用activeTab权限。当用户点击扩展图标打开弹出窗口时，activeTab会自动授予当前活跃标签的临时权限，此时无需主机权限即可获取该标签的URL：
修改manifest.json的permissions字段：

"permissions": ["activeTab"],

注意事项 #

• 若当前标签是chrome://settings、chrome-extension://等受限页面，无论配置何种权限，url字段都会是undefined，这是Chrome的安全限制。
• 修改manifest.json后，需重新加载扩展才能生效。

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