2

I have a chrome extension that runs an injection script on certain pages.

I'd like to grab the images from a page when the user lands there, and push the images to remote storage w/o doing another round-trip to the page's image host.

Is this possible?

I assume the browser stores the images temporarily in cache, but it's not clear from the docs how to access those images.

ETA: thanks, I'm familiar with b64 encoding an image using canvas. Unfortunately every snippet I've found to do that relies on the browser to determine whether the img comes from cache or the server, & that's not what I'm aiming for.

Brandon
  • 7,736
  • 9
  • 47
  • 72
  • Yes, duplicate of [Get image data in JavaScript?](http://stackoverflow.com/questions/934012/get-image-data-in-javascript) – Daniel Herr Sep 20 '16 at 01:55
  • I appreciate your diligence in policing duplicates, but the answer you linked explains how to do specifically what I am trying to avoid--that is, grab images from the server. at best, i could hope that the browser would route my image request to cache, but it's not clear I'd have any way of controlling that. – Brandon Sep 20 '16 at 03:03
  • currently there is no api for accessing the cached files in chrome. – jsxqf Sep 20 '16 at 03:07
  • 1
    It looks to me like what I linked is what you want - access image data without redownloading, from the element: https://stackoverflow.com/a/934925/3591628 – Daniel Herr Sep 20 '16 at 03:19
  • 1
    @DanielHerr, from the answer's author, fifth comment on the link you shared: "Yes, **you would download the image with XMLHttpRequest. Hopefully, it would use the cached version of the image, but that would depend on the server and browser configuration, and you would have the request overhead to determine if the file has changed.** That's why I didn't suggest that in the first place :-) Unfortunately, as far as I know, it's the only way to get the original file. " If I'm misunderstanding your insistence that this is a dupe question, pls enlighten--otherwise, you're just incorrect. – Brandon Sep 20 '16 at 03:27
  • also, you're misunderstanding that function: it's not getting the image from the element. the param is called 'img,' but it takes an image of the `new Image()` sort--ie, the original file. – Brandon Sep 20 '16 at 03:32
  • That is only because the version created by JS might be generated differently than the original file. Also, new Image() creates an image element, which is accepted by drawImage().From the comment thread: "Firefox could be using a different compression level which would affect the encoding. Also, I think PNG supports some extra header information like notes, that would be lost, since the canvas only gets the pixel data." – Daniel Herr Sep 20 '16 at 04:16

1 Answers1

0

Please try adding web_accessible_resources in your manifest. With the given sample code:

{
  ...
  "web_accessible_resources": [
    "images/*.png",
    "style/double-rainbow.css",
    "script/double-rainbow.js",
    "script/main.js",
    "templates/*"
  ],
  ...
}

Additionally, as mentioned in the given documentation:

A navigation from a web origin to an extension resource will be blocked unless the resource is listed as web accessible. Note these corner cases:

  • When an extension uses the **webRequest** or **declarativeWebRequest** APIs to redirect a public resource request to a resource that is not web accessible, such request is also blocked.
  • The above holds true even if the resource that is not web accessible is owned by the redirecting extension.

Hope that helps!

Community
  • 1
  • 1
Teyam
  • 7,686
  • 3
  • 15
  • 22
  • It looks like this only allows `content scripts` to access extension assets. is that a correct interpretation? My goal is the reverse sort of--to access browser cached assets from the extension. Is this API able to accomplish that? The only thing I can think of is if the extension blocked all calls to `target.example.com/images/*`, then pulled those images into the browser storage and redirected all the tags to storage. but i'm not familiar w/ most of these APIs, so this could be way off. – Brandon Sep 21 '16 at 17:43