How to use Javascript to automatically save the images on the website with Chrome extension?

Question

Method 1.

-- use the iframe.

Create an iframe, when pressing the save button.
set the "src" property to a url of an image on the website.
invoke the iframe.document.execommand. //useless, it seems the execommand is only for IE.

Method 2.

-- use a canvas

Create a canvas
Draw the image into the canvas.
invoke toDataURL // Security Error

manifest.js:

{
  "name" : "...",
  "version" : "1",
  "description" : ".....",
  "content_scripts" : [{
    "matches" : ["http://domain/p/*"],
    "js" : ["i.js"],
    "css" : ["i.css"]
  }],
  "permissions": [
    "http://*.domain.com/*"
  ]
}

Is there any other way to handle the problem?

I'm using method 2 (with canvas) - why do you have security error? — hamczu, Mar 03 '12 at 22:25
hi @hamczu , the Images have not the same domain as the website. Maybe it is the reason . — Ice, Mar 04 '12 at 05:02
Do you have this domain in the manifest permissions? Maybe you can paste your code here or on jsFiddle so we would have some base to work on. Another solution: catch all image urls requests with chrome.webRequest API — hamczu, Mar 04 '12 at 16:14
@hamczu i'll add the manifest file as soon as i get home and try the chrome.webRequest api... — Ice, Mar 05 '12 at 03:49
`execCommand` is supported by Chrome. In fact, it's the recommended method of [copying and pasting](http://code.google.com/chrome/extensions/manifest.html#permissions) for extensions. — neocotic, Mar 05 '12 at 12:04
@Alasdair In IE theres a save (or something like that) execCommand that will cause a save dialog to come up for the current document, there is no such functionality in Chrome (last time I checked anywayz). — PAEz, Mar 07 '12 at 14:29
Problem I have with method 2 is your not actually saving the image but a copy of it. So if its as a jpeg and you re save it as a jpeg then it was first decompressed and your actually saving a copy that is re compressed and this may cause more degradation, or if you save it as a png then the file size would likely increase. The only way I could think of to truly save the image is to re get it using xhr and save that.. http://stackoverflow.com/questions/8022425/getting-blob-data-from-xhr-request ...if your hardcore then use webRequest to block images and put them in the page yourself. — PAEz, Mar 07 '12 at 14:41

score 0 · Answer 1 · answered Jul 30 '15 at 16:07

It's a very old question, but since then chrome.downloads API became a thing.

It's sufficient to extract URLs of all the images you're interested in, and pass them to chrome.downloads.download. Please note that you may need to set a referrer in some rare cases.

How to use Javascript to automatically save the images on the website with Chrome extension?

1 Answers1