One of the most challenging bugs in recreating Tutorialzine’s How To Build a Chrome Extension was debugging why the popup would not “pop up”. If you’ve seen the demo, then you know that browser action’s create small icons next to Chrome’s address bar. The popup variable inside the browser_action array tells the chrome extension which html file to call when the icon is clicked. The problem with Tutorialzine’s tutorial is that the variable name for a popup has changed from popup to default_popup since the manifest version of Chrome has changed in the last few years. This is an issue that was hairpullingly difficult to figure out. There was no error when uploading the extension. There was no javascript error when I opened up the chrome extension’s console. There was no note whatsoever to figure this out until I found a very convenient stackoverflow post that helped me figure this out.
The Broken version of this manifest.json file
{
"name": "Tutorialzine Extension",
"version": "1.1",
"manifest_version" : 2,
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
“icons”:{
“128”:”icon.png”
}
}
The fixed version of the manifest.json
{
"name": "Tutorialzine Extension",
"version": "1.1",
"manifest_version" : 2,
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
“icons”:{
“128”:”icon.png”
}
}
| [xyz-ihs snippet=”Fixing-the-Tutorialzine-Chrome-Extension-Tutorial-Series-of-Posts”] |