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

【问题标题】：How to get info from background_page to popup?如何从 background_page 获取信息到弹出窗口？
【发布时间】：2011-06-29 18:11:40
【问题描述】：

我正在关注名为 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);
    }
  }

Chritterbackground.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>

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

【问题讨论】：

标签： google-chrome rss google-chrome-extension xmlhttprequest

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

除非您需要它们在浏览器会话之间持久存在，否则无需将内容存储在本地存储中。除了内容脚本之外，所有扩展脚本都可以直接访问后台页面及其变量。