Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding screenshot functionality to a firefox extension

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.

like image 747
Ivan Avatar asked Jul 08 '10 20:07

Ivan


People also ask

What happened to screenshot in Firefox?

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).

How do I take extended screenshots in Firefox?

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.

How do I access my screenshots in Firefox?

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.


1 Answers

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):

  1. Add canvas to xul.
  2. Find dimensions and top-left co-ordinates of element.
  3. Copy portion of window to canvas.
  4. Convert canvas to base64 PNG file.
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(...);
like image 130
Ivan Avatar answered Feb 09 '23 13:02

Ivan