Bob Cavezza's Blog

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”
}
}

 

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.  

 

§308 · October 2, 2014 · Chrome Extensions · · [Print]

Leave a Reply