Firefox Addon API for taking screenshots

Question

I am looking for a firefox addon api to take a screenshot with the visible area of ​​the document.

Chrome and Safari have api to achieve this. And they are pretty fast. I could not find anything specific for firefox.

I found a workaround in How do I use the drawWindow canvas function in an addon created using addon sdk? , but this solution takes a full screenshot of the page with scrolls, including (hidden parts of the document). There are 2 questions for this decision;

1- If the page has a long scroll, it takes a long time to complete the screenshot process. Because he uses canvas-based painting.

2- I would like to get a screenshot with the visible area of ​​the document, not the entire document.

Is there any workaround for this?

Thanks.

Answer 1

Using the SDK, you can do something like this:

const { window: { document } } = require('sdk/addon/window'); const { getTabContentWindow, getActiveTab } = require('sdk/tabs/utils'); const { getMostRecentBrowserWindow } = require('sdk/window/utils'); const canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas'); document.documentElement.appendChild(canvas); function captureTab(tab=getActiveTab(getMostRecentBrowserWindow())) { let contentWindow = getTabContentWindow(tab); let w = contentWindow.innerWidth; let h = contentWindow.innerHeight; let x = contentWindow.scrollX; let y = contentWindow.scrollY; canvas.width = w; canvas.height = h; let ctx = canvas.getContext('2d'); ctx.drawWindow(contentWindow, x, y, w, h, '#000'); return canvas.toDataURL(); } 

It takes only the visible area. By default, it captures the active tab, but you can pass any other tab - since it is designed as a low-level API, it requires the native tab, but not the SDK tab. You can add a module and export only the captureTab function.

Edit: e10s version

The code is currently not compatible with Firefox with available e10s, as Ian Bicking noted in a comment. An easy way to solve this problem is to create a temporary canvas in the same document and the content process that we want to capture the screenshot:

 const { getTabContentWindow, getActiveTab } = require('sdk/tabs/utils'); const { getMostRecentBrowserWindow } = require('sdk/window/utils'); function captureTab(tab=getActiveTab(getMostRecentBrowserWindow())) { let contentWindow = getTabContentWindow(tab); let { document } = contentWindow; let w = contentWindow.innerWidth; let h = contentWindow.innerHeight; let x = contentWindow.scrollX; let y = contentWindow.scrollY; let canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas'); canvas.width = w; canvas.height = h; let ctx = canvas.getContext('2d'); ctx.drawWindow(contentWindow, x, y, w, h, '#000'); let dataURL = canvas.toDataURL(); canvas = null; return dataURL; } 

This works in both e10s and non-e10s FF versions; a drawback compared to the previous one creates a canvas every time we want to take a screenshot, but I think that is acceptable.

Answer 2

Your assumption that taking a screenshot on Firefox with a canvas is somehow slow is wrong.

I took some screenshots, and Firefox / canvas was faster than Chrome / captureVisibleTab.

In fact, Firefox is better suited for the quickest possible screenshots, since its canvas provides the preferred code to the mozFetchAsStream method, allowing you to bypass the actual bottleneck, which is the basic encoding of image data.

Some numbers

• Chrome: captureVisibleTab 200-205ms
• Firefox: drawImage 20-25ms + toDataURL 125-130ms

Devtools screenshot command is a good example of how to capture only the visible part

In fairness, to make a meaningful comparison, you need to consider whether Chrome supports the PNG encoder for speed compression. However, this does not alter the fact that the Firefox canvas is in order.

edit: OK, this note about base64 encoding is stupid, I don't know what I was thinking. Perhaps I should write instead that the Firefox canvas is not only fast, but also universal.