0

Каждый раз, когда расширение обновляется, оно дублирует все feed.json. Как я могу предотвратить это и добавлять только новые элементы из feed.json (когда это обновление) поверх старых? Также как установить только badgeText при добавлении новых элементов?Расширение Chrome: избегайте дубликатов?

Вот что я получил до сих пор:

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. Подумайте об этом, как читатель каналов для новых твиттер-твитов.

ответ

1

Я знаю, что это кажется прекрасным сейчас, но наличие единого глобального объекта req, вероятно, не так безопасно, как наличие одного для каждого запроса.

Вы, кажется, никогда не очищаете items. Ваше всплывающее окно и фон должны общаться. Фон должен содержать новый и старый каналы отдельно, и когда всплывающее окно показывает их, их следует отпустить.

Рассмотрите, например, сохранение старых элементов в массиве и новые в отдельном массиве. А затем, когда всплывающее окно показывает новые каналы для пользователя, он может вызвать bg.clearItems(), который скопирует новые в массив старых, а затем при следующем запросе новые элементы будут помещены в новый массив новых элементов.

Смежные вопросы