Question

我正在关注名为Chritter的官方Chrome扩展程序教程，他们从Twitter获取推文并将其放入扩展程序。我试图做类似的事情，除了我试图从xml文件中获取项目。

我的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>

我不知道如何从background.html获取所提取的项目并显示在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>

Chritter扩展程序的方式似乎只适用于JSON。他们是这样做的：

// 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 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>

任何帮助非常感谢！谢谢！

Answer 1

如果您想从后台页面访问items var，请：

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

Answer 2

我不确定具体问题是什么，但一般做法是将数据从后台页面存储到localstorage中，然后从弹出页面访问这些数据。

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

如何从background_page获取信息到弹出窗口？

2 个答案: