Insert an image in chrome extension

user_1341526 0
Viewed 41605

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?

google-chrome-extension google-chrome
3 Answers

The only practical solution I have found is:

my.html

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

content.js

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

manifest.js

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

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
user_50715090
Related