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?

Answer 1

There are two possible causes for the problem.

1. 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.

2. "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.