在浏览器控制台中使用 JavaScript 调用 Firefox 的截图助手 function

Question

I am trying to write a small script to copy in the web console of a live page, and part of what this script needs to do is take several screenshots of the document body. This script will be for personal use, for a very specific task, so I think it would not be a problem to use Firefox's built in helper function :screenshot , instead of a more cross-compatible solution.

I have read this question about the same topic, which explains why it is not possible to call such helper functions from the webpage's console in JavaScript. But what I thought I could do instead, is to use Firefox's browser console, which gives access to the entire browser. Again, I have been literaly just copying and pasting functions into the console to use while interacting with the page, so if I can call the :screenshot function programmatically from the browser console I would just need to figure out how to access the DOM of a particular document or tab and I will get the same result.

I have tried to import and use html2canvas, but it did not work most probably because the content that I am trying to screenshot resides inside a shadow-root . I know that one alternative is to write my own extension, but I would like to avoid such a job for this task. Eventually, do you know if it is possible to achieve similar results in a Chromium based browser (Brave)?

Thank you very much:D

Answer 1

The good news is that, yes, you can invoke the devtools screenshot functionality from the browser console. Conveniently the default selected node is the document body.

(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();
})()

Now the bad news. Accessing the DOM of content page from the browser console is unbearably tricky:(

Answer 2

You are going about solving the problem in the wrong manner. Firefox since version 57 has built in tools to provide what you want. To accomplish this you want to use Firefox's headless mode with Webdriver if needed.

The simple example from MDN is

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