Question

我的内容脚本中的以下功能应从后台脚本获取页面截图：

var takeScreenshotFn = function () {
    return new Promise(function (resolve, reject) {
        chrome.runtime.sendMessage(
            {
                command: "takeSingleScreenshot"
            },
            function (response) {
                resolve(response.screenshot);
            }
        );
    });
};

后台脚本具有正在处理消息的侦听器：

if (message.command === "takeSingleScreenshot") {
    // Coming in from the content script, returns response to content script.
    chrome.tabs.captureVisibleTab(function (screenshotUrl) {
        sendResponse({
            success: true,
            screenshot: screenshotUrl
        });
    });
}
return true;

现在，在内容脚本中，我尝试自动突出显示某些DOM节点并截图：

promise = promise.then(function () {
    var j;
    ...
    for (j = 0; j < leafs.length; j++) {
        leaf = leafs[j];
        leaf.oldBGColor = leaf.style.backgroundColor;
        leaf.style.backgroundColor = "#fc0";
        leaf.style.setProperty("background-color", "#fc0", "important");
    }
    if(leaf) console.log(window.getComputedStyle(leaf).getPropertyValue('background-color'));
    return takeScreenshotFn().then(function (highlightedShot) {
        for (j = 0; j < leafs.length; j++) {
            leaf = leafs[j];
            leaf.style.backgroundColor = leaf.oldBGColor;
            delete leaf.oldBGColor;
        }
        if(leaf) console.log(window.getComputedStyle(leaf).getPropertyValue('background-color'));
        ...
    });

如果我使用该代码拍摄屏幕截图，则问题在于某些屏幕截图是在屏幕截图中突出显示之前拍摄的。运行中哪个节点受影响，但似乎完全是随机的。使用基于html2canvas的其他takeScreenshotFn，突出显示可以正确并确定地工作，但是屏幕截图当然不那么好（由于已知的html2canvas限制），它需要20倍的时间：

var takeScreenshotFn = function () {
    return html2canvas(document.body).then(function(canvas) {
        return canvas.toDataURL();
    });
};

这是一个已知问题吗？并且/或者我可以调用某些函数来确保浏览器在截取屏幕截图之前处理布局更改吗？

Chrome扩展程序：截屏是在应用布局更改之前拍摄的

0 个答案: