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?
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.pngTo 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
.