Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

firefox addon sdk 1.17 take screenshot

I'm developing a Firefox add-on using sdk 1.17. It contains a panel with a button inside (Developed using ExtJs), I want to take the screen shot of the current page when user clicks the button. In Google chrome there is an API (chrome.page-capture) is there. But I could not find the similar one in Firefox. In firefox how to do this task from the main.js.

like image 412
abhilash Avatar asked Oct 23 '14 09:10

abhilash


People also ask

How do I capture a screenshot in Firefox?

Right-clickHold down the control key while you click on an empty part of the page and select Take Screenshot. Alternatively, use the keyboard shortcut Ctrl + Shift + S .

Why can I not screenshot on Firefox?

Chosen solution You can drag this Screenshot button in customize mode from the Customize palette to the toolbar or to the overflow area. Make sure that Screenshots isn't disabled. You can check these prefs on the about:config page and make sure they are default.

Did Firefox remove screenshots?

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 you take a screenshot on an Android Firefox?

How do I take screenshots? Screenshots are currently not available in Firefox Focus, but most Android users can take a screenshot by pressing the device's power button and the volume "-" button .


1 Answers

O.k I have found the answer. This code can be used to take the full page screen shot.

In your main.js add this code.

  var window = require('sdk/window/utils').getMostRecentBrowserWindow();
  var tab = require('sdk/tabs/utils').getActiveTab(window);
  var myData;
  tabs.activeTab.attach({
    contentScript: "self.postMessage(document.body.scrollHeight);",//recieves the total scroll height of tab
    onMessage: function(data)
    {
      console.log("Tab data received: " + data);
      myData = data;
      var thumbnail = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
      window = tab.linkedBrowser.contentWindow;
      thumbnail.width = window.screen.availWidth ;
      thumbnail.height = window.screen.availHeight ;
      var ctx = thumbnail.getContext("2d");
      var snippetWidth = window.outerWidth ;
      var snippetHeight = window.outerHeight ;
      ctx.canvas.left  = 0;
      ctx.canvas.top = 0;
      ctx.canvas.width  = window.innerWidth;
      ctx.canvas.height = myData;//canvas height is made equal to the scroll height of window
      ctx.drawWindow(window, 0, 0, snippetWidth, snippetHeight+myData, "rgb(255,255,255)");//

      var imageDataUri=thumbnail.toDataURL('image/png');
      imageDataUri = imageDataUri.replace("image/png", "image/octet-stream");        
      tabs.open(imageDataUri);
    }
  });

This is done with addon sdk 1.17. Works cool.

like image 69
abhilash Avatar answered Oct 27 '22 10:10

abhilash