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.
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.
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.
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”
}
}
| [xyz-ihs snippet=”Fixing-the-Tutorialzine-Chrome-Extension-Tutorial-Series-of-Posts”] |