Get local file inside the extension folder in Chrome

On Chrome 17 or later, for this to work you must include the web_accessible_resources section to allow an image packed within the extension to be injected into a web page. http://developer.chrome.com/extensions/manifest.html#web_accessible_resources

{...
"web_accessible_resources": [
"images/my-awesome-image1.png",
"images/my-amazing-icon1.png"
],...}

(courtesy of jhaury)


You can use chrome.runtime.getURL to get a fully-qualified URL to a resource.

// Outputs path to the file regardless if it exits
> chrome.runtime.getURL('assets/extension-icon.png');
"chrome-extension://kfcphocilcidmjolfgicbchdfjjlfkmh/assets/extension-icon.png"

The chrome-extension protocol plus the extension id, will be the address for the extension's root directory.

If you need something more powerful, you might also use HTML5's FileSystem API which can create, read, write and list files from a sandbox in the current user's local file system.