在瀏覽器控制台中使用 JavaScript 調用 Firefox 的截圖助手 function

Question

我正在嘗試編寫一個小腳本以在實時頁面的 web 控制台中復制，該腳本需要做的部分工作是對文檔正文進行幾張截圖。 這個腳本將供個人使用，用於非常具體的任務，所以我認為使用 Firefox 的內置幫助程序 function :screenshot不會有問題，而不是更交叉兼容的解決方案。

我讀過這個關於同一主題的問題，它解釋了為什么無法從 JavaScript 的網頁控制台調用此類輔助函數。但我認為我可以做的是使用 Firefox 的瀏覽器控制台，它可以訪問整個瀏覽器。 同樣，我一直只是將函數復制並粘貼到控制台以在與頁面交互時使用，所以如果我可以從瀏覽器控制台以編程方式調用:screenshot function 我只需要弄清楚如何訪問特定document或選項卡，我會得到相同的結果。

我嘗試導入和使用 html2canvas，但它很可能不起作用，因為我嘗試截屏的內容位於shadow-root中。 我知道另一種選擇是編寫我自己的擴展，但我想避免為此任務做這樣的工作。 最終，您知道是否有可能在基於 Chromium 的瀏覽器 (Brave) 中實現類似的結果嗎？

非常感謝:D

Answer 1

好消息是，是的，您可以從瀏覽器控制台調用 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 非常棘手:(

Answer 2

您將以錯誤的方式解決問題。 Firefox 自版本 57 以來內置了工具來提供您想要的東西。 要完成此操作，您需要在需要時將Firefox 的無頭模式與Webdriver 結合使用。

來自 MDN 的簡單示例是

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