This post is part of a series of posts fixing the Chrome Extension Tutorial from Tutorialzine.com.
[sc:fixing_the_tutorialzine_tutorial_navigation]
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.
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}
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.
| [xyz-ihs snippet=”Fixing-the-Tutorialzine-Chrome-Extension-Tutorial-Series-of-Posts”] |