Embedding images into a Chrome extension

Question

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.

score 18 · Accepted Answer · edited Apr 05 '19 at 17:41

18

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.

edited Apr 05 '19 at 17:41

rameerez

27
1
6

answered Jun 02 '12 at 22:43

Dvir

5,049
1
23
32

2

I tried this earlier. It returns 'chrome-extension://invalid/' although using just an empty string: chrome.extension.getURL('') returns a correct extension root path. I don't understand it. :/ – Kaspi Jun 03 '12 at 12:58
@Kaspi: because you have to pass the function a relative path to a folder/file in your extension folder, and it'll form the full URL for it. So passing nothing isn't an option, while passing an empty string will give you the URL to the root folder of your extension. – Dvir Jun 03 '12 at 15:28
The root path doesn't seem to change though. If I just type the root path into the regular adress bar and add the image name, the image displays correctly. – Kaspi Jun 03 '12 at 15:38
1

Ahh wait... this function returns a correct path, but when the browser is requesting the image, it fails. I'm passing the path to img.src value and when the image is about to display, the browser fails with: GET chrome-extension://invalid/ – Kaspi Jun 03 '12 at 15:44
8

@Kaspi check out the web_accessible_resources manifest property at http://code.google.com/chrome/extensions/manifest.html#web_accessible_resources - you might need to declare your resources for them to available in this method. – Dvir Jun 03 '12 at 22:29
You win the golden cookie. ;) – Kaspi Jun 05 '12 at 15:03
I'm glad that helped :) I'll add it in my answer – Dvir Jun 05 '12 at 16:12

score 11 · Answer 2 · edited Feb 10 '20 at 00:03

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

Embedding images into a Chrome extension

2 Answers2

Linked