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

Question

So I have an info button, and whenever the user updates the extension, a little red dot shows on the top right, indicating there is an alert (new updates).

How I am doing it now, is by setting a row in localStorage whenever they view the updates-- and if that row is not found then the button will have the red dot.

The problem is, this solution requires me, after every update, to alter a few lines every time I kick off an update, like this:

//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
});

As you can see, every time I update I have to change the "update-x.x.x" string in 3 locations.

So my 2 questions are: - Is there a better way to do this? Maybe a way to determine if a user has updated the extension? - Is image swapping the best way to go about this? Or should I have a red dot image and make that appear and disappear. To me performance difference would seem to be small-- it comes down to whether or not swapping an entire image, or making another image hidden/not hidden is more efficient.

Answer 1

Two things that can help you, both provided by chrome.runtime API:

1. You can detect the first time the extension runs after an update:

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

2. Instead of hardcoding the version number, you can extract it from the manifest:

   chrome.runtime.getManifest().version
   

That said, I think it's perfectly reasonable to update a few constants in the code when you have something to say to the user.

As for the red dot, you can try using a dynamically-constructed icon, by using <canvas> and imageData property when calling setIcon. Or, for simplicity, use a badge with setBadgeText.

Answer 2

With some code changes and chrome apis you should be able to remove the manual constants updates completely. This code is untested and uses the answer from how to compare software version number using js to compare versions.

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
}