I am trying to do a RSS reader chrome extension based on an example from lifehacker (http://lifehacker.com/5857721/how-to-build-a-chrome-extension). I did my own based on that. It didn’t work. I tried their source code and it worked perfectly fine(for lifehacker), but when I changed the xml source as http://www.engadget.com/rss.xml it only showed an empty square.If anyone can point any mistake or error, I would be truly thankful.My files are :
manifest.json
{
"name": "RSS Fetcher",
"version": "0.1",
"description": "engadget rss reader.",
"homepage_url": "http://www.engadget.com/",
"background_page": "background.html",
"permissions": [
"<all_urls>",
"http://www.engadget.com/*"
],
"browser_action": {
"default_title": "engadget reader",
"default_popup": "popup.html"
}
}
background.html
<html>
<head>
<script src='scripts/jquery-1.6.1.min.js'></script>
<script src="scripts/parse.js"></script>
<script>
function fetch_feed(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(data) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
callback(data);
} else {
callback(null);
}
}
}
// Note that any URL fetched here must be matched by a permission in
// the manifest.json file!
xhr.open('GET', url, true);
xhr.send();
}
function onRequest(request, sender, callback) {
if (request.action == 'fetch_feed') {
fetch_feed(request.url, callback);
}
}
// Wire up the listener.
chrome.extension.onRequest.addListener(onRequest);
</script>
</head>
<body>
</body>
</html>
popup.html
<html>
<head>
<script src='scripts/jquery-1.6.1.min.js'></script>
<script src="scripts/parse.js"></script>
<script>
function fetch_feed() {
chrome.extension.sendRequest({'action' : 'fetch_feed', 'url' : 'http://www.engadget.com/rss.xml'},
function(response) {
display_stories(response);
}
);
}
function display_stories(feed_data) {
var xml_doc = $.parseXML(feed_data);
$xml = $(xml_doc);
var items = $xml.find("item");
$('#popup').html('<img src="images/logo.png" id="logo" onclick="open_item(\'http://engadget.com/\'); window.close();" /><br clear="all" />');
items.each(function(index, element) {
var post = parse_post(element);
var item = '';
var class2 = '';
if (index >= localStorage['unread_count']) {
// // console.log('visited');
item += '<div class="post read">';
}
else {
item += '<div class="post">'
}
item += '<span class="tag">' + post.tag + '</span>\
<a href="' + post.url + '">\
<div id="' + post.id + '" class="item" onclick="open_item(\'' + post.url + '\');">\
<img src="' + post.img + '" width="107" height="60" />\
<h4>' + post.title + '</h4>\
<span class="description">' + post.description + '...</span>\
</div>\
</a>';
item += '</div>';
$('#popup').append(item);
});
}
</script>
<link rel="stylesheet" href="styles/post.css" type="text/css" />
</head>
<body>
<div id="popup">
</div>
<script>
$(document).ready(function() {
fetch_feed();
});
</script>
</body>
</html>
parse.js
function parse_post(element) {
// console.log(element);
var post = new Object();
post.title = $(element).find("title").text();
post.tag = post.title.split('[')[1].split(']')[0];
post.title = post.title.split('[')[0];
post.id = $(element).find("guid").text();
post.url = $(element).find('link').text();
post.description = $("<div/>").html($(element).find("description")).text();
post.img = $('img', post.description)[0].src; //107x60px
var shorten = 120;
if (post.title.length > 80) {
shorten = 70;
}
post.description = $.trim($(post.description).text());
post.description = post.description.substr(0, shorten);
// console.log(post);
return post;
}
function open_item(url) {
chrome.tabs.create({url: url});
chrome.browserAction.setBadgeText({text:''});
}
I also used jquery-1.6.1.min.js
Anything helps:) Thanks in advance!
not sure “all_urls” works in your manifest.json, remove that and give it a try