Sign up ×

Trying to make a Chrome extension, and for some reasons beyond me, I have to load images from a url hosted elsewhere...

  "name": "Name",
  "version": "1.0",
  "manifest_version": 1,
  "description": "A something something something",
  "browser_action": {
    "default_icon": "favicon.ico",
    "default_popup": "popup.html"
  "icons": {
    "128": "logo_white.gif"


How can I load favicon.ico and logo_white.gif from and instead? I'm baffled since I'm reasonably new to chrome extensions and their use of JSON.


share|improve this question

2 Answers 2

up vote 1 down vote accepted

You can load the data at runtime as an image tag, then stick it in a canvas object, extract an ImageData and pass that to the setIcon API.

Something like the following in a background.js would do the trick:

var canvas = document.createElement("canvas");
var img = new Image();
img.onload = function() {
  var context = canvas.getContext("2d");
  context.drawImage(this, 0, 0);
  var imageData = context.getImageData(0, 0, img.width, img.height);
  chrome.browserAction.setIcon({imageData: imageData});
img.src = "";
share|improve this answer

You can't use icons located outside of your extension. Your extension will be installed on a local computer and Google Chrome should be able to get your extension's icon when there's no internet connection available.

share|improve this answer
That makes sense, cheers! –  Sam Jarman Jun 1 '12 at 10:42

Your Answer


