windowPopup.js

Question

我正在使用Chrome扩展程序与学区的教师一起使用，这些教师会在弹出窗口中显示重要的公告。 I'm using a published Google Spreadsheet to create a JSON feed 在后台脚本中由jQuery解析。

我希望在更改电子表格中的数据时为扩展程序图标添加徽章，但我不知道如何检查JSON是否已更新。来自Google的JSON有一个日期哈希值（data.feed.updated.$t），我认为这是最佳选择，但我无法说明它使用的格式。

如何在if脚本中编写条件windowPopup.js以检查数据是否已更新？

windowPopup.js

$(document).ready(function() {
  var d = new Date();
  var month = d.getMonth()+1;
  var day = d.getDate();
  var output = (month<10 ? '0' : '') + month + '/' + (day<10 ? '0' : '') + day + '/' + d.getFullYear();
  $('#date').append('<h1>'+output+'</h1>');

  var spreadsheetId = "10j8Ycax02XMkVWMK1v-aYJMHoOjQaLRFuZUOKZEY9nA";

  var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetId + "/od6/public/values?alt=json";

  $.getJSON(url, function(data) {
    var entry = data.feed.entry;

    $(entry).each(function() {
      $('.data').append('<h2>'+this.gsx$title.$t+'</h2><p>'+this.gsx$text.$t+'</p>');
    });

    console.log(data.feed.updated.$t);
    console.log(d);

    // I'm not sure how to check if the data has been updated
    // Currently, these will never match, so it's always badged.

    if(d != data.feed.updated.$t) {
      chrome.browserAction.setBadgeText({
        text: "!"
      });
    }
  });
});

Answer 1

考虑使用localStorage保存JSON响应中的updated时间戳。 Chrome扩展程序可以使用chrome.alarms.create重复调用某个函数，因此您可以检查一个时间间隔（例如，每分钟一次），以评估您的JSON时间戳是否与localStorage中的时间戳不同。

然后，脚本中的条件可以检查是否存在localStorage密钥。如果不存在，则创建它并将其设置为JSON响应的时间戳。这是脚本第一次执行，并且在您创建的alarm下次启动时它将可用。

如果存在，您的脚本可以将本地存储的值与后续JSON请求的updated时间戳进行比较。如果两者匹配，则没有更新。如果它们不同，则会有更新，您可以显示徽章/采取您喜欢的任何其他操作。

以下是实现此目的的一种方法示例：

function isUpdated(jsonTimestamp) {
  var storedTimestamp = localStorage.getItem("last-updated");
  if (storedTimestamp === null) {
    localStorage.setItem("last-updated", jsonTimestamp);
    return false;
  }

  if (storedTimestamp === jsonTimestamp) {
    return false;
  } else {
    localStorage.setItem("last-updated", jsonTimestamp);
    return true;
  }
}

function checkJsonFeed() {
  $.getJSON(url, function(data) {
    var entry = data.feed.entry;

    $(entry).each(function() {
      $('.data').append('<h2>'+this.gsx$title.$t+'</h2><p>'+this.gsx$text.$t+'</p>');
    });

    if (isUpdated(data.feed.updated.$t)) {
      chrome.browserAction.setBadgeText({
        text: "!"
      });
    }
}

checkJsonFeed();
chrome.alarms.create(
  "checkJsonFeed", 
  {
    delayInMinutes: 1,
    periodInMinutes: 1
  }
);

chrome.alarms.onAlarm.addListener(function(alarm) {
  checkJsonFeed();
});

有关localStorage的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

有关Google Chrome扩展程序API中alarms的更多信息：https://developer.chrome.com/apps/alarms

检查JSON是否已使用新数据进行更新

windowPopup.js

1 个答案: