Embedding images into a Chrome extension

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.

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