从Google Chrome扩展程序中截取特定元素的屏幕截图

Question

我需要我的Chrome扩展程序截取整个页面/标签的屏幕截图，不包括我在其他所有内容的结束</body>之后注入的元素。

目前，我使用以下代码从后台脚本中截取屏幕截图：

chrome.extension.onMessage.addListener((request, sender, sendResponse) => {
    if (request.type === 'cheese') {
        setTimeout(() => {
            chrome.tabs.captureVisibleTab(null, { format: 'png' }, (src) => {
                sendResponse({ src });
            });
        }, 10);

        return true;
    }
});

到目前为止，我发现排除该元素的唯一解决方案是在截取屏幕截图之前暂时隐藏它，但有时它仍会出现，因此上面代码中的10ms延迟。这减少了问题的频率，但并没有完全解决它，无论如何，这只是我想摆脱的一种解决方法。

以前，我只是在隐藏了元素之后才使用requestAnimationFrame将截屏请求发送到后台脚本，但令人惊讶的是，这并没有解决问题，这就是为什么我尝试使用{{1}相反。

请注意，我想在屏幕截图上删除的元素位于页面的相关区域之上，因此裁剪捕获的区域不是一种选择，因为我无法看到背后的任何内容那个元素。

我看了一下远程调试协议，我找到的最接近的协议是Page.captureScreenshot，它接受​​一个setTimeout参数来裁剪屏幕截图，但仍会捕获叠加层。