Chrome Extension: Automatically download a screenshot taken with 'chrome.tabs.captureVisibleTab'

Question

I'm new to the world of Chrome extensions / auto-downloading. I have a background page which takes a screenshot of the visible webpage with chrome.tabs.captureVisibleTab(). In my popup I have:

chrome.tabs.captureVisibleTab(null, {}, function (image) {
  // Here I want to automatically download the image
});

I've done something similar with a blob before but I'm totally at a loss as to how to download an image as well as how to do it automatically.

In practice, I want my Chrome extension to screenshot + download the image automatically whenever a particular page is loaded (I'm guessing this will have to be achieved by having my content script talk to my background page, correct?)

Answer 1

Yes, as you said you can use Message Passing to get it done. By content scripts to detect the switch on particular pages, then chat with the background page in order to capture screenshot for that page. Your content script should send a message using chrome.runtime.sendMessage, and the background page should listen using chrome.runtime.onMessage.addListener:

Sample codes I created and tested it works with me:

Content script(myscript.js):

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {

  });

Background.js:

var screenshot = {
  content : document.createElement("canvas"),
  data : '',

  init : function() {
    this.initEvents();
  },
 saveScreenshot : function() {
    var image = new Image();
    image.onload = function() {
      var canvas = screenshot.content;
      canvas.width = image.width;
      canvas.height = image.height;
      var context = canvas.getContext("2d");
      context.drawImage(image, 0, 0);

      // save the image
      var link = document.createElement('a');
      link.download = "download.png";
      link.href = screenshot.content.toDataURL();
      link.click();
      screenshot.data = '';
    };
    image.src = screenshot.data; 
  },
initEvents : function() {
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.greeting == "hello") {
          chrome.tabs.captureVisibleTab(null, {format : "png"}, function(data) {
                screenshot.data = data;
                screenshot.saveScreenshot();

            }); 

        }
    });
  }
};
screenshot.init();

Also keep in mind to register your content script's code and permissions in manifest file:

"permissions": ["<all_urls>","tabs"],
    "content_scripts": [
    {
      "matches": ["http://www.particularpageone.com/*", "http://www.particularpagetwo.com/*"],
      "js": ["myscript.js"]
    }
  ]

It captures the screenshot and download the image automatically as .png whenever a particular page is loaded. Cheers!