当前位置： 文江博客话题详情

如何从background_page获取信息到popup？

发布于 2024-11-17 13:06:27 字数 5527 浏览 2 评论 0原文

我正在关注名为 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 获取提取的项目并显示在 弹出窗口上.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>

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

原文

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

旧人 2024-11-24 13:06:27

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

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

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

var items = chrome.extension.getBackgroundPage().items;
回复 原文
待＂谢繁草 2024-11-24 13:06:27

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

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

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

回复 原文
~没有更多了~

关于作者

血之狂魔

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文