javascript - 使用 Javascript 调用 Chrome DevTools 命令

Question

我正在尝试截取网页的完整屏幕截图，并注意到 Chrome 已在他们的开发工具中内置了一个命令来执行此操作。有没有办法在控制台或网页上使用 Javascript 调用此命令？

编辑：为了将此问题与 Stack Overflow 上已引用的已回答问题区分开来，我询问是否存在完全捕获网页而不查看 html并使用 javascript 解析的解决方案。Chrome 扩展商店中有应用程序可以做到这一点；但是，它们依赖于captureVisibleTab API，它不像 devtool 命令那样流畅，似乎不需要滚动和拼接。

---

答：一般情况下，浏览器中不能有简单的Javascript调用devtools库中实现的函数和方法；主要出于安全考虑，您的 Javascript 是沙盒化的。

一个例外是，如果您正在制作 Chrome 扩展程序，您可以在其中指定对Chrome 调试器 API的权限。此 API 允许您访问Chrome Devtools 协议，然后您可以调用 devtool 命令。我通过询问如何访问 devtools 上的模拟器的问题找到了这一点。在该帖子中，您可以找到访问模拟器的扩展示例。

至于整页截图命令，我查看了本机实现和puppeteer 实现[1] 的源代码，并找到了一种为客户端扩展重新实现它的方法。

{
    "name": "",
    "version": "0.1.0",
    "description": "",
    "permissions": [
        "tabs",
        "debugger"
    ],
    "manifest_version": 2,
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "browser_action": {
    }
}

'use strict';
const protocolVersion = "1.3"

/**
 * @param {!Element} canvas
 */
function saveScreenshot(canvas) {
    let fileName = "hello"
    const link = document.createElement('a');
    link.download = fileName + '.png';
    console.log(canvas)
    canvas.toBlob(function(blob) {
        console.log(blob)
        link.href = URL.createObjectURL(blob);
        link.click();
    });
};

function getPNG(tabId) {
    chrome.debugger.attach({
        tabId: tabId
    }, protocolVersion, function() {
        chrome.debugger.sendCommand({
            tabId: tabId
        }, "Page.getLayoutMetrics", {}, function(object) {
            console.log(object)
            const {height, width} = object.contentSize
            chrome.debugger.sendCommand({
                tabId: tabId
            }, "Emulation.setDeviceMetricsOverride", {height: height, width: width, deviceScaleFactor: 1, mobile: false}, function() {
                console.log("hello world")
                chrome.debugger.sendCommand({
                    tabId: tabId
                }, "Page.captureScreenshot", {}, function(screenshot) {
                    console.log(screenshot)

                    const pageImage = new Image();
                    pageImage.src = 'data:image/png;base64,' + screenshot.data;
                    pageImage.onload = function() {
                        const canvas = document.createElement('canvas');
                        canvas.width = pageImage.naturalWidth;
                        canvas.height= pageImage.naturalHeight;

                        const ctx = canvas.getContext('2d');
                        ctx.imageSmoothingEnabled = false;
                        ctx.drawImage(pageImage, 0, 0);
                        console.log(canvas, pageImage)
                        saveScreenshot(canvas);
                    }

                    chrome.deugger.detach({
                        tabId: tabId
                    })

                })
            })
        })
    })
}

chrome.runtime.onInstalled.addListener(function() {
    console.log("installed");
});

chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        var currTab = tabs[0];
        if (currTab) {
            getPNG(currTab.id)
        }
    });
});

[1] Puppeteer是一个服务器端 NodeJS 库，用于通过 devtools 协议控制 Chromium。在当前的实现中，你不能在浏览器中使用类似 Webpack 的东西运行 puppeteer。

标签： javascriptgoogle-chrome-devtools