如何知道用户最近是否更新了他们的 Chrome 扩展程序以便我可以提醒他们

Question

所以我有一个信息按钮，每当用户更新扩展程序时，右上角会显示一个小红点，表示有一个警报（新更新）。

我现在的做法是，每当他们查看更新时在 localStorage 中设置一行——如果找不到该行，则该按钮将显示红点。

问题是，这个解决方案要求我在每次更新后每次开始更新时更改几行，如下所示：

//1.1.2 was the last version
localStorage.removeItem("update-1.1.2");

...

if( localStorage.getItem("update-1.1.3") === null ) {
  //show button image with red dot
}
else {
  //show button image without red dot
}

...

$('#info').click(function() 
{
  localStorage.setItem("update-1.1.3", "YES");
  //swap the button image w/ red dot, with the same image w/o the red dot
});

如您所见，每次更新我都必须更改 3 个位置的 "update-x.x.x" 字符串。

所以我的两个问题是： - 有一个更好的方法吗？也许是一种确定用户是否更新了扩展程序的方法？ - 图像交换是解决此问题的最佳方式吗？或者我应该有一个红点图像并让它出现和消失。对我来说，性能差异似乎很小——这取决于是否交换整个图像，或隐藏另一张图像 hidden/not 是否更有效。

Answer 1

chrome.runtime API 提供的两件事可以帮助您：

您可以检测到扩展程序在更新后首次运行的时间：

chrome.runtime.onInstalled.addListener( function(details) {
  switch(details.reason) {
    case "install":
      // First installation
      break;
    case "update":
      // First run after an update
      break;
  }
});

您可以从清单中提取版本号，而不是对版本号进行硬编码：
```
chrome.runtime.getManifest().version
```

也就是说，我认为当您有话要对用户说时，更新代码中的一些常量是完全合理的。

关于红点，你可以尝试使用动态构造的图标，调用setIcon时使用<canvas>和imageData 属性。或者，为简单起见，使用带有 setBadgeText.

的徽章

Answer 2

通过一些代码更改和 chrome api，您应该能够完全删除手动常量更新。此代码未经测试，并使用 how to compare software version number using js 的答案来比较版本。

var previousVersion = localStorage.getItem('previousVersion') || "0";
var currentVersion = chrome.runtime.getManifest().version;
var versionComparison = versionCompare(previousVersion, CurrentVersion);

if (previsouVersion === "0") {
    // new install
} else if (versionComparison == -1) {
    // version is upgraded
} else if (versionComparison == 0) {
    // version is the same
}

如何知道用户最近是否更新了他们的 Chrome 扩展程序以便我可以提醒他们

How to know if the user has recently updated their Chrome Extension so I can alert them

javascript

google-chrome

local-storage

google-chrome-extension