Insert an image in chrome extension

Question

I want to know how to insert an image in a Chrome extension.

<img id="image" src="logo.png" />

I'm inserting that html tag correctly into a website, but naturally can't load that logo.png image.

Any ideas on how to modify manifest.json?

which is the right directory? put it in the extension directory — jacktrades, Aug 04 '12 at 00:47

score 112 · Accepted Answer · edited Jul 04 '22 at 13:30

112

There are two possible causes for the problem.

You're injecting an image with src="logo.png". The inserted image element becomes a part of the page, so the browser does not try to load the image from the extension.
To fix this problem, use chrome.extension.getURL('logo.png'); to get the absolute URL of the resource.
"manifest_version": 2 is enabled in the manifest file. That disables all resources for external use, by default. When this error occurs, the following message appears in the console:

Not allowed to load local resource: chrome://gbmfhbpbiibnbbgjcoankapcmcgdkkno/logo.png

To solve the problem, add the resource to a whitelist, namely [`"web_accessible_resources"`][3] in the manifest file:

      ...,
      "web_accessible_resources": ["logo.png"]
    }

UPDATE: chrome.extension.getURL('logo.png')

Deprecated since Chrome 58. Please use runtime.getURL.

edited Jul 04 '22 at 13:30

Gangula

answered Aug 04 '12 at 09:20

Rob W

2

Thanks. I keep getting the Not allowed... error. Still checking if I'm doing something wrong. – jacktrades Aug 04 '12 at 13:30
@jacktrades After whitelisting the resource, have you correctly reloaded the extension? Are you using the full path relative to the extension's root? Eg. `images/logo.png` when the image is located in a subdirectory. – Rob W Aug 04 '12 at 13:33
1

Yes, I have correctly reloaded. logo.png is located in the root directory, not subdirectory. – jacktrades Aug 04 '12 at 13:34
If it's still not working, please publish the relevant part of your extension's source code (if you don't want it to be public, mail it to me, contact details are at my profile). – Rob W Aug 04 '12 at 13:37
you should have checked ur e-mail earlier :) – jacktrades Aug 04 '12 at 13:39
8

@jacktrades You've placed `web_accessible_resources` **inside `"content_scripts"`. That's wrong, it has to be a key of the root object. I attempted to make that clear in my answer, by adding an unindented trailing `}`. – Rob W Aug 04 '12 at 13:46
Is it possible to use this directly in the `` tag without the need of JS? – fguillen Jun 22 '21 at 11:56
Any idea on how to make it work with safari-web-extension. It doesnt load citing security error – Arjun Nair Jul 15 '21 at 18:18

fguillen · Answer 2 · 2021-09-14T22:00:25.657

3

The only practical solution I have found is:

<img id="icon" src="./icon.png">

let icon = document.getElementById("icon");
icon.src = chrome.runtime.getURL("icon.png");

"web_accessible_resources": [{
    "matches": ["<all_urls>"],
    "resources": ["icon.png"]
}]

edited Sep 14 '21 at 22:00

answered Jun 22 '21 at 12:41

fguillen

], were missed in the web resources of the manifest file – Farbod Aprin Sep 14 '21 at 09:36

score 0 · Answer 3 · answered Aug 03 '21 at 12:04

This solution works for me.

Create a folder named "images" in the extension directory.
Kepp all the image files in that directory.
Add "web_accessible_resources": ["logo.png"] in the manifest.json file
Access it by using src='chromeextension://[ID]/images/logo.png' from content.js

3 Answers3