Chrome Extension: avoid duplicates?_问答_开发者

开发者 https://www.devze.com 2023-03-16 05:52 出处：网络

Everytime the extension refreshes it duplicates the entire f开发者_如何学Ceed.json. How do I prevent this and only add new items from feed.json (when that is updated) on top of the old ones? Also how

Everytime the extension refreshes it duplicates the entire f开发者_如何学Ceed.json. How do I prevent this and only add new items from feed.json (when that is updated) on top of the old ones? Also how do I only set the badgeText when new items have been added?

Here's what I got so far:

background.html

<html>
  <head>
    <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://siteurl.com/feed.json');
        req.onload = processItems;
        req.send();
      }

      function processItems() {
        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});
        }

        items = res.concat(items);
      }
    </script>
  </head>
</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 link;
      var image;
      var author;
      var content;

      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);
        link = xpath('//div[@class="thumbnail"]/a', template);
        image = xpath('img', link);
        author = xpath('//div[@class="text"]/a', template);
        content = xpath('//div[@class="text"]/span', template);

        update();
      }

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

        for (var i in bg.items) {
          user = bg.items[i];

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

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

          // copy node and update
          item = template.cloneNode(true);
          timeline.appendChild(item);
        }
      }
    </script>
  </head>
  <body>
    <div id="body">
      <div id="title">
        <h2>Chrome Extension</h2>
      </div>
      <ol id="timeline" />
    </div>
    <ol id="template">
      <li>
        <div class="thumbnail">
          <a>
            <img />
          </a>
        </div>
        <div class="text">
          <a></a>
          <span></span>
        </div>
        <div class="clear"></div>
      </li>
    </ol>
  </body>
</html>

feed.json

{
"name":"John Doe",
"about":"I am me",
"thumbnail":"http://thumbnail.jpg",
"profileurl":"http://siteurl.com/profileurl.php"
}

Thanks in advance. The extension's purpose is to fetch new items from feed.json and show in the popup.html. Think of it like a feed reader for new twitter tweets.

I know it seems fine now, but having a single global req object is probably not as safe as having one for each request.

You don't seem to ever be clearing the items. Your popup and background should communicate. The background should hold the new and old feeds separately and when the popup shows them, should release them.

Consider, for example, holding the old items in an array, and the new ones in a separate array. And then when the popup shows the new feeds to the user it can call bg.clearItems() which will copy the new ones into the array of the old ones, and then on the next request the new items are put into the now-empty new items array.