Question

每次扩展程序刷新时，它都会复制整个feed.json。如何防止这种情况，只在feed.json（更新时）添加新项目？另外，如何在添加新项目时设置badgeText？

这是我到目前为止所得到的：

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"
}

提前致谢。扩展程序的目的是从feed.json获取新项目并在popup.html中显示。可以把它想象成推特推文的推文阅读器。

Answer 1

我知道现在看起来很好，但是拥有一个全局req对象可能不如每个请求都有一个安全。

您似乎永远不会清除items。您的弹出窗口和背景应该进行通信。后台应分别保存新旧Feed，当弹出窗口显示它们时，应释放它们。

例如，考虑将旧项目保存在数组中，将新项目保存在单独的数组中。然后当弹出窗口向用户显示新的提要时，它可以调用bg.clearItems()，它会将新的提要复制到旧的数组中，然后在下一个请求中将新项目放入现在为空的状态新项目数组。

Chrome扩展程序：避免重复？

1 个答案: