Is there a cross-platform approach to taking screenshots from a firefox extension?
Ideally I'd like to be able to take a screenshot of a dom element (irrespective of whether it's visible on the page or not), something like:
var screenshot = screenshot(document.getElementById('example');
Any pointers or suggestions would be nice, searching https://developer.mozilla.org/ only yields screenshots they've used in various guides.
Sorry for the non-obvious change, but in Firefox 88, Firefox Screenshot stopped being a "Page Action" that you could access from the ••• menu in the address bar. It now has an optional toolbar button ("Browser Action") in addition to right-click context menu integration and the keyboard shortcut (Ctrl+Shift+S).
Go to More tools, followed by the Customize Toolbar option. Find the Screenshot icon and move it to the toolbar. Once the icon is where you want it to be, go to the page where you want to take the scrolling screenshot. Click on the screenshot icon, and you'll see two options: Save full page or Save visible.
Firefox does not has an option to take and save a screenshot. If you take a screenshot with the Print Screen button on your keyboard, then a copy is made into Windows memory. Now open Windows Paint (or any other image viewer) and do a Past action.
After examining the code of several extensions. I took the following approach (to take a snapshot of a particular dom element). This can be used in a Firefox extension to take screenshots of the whole page, to take screenshots of the browser window and to take screenshots of a particular dom element (and all of its child nodes):
function getElementScreenshot(elm) { var x = findPosX(elm); var y = findPosY(elm); var width = elm.clientWidth; var height = elm.clientHeight; var cnvs = document.getElementById("aCanvas"); cnvs.width = width; cnvs.height = height; var ctx = cnvs.getContext("2d"); // To take a snapshot of entire window // ctx.drawWindow(mainWindow.content, 0, 0, mainWindow.innerWidth, mainWindow.innerHeight, "rgb(255,255,255)"); ctx.drawWindow(mainWindow.content, x, y, width, height, "rgb(255,255,255)"); return(cnvs.toDataURL()); }
To find top left coordinate of an element
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (1) {
curleft += obj.offsetLeft;
if (!obj.offsetParent) {
break;
}
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}
return curleft;
}
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (1) {
curtop += obj.offsetTop;
if (!obj.offsetParent) {
break;
}
obj = obj.offsetParent;
}
} else if (obj.y) {
curtop += obj.y;
}
return curtop;
}
To get access to browser.xul from sidebar
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIWebNavigation)
.QueryInterface(Components.interfaces.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow);
mainWindow.gBrowser.addTab(...);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With