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

admin管理员组

文章数量:1389874

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

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

• javascript
• google-chrome
• google-chrome-extension
• screenshot

Share Improve this question Follow asked Mar 26, 2015 at 9:53 JVGJVG 21.2k4848 gold badges141141 silver badges216216 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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./*", "http://www.particularpagetwo./*"],
      "js": ["myscript.js"]
    }
  ]

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

Here's an alternative to message passing that should acplish the same:

In my manifest.json

    "manifest_version": 3,
    "permissions": ["activeTab", "scripting"],
    "background": {
        "service_worker": "background.js"
    },
...

In background.js

const download = (dataurl, filename) => {
    const link = document.createElement("a");
    link.href = dataurl;
    link.download = filename;
    link.click();
}

chrome.action.onClicked.addListener((tab) => {
    chrome.tabs.captureVisibleTab(async (dataUrl) => {
        await chrome.scripting.executeScript({
            func: download,
            target: { tabId: tab.id },
            args: [dataUrl, 'test.png'],
        });
    });
});

本文标签：