使用 Chrome DevTools API 捕获非活动选项卡的屏幕截图

Question

我正在开发一个 Chrome 扩展程序，我必须使用选项卡 ID 进行屏幕截图，即使它不是活动选项卡。因此，我无法使用 captureVisibleTab API。有没有办法使用 Chrome 调试模式来做到这一点？我已经尝试在选项卡处于活动状态时进行捕获，但在其处于非活动状态时则不起作用。有什么解决办法吗？

https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot

https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot

Answer 1

连接到 Chrome DevTools 协议：这可以通过与 Chrome 实例的 WebSocket 连接来完成。您需要在启用远程调试的情况下运行 Chrome。例如，您可以使用 chrome.exe --remote-debugging-port=9222 等命令启动 Chrome。

发现可用选项卡：连接后，您需要获取可用选项卡（或页面）的列表。这可以使用 GET /json 端点来完成。

附加到选项卡：通过 ID 选择要捕获的选项卡，然后发送命令以附加到该选项卡。这将使您能够控制选项卡并与选项卡交互。

捕获屏幕截图：附加到选项卡后，您可以使用 Chrome DevTools 协议的 Page.captureScreenshot 方法来捕获页面的屏幕截图。此方法可以捕获当前呈现的页面的屏幕截图，无论选项卡是否处于活动状态。

以下是代码外观的基本轮廓：

const chromeRemoteInterface = require('chrome-remote-interface');

async function captureScreenshot(tabId) {
    let client;
    try {
        // Connect to Chrome
        client = await chromeRemoteInterface({tab: tabId});

        const {Page} = client;

        // Enable the Page domain events
        await Page.enable();

        // Capture the screenshot
        const screenshot = await Page.captureScreenshot({format: 'png'});

        // Process the screenshot (e.g., save to file)
        console.log(screenshot.data);
    } catch (err) {
        console.error('Error:', err);
    } finally {
        if (client) {
            await client.close();
        }
    }
}

// Example usage
captureScreenshot('yourTabId');

这是一个简化的示例。在实际应用程序中，您需要处理更多情况，例如发现选项卡 ID、管理 Chrome 实例的生命周期以及错误处理。

请记住，要实现此功能，Chrome 需要在设置了 --remote-debugging-port 标志的情况下运行。此外，Chrome DevTools 协议可能会发生变化，因此请务必参阅官方文档以获取最新信息。