Bob Cavezza's Blog

 

 

 

 

 

 

 

This post is part of a series of posts fixing the Chrome Extension Tutorial from Tutorialzine.com.

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.  

Latest Tutorials on Tutorialzine Popup Broken Images

If you made it to this page, you probably fixed the major issues with the Tutorialzine Chrome Extension Tutorial and now there’s only a few aesthetic changes to go!  Since popup.html is an html file, you can open that file in the browser.  Select File->Open File in chrome,  and navigate to the popup.html file.  From there, you can edit the js and not have to upload the extension to chrome each time you check a change. Since the popup.html file doesn’t have any contents, you need to look to the script.js file to fix what is happening.

Tut Object Values in the chrome console

What is script.js doing?

Now, let’s look at script.js and see if we can figure out what is happening.  On line 12, there’s an ajax call that queries json data from a yahoo api’s program.  it creates an items variable which gives you an array of the article objects and declares an empty array to return the html string.  The for loop loops through the post objects (each named tut) and builds an string of html to return to the popup.html page.

If you add a console.log(tut) to the foreach loop in the javascript, you can see what values are stored in the each tut object.

Section of script.js with console.log(tut) inserted to help debug

for(var i=0;i<items.length;i++)

{
var tut = items[i];

// Extracting the post ID from the permalink:
var id = tut.guid.content.match(/(\d+)$/)[0];

// Looping and generating the markup of the tutorials:
console.log(tut);
htmlString += ‘<div class=”tutorial”>\
<img src=”http://cdn.tutorialzine.com/img/posts/’+id+’.jpg” />\
<h2>’+tut.title+'</h2>\
<p>’+tut.description+'</p>\
<a href=”‘+tut.link+'” target=”_blank”>Read more</a>\
</div>';
}

Note: if you try to run this as is, you will pull your hair out.  There’s code in script.js that stores the results from the ajax call and gives you the storage if you don’t comment it out.  Comment out (add “//” without the quotes to the front of these lines).  


9if(!localStorage.cache || now - parseInt(localStorage.time) > 1*60*60)
10{
.
.
.
39}
40else{
41// The cache is fresh, use it:
42$('#content').html(localStorage.cache);
43}

Looking at the tut object in the chrome console

The console.log(tut) will tell you exactly what is getting passed.  If you look at your console carefully, you see that an image is getting passed via the description field.  This means that the <img> tag on line 28 is unncessary.  That image is also returning an error 404 if you look at other parts of the chrome developer javascript console.

If you remove delete the line that contains “<img src” in script.js, this should remove the images that are not rendering because of the 404 errors (404 errors mean that the URL has not been found – the way Tutorialzine places images in their posts must have changed over time) and finish the Tutorialzine Chrome Extension.

Thumbs Up

Good Job!

 

 

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.  

 

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

Leave a Reply