使用 JavaScript 在浏览器控制台中调用 Firefox 的 :screenshot 辅助函数

Question

我正在尝试编写一个小脚本以在实时页面的 Web 控制台中复制，该脚本需要做的部分工作是截取文档正文的几张屏幕截图。该脚本将供个人使用，用于非常具体的任务，因此我认为使用 Firefox 的内置辅助函数 :screenshot 而不是更交叉兼容的解决方案不会有问题。

我已阅读关于同一主题，这解释了为什么无法从 JavaScript 中的网页控制台调用此类辅助函数。但我认为我可以做的是使用 Firefox 的浏览器控制台，它可以访问整个浏览器。同样，我一直只是将函数复制并粘贴到控制台以在与页面交互时使用，所以如果我可以从浏览器控制台以编程方式调用 :screenshot 函数，我只需要弄清楚如何访问DOM 特定 document 或选项卡，我会得到相同的结果。

我曾尝试导入和使用 html2canvas，但它很可能不起作用，因为我尝试截屏的内容位于 shadow-root 中。我知道另一种选择是编写我自己的扩展，但我想避免为此任务做这样的工作。最终，你知道是否有可能在基于 Chromium 的浏览器（Brave）中实现类似的结果吗？

非常感谢你:D

Answer 1

您正在以错误的方式解决问题。 Firefox 自版本 57 以来内置了工具来提供您想要的东西。要完成此操作，您需要在需要时使用 Firefox's headless mode with Webdriver。

来自 MDN 的简单示例是

/path/to/firefox -P my-profile -headless --screenshot https://developer.mozilla.org/

Answer 2

好消息是，是的，您可以从浏览器控制台调用 devtools 屏幕截图功能。方便地，默认选择的节点是文档主体。

(async()=>{
    const { require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm");
    const { gDevTools } = require("devtools/client/framework/devtools");
    const { TargetFactory } = require("devtools/client/framework/target");
    const target = await TargetFactory.forTab(gBrowser.selectedTab);
    const toolbox = await gDevTools.showToolbox(target, "inspector");
    const inspector = toolbox.getPanel("inspector");
    inspector.screenshotNode();
})()

现在是坏消息。从浏览器控制台访问内容页面的 DOM 非常棘手:(

使用 JavaScript 在浏览器控制台中调用 Firefox 的 :screenshot 辅助函数

Calling Firefox's :screenshot helper function in the Browser Console with JavaScript

javascript

firefox

chromium

webpage-screenshot