如何從background_page獲取信息到彈出窗口？

我正在使用名爲Chritter的官方Chrome擴展教程，他們從Twitter獲取推文並將其放入擴展中。我試圖做類似的嘗試從xml文件中獲取項目。如何從background_page獲取信息到彈出窗口？

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

任何幫助，非常感謝！謝謝！

來源

2011-06-29 Jonathan

如果你想從此背景頁面訪問items VAR：

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

來源

2011-06-29 19:02:02 serg

我不確定確切的問題是什麼，但一般的做法是將數據從背景頁面存儲到localstorage中，然後從彈出頁面訪問這些數據。

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

來源

2011-06-29 18:24:37

有沒有需要存儲的東西在本地存儲，除非你需要他們的瀏覽器會話之間持續存在。除內容腳本外，所有擴展腳本都可以直接訪問後臺頁面及其變量。 – brymck

我同意....... –

如何從background_page獲取信息到彈出窗口？

回答

相關問題