Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Embedding images into a Chrome extension

I'm building a Google Chrome extension, which injects HTML into a real web page. The injection contains also images and now I wonder how to refer to images within the extension. So far I was able to only refer them on a server using http://example.com/myimage.png. But this takes a noticeable while until they load.

Is it possible to pack images within the extension and refer them from anywhere in the browser? How?

Thanks for any help.

like image 224
Kaspi Avatar asked Jun 02 '12 20:06

Kaspi


People also ask

How do you use picture in Google Chrome extension?

Here's how it works: open Chrome, go to a website that contains a video and play it fullscreen. From there, press the Home button to go to your Android Home Screen and the playing video will automatically transition to Picture-in-Picture. That's all!

How do I download an embedded image in Chrome?

To save an image from a website in Chrome, users can usually just right-click on it and select “Save image” from the menu.


2 Answers

You could use chrome.runtime.getURL() (docs) to get the internal extension folder URL. Pass it the image relative path and you'll get the full URL for it.

For example, if you have a folder named "images", and an image named "profile.jpg" in it, both in the extension folder, you could inject it into the body of the page by doing:

var image = document.createElement("img");
image.src = chrome.runtime.getURL("images/profile.jpg");
document.getElementsByTagName("body")[0].appendChild(image);

Also, check out the web_accessible_resources manifest property documented here - you might need to declare your resources for them to available in this method.

like image 110
Dvir Avatar answered Sep 28 '22 05:09

Dvir


Leaving this here so that people don't have to read through comments.

in manifest.json include this:

"web_accessible_resources": ["RELATIVE_PATH_TO_RESOURCE.EXTENTION"] // can be more than one

example

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

and then if you want to use this image or file on a web page you use

chrome.extension.getURL("images/new-HDSB-logo.png"); // absolute path
like image 42
Elijah Avatar answered Sep 28 '22 04:09

Elijah