How to get info from background_page to popup?_问答_开发者

I'm following the official Chrome Extension tutorial called Chritter where they fetch tweets from Twitter and place them into the extension. I'm trying to do similar except im trying to fetch items from an xml file.

My XML

<xml>

<item>
<title>Title 1</title>
<description>Description 1</description>
<duration>55:00</duration>
<published>28/01/2011</published>
</item>

<item>
<title>Title 2</title>
<description>Description 2</description>
<duration>55:00</duration>
<published>28/01/2011</published>
</item>

</xml>

background.html

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript">
            var fetchFreq = 30000; // how often we fetch new items (30s)
            var req; // request object
            var unreadCount = 0; // how many unread items we have
            var items; // all currently fetched items

            getItems();
            //setInterval(getItems, fetchFreq);

            function getItems(){
                req = new XMLHttpRequest();
                req.open("GET", "http://urltoxml.com/xmlfile.xml", false);
                req.onload = processItems;
                req.send();
            }

            function processItems(){

                xmlDoc = req.responseXML;

                items = xmlDoc.getElementsByTagName("item");

                unreadCount += items.length;

                if (unreadCount > 0) {
                    chrome.browserAction.setBadgeBackgroundColor({
                        color: [255, 0, 0, 255]
                    });
                    chrome.browserAction.setBadgeText({text: '' + unreadCount});
                }

                items = xmlDoc.concat(items);
            }
        </script>
    </head>
</html>

I don't know how to get the fetched items from the background.html and displayed onto the popup.html ?

popup.html

<html>
  <head>
    <link rel="stylesheet" href="popup.css" />
    <script src="util.js"></script>
    <script>
      var bg; // background page

      // timeline attributes
      var timeline;
      var template;
      var title;
      var link;
      var description;

      onload = setTimeout(init, 0); // workaround for http://crbug.com/24467

      // initialize timeline template
      function init() {
        chrome.browserAction.setBadgeText({text: ''});
        bg = chrome.extension.getBackgroundPage();
        bg.unreadCount = 0;

        timeline = document.getElementById('timeline');
        template = xpath('//ol[@id="template"]/li', document);
        title = xpath('//div[@class="text"]/span', title);
        content = xpath('//div[@class="text"]/span', template);

        update();
      }

     function update(){

     // how to do this ?
     // See Chritter example below with JSON,
     // except i want to it with xml ?

     }

    </script>
  </head>
  <body>
    <div id="body">
      <ol id="timeline" />
    </div>
    <ol id="template">
      <li>
        <div class="text">
          <a></a>
          <span></span>
        </div>
        <div class="clear"></div>
      </li>
    </ol>
  </body>
</html>

The way the Chritter extension does it only seems to work with JSON. Here is how they do it:

// update display
  function update() {
    var user;
    var url;
    var item;

    for (var i in bg.tweets) {
      user = bg.tweets[i].user;
      url = 'http://twitter.com/' + user.screen_name;

      // thumbnail
      link.title = user.name;
      link.href = openInNewTab(url);
      image.src = user.profile_image_url;
      image.alt = user.name;

      // text
      author.href = openInNewTab(url);
      author.innerHTML = user.name;
      content.innerHTML = linkify(bg.tweets[i].text);

      // copy node and update
      item = template.cloneNode(true);
      timeline.appendChild(item);
    }
  }

Chritter background.html

<html>
  <head>
    <script type="text/javascript">
      var fetchFreq = 30000; // how often we fetch new tweets (30s)
      var req; // request object
      var unreadCount = 0; // how many unread tweets we have
      var tweets; // all currently fetched tweets

      getTweets();
      setInterval(getTweets, fetchFreq);

      // fetch timeline from server
      function getTweets() {
        req = new XMLHttpRequest();
        req.open('GET', 'http://twitter.com/statuses/public_timeline.json');
        req.onload = processTweets;
        req.send();
      }

      // process 开发者_JAVA百科new batch of tweets
      function processTweets() {
        var res = JSON.parse(req.responseText);
        unreadCount += res.length;

        if (unreadCount > 0) {
          chrome.browserAction.setBadgeBackgroundColor({
            color: [255, 0, 0, 255]
          });
          chrome.browserAction.setBadgeText({text: '' + unreadCount});
        }

        tweets = res.concat(tweets);
      }
    </script>
  </head>
</html>

Any help much appreciated! Thanks!

If you want to access items var from a background page then:

var items = chrome.extension.getBackgroundPage().items;

I am not sure what the exact question is, but the general practice is to store the data from background page into localstorage and then access this data from the popup page.

http://www.rajdeepd.com/articles/chrome/localstrg/LocalStorageSample.htm