Bob Cavezza's Blog

While working through the Tutorialzine.com “Build Your First Chrome Extension”, I came across an issue early on related to the icon.png files.  Their Manifest.json referred to two icons image files, but didn’t have a location for the user to download those icons anywhere.  I decided to create a mini tutorial on how to fix this error.

Extension Load Error:  Could not load  icon.png for browser action

Extension Load Error: Could not load icon.png for browser action

To make this work, all we need to do is download a 128×128 png image file and add it to our chrome extension folder.  I suggest going to Google Image Search and searching for icon.png.  Then click on search tools, click on size, and click exactly.

How To Specify an exact image size in google image search

How To Specify an exact image size in google image search

Next, specify the size of 128 pixels by 128 pixels.  This should give you plenty of options to download an icon that fits our needs.

Download Icon.png from Google Images and specify 128x128

Download Icon.png from Google Images and specify 128×128

 

This should filter the image results so that the only options we see are 128×128 icons.  Pick whichever option you want, download it to this chrome extension’s folder, and then save it as icon.png (it doesn’t need to be named icon.png, but this name makes sense).  Next, change the manifest.json so that any icons refer to this image name.  If there is an icon_128.png in your manifest.json file, rename it to icon.png.  Note that this error refers to the icon.png in the browser_action array in the json file.  This refers to the icon that will appear on the browser itself next to the url field.  The icons mentioned inside the “icons” array refer to the icon a user will see in their chrome://extensions page or on the download page in the Chrome App Store.

Example Manifest.json before the change.


{
"name": "Tutorialzine Extension",
"version": "1.0",
"manifest_version" : 2,
"browser_action": {
"default_icon": "icon_128.png",
"popup": "tutorialzine.html"
},

“icons”:{
“128”:”icon_128.png”
}
}

Example manifest.json after the change


{
"name": "Tutorialzine Extension",
"version": "1.0",
"manifest_version" : 2,
"browser_action": {
"default_icon": "icon.png",
"popup": "tutorialzine.html"
},

“icons”:{
“128”:”icon.png”
}
}

 

Fixing The Tutorialzine How to Build a Chrome Extension Series

Watch the Two Screencasts of debugging the entire tutorial

  1. You must set the manifest_version to 2
  2. icon.png needs to be downloaded
  3. Change popup variable name to default_popup - this is a very frustrating popup to find
  4. You need to download jquery.min.js and add it to the folder.  (I would download jquery-1.11.1.min.js and rename the script to jquery-1.11.1.min.js in tutorialzine.html
  5. You need to add a content_security_policy value to make external ajax calls and all external ajax calls must be made to https urls
  6. An extra broken image loads in the popup.  

 

§269 · September 30, 2014 · Chrome Extensions · · [Print]

Leave a Reply