cross rider extension to fetch new posts from feed using google feeds api

I am trying to create an extension to display all the latest posts fetched from my feed using google feeds api. To implement this, I have added this code in background.js:

appAPI.ready(function() {
// Global variable to hold the toggle state of the button
var buttonState = true;

// Sets the initial browser icon
appAPI.browserAction.setResourceIcon('images/icon.png');
// Sets the tooltip for the button
appAPI.browserAction.setTitle('My Postreader Extension');   
appAPI.browserAction.setPopup({
    resourcePath:'html/popup.html',
    height: 300,
    width: 300
});});

and in popup.html,

 <!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {eval(appAPI.resources.get('script.js'));   }</script>
</head>
<body><div id="feed"></div></body></html>

The script.js file is-

google.load("feeds", "1");

function initialize() {
  var feed = new google.feeds.Feed("http://www.xxxxx.com/feed/");
  feed.setNumEntries(10);
  feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById("feed");
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var div = document.createElement("div");
        var link = document.createElement('a');
        link.setAttribute('href', entry.link);
        link.setAttribute('name', 'myanchor');
        div.appendChild(document.createTextNode(entry.title));
        div.appendChild(document.createElement('br'));
        div.appendChild(link);
        div.appendChild(document.createElement('br'));
        container.appendChild(div);
      }
    }
  });
}
google.setOnLoadCallback(initialize);

But I am unable to get desired result.The popup doesn't display anything.It just remain blank.

Solution

Since you are using a resource file for the popup's content, it's best to load the remote script from the crossriderMain function, as follows:

<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
  appAPI.db.async.get('style-css', function(rules) {
    $('<style type="text/css">').text(rules).appendTo('head');
  });

  appAPI.request.get({
    url: 'http://www.google.com/jsapi',
    onSuccess: function(code) {
      $.globalEval(code);
      appAPI.db.async.get('script-js', function(code) {
        // runs in the context of the extension
        $.globalEval(code.replace('CONTEXT','EXTN'));

        // Alternatively, run in context of page DOM
        $('<script type="text/javascript">').html(code.replace('CONTEXT','PAGE DOM')).appendTo('head');
      });
    }
  });
}
</script>
</head>
<body>
<h1>Hello World</h1>
<div id="feed"></div>
</body>
</html>

[Disclaimer: I am a Crossrider employee]