Chrome扩展整页截图报错：TypeError: chrome.tabs.captureTab不是函数

关于Chrome 108对chrome.tabs.captureTab的支持 #

Chrome 108不支持chrome.tabs.captureTab API，这个接口是在Chrome 110版本才正式推出的，所以你在108版本调用它会出现TypeError: chrome.tabs.captureTab is not a function的报错。

实现整页截图的替代方案 #

在Chrome 108中，你可以通过chrome.debugger API发送Page.captureScreenshot命令来实现整页截图，这个方法支持捕获超出视口的内容。

步骤与代码示例 #

1. 首先在扩展的manifest.json中添加必要权限：

{
  "permissions": ["tabs", "downloads", "debugger"]
}

2. 修改你的代码如下：

async function createTab(url) {
    return new Promise(resolve => {
        chrome.tabs.create({url}, tab => resolve(tab));
    });
}

async function captureFullPage(tabId) {
    return new Promise((resolve, reject) => {
        // 附加调试器到目标标签页
        chrome.debugger.attach({tabId: tabId}, "1.3", () => {
            if (chrome.runtime.lastError) {
                reject(chrome.runtime.lastError);
                return;
            }
            // 发送整页截图命令
            chrome.debugger.sendCommand(
                {tabId: tabId},
                "Page.captureScreenshot",
                {captureBeyondViewport: true, format: "png"},
                (result) => {
                    chrome.debugger.detach({tabId: tabId});
                    if (chrome.runtime.lastError) {
                        reject(chrome.runtime.lastError);
                        return;
                    }
                    // 将base64转换为可下载的blob URL
                    const blob = base64ToBlob(result.data, "image/png");
                    const url = URL.createObjectURL(blob);
                    resolve(url);
                }
            );
        });
    });
}

// 辅助函数：base64转Blob
function base64ToBlob(base64, mimeType) {
    const byteCharacters = atob(base64);
    const byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += 512) {
        const slice = byteCharacters.slice(offset, offset + 512);
        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    return new Blob(byteArrays, {type: mimeType});
}

(async() => {
    let tab = await createTab('https://www.laurentwillen.be');
    // 等待页面加载完成（可选，避免截图为空）
    await new Promise(resolve => setTimeout(resolve, 2000));
    try {
        const imageUrl = await captureFullPage(tab.id);
        chrome.downloads.download({
            url: imageUrl,
            filename: "fullpage_screenshot.png",
            saveAs: false
        }, () => {
            // 释放Blob URL
            URL.revokeObjectURL(imageUrl);
        });
    } catch (err) {
        console.error("截图失败:", err);
    }
})();

注意事项 #

• 调用chrome.debugger会触发Chrome的调试提示，用户需要允许扩展调试该标签页。
• 添加了页面加载等待的延时，你可以根据实际情况调整时长，或者通过监听tabs.onUpdated事件来判断页面是否完全加载。

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