Is there a way to detect when a user has recently updated their Chrome Extension in order to send them notifications?

I have implemented an info button in my extension, where a red dot appears on the top right corner to alert users of new updates whenever they update the extension.

Currently, I achieve this by storing a row in localStorage when users view the updates. If this row is not found, the button displays the red dot. However, after every update, I need to manually alter code lines like:

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

It's a tedious process as I have to modify the "update-x.x.x" string at multiple places post every update.

This leads me to ask two questions: - Is there a more efficient way to handle this? Perhaps a method to automatically detect if a user has updated the extension? - Should I continue with image swapping or opt for displaying/hiding a red dot image instead? The performance difference might be negligible, but which approach is more optimal?

Answer №1

There are two helpful methods provided by the chrome.runtime API that can assist you:

  1. To detect the initial run of the extension after an update, you can utilize the following code snippet:

    chrome.runtime.onInstalled.addListener( function(details) {
      switch(details.reason) {
        case "install":
          // First installation
          break;
        case "update":
          // Initial run post-update
          break;
      }
    });
    
  2. Instead of manually inputting the version number, you can retrieve it from the manifest using the code below:

    chrome.runtime.getManifest().version
    

It is advisable to update specific constants in the code when necessary to communicate with the user.

Regarding the red dot, you may consider creating a dynamically-generated icon using <canvas> and the imageData property in conjunction with setIcon. Alternatively, for simplicity, you can use a badge along with setBadgeText.

Answer №2

By making adjustments to the code and utilizing Chrome APIs, you can eliminate the need for manual constant updates altogether. This snippet of code, although untested, references a solution on how to compare software version numbers using JavaScript.

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
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you guide me on creating a post and get request using ReactJS, Axios, and Mailchimp?

I am brand new to ReactJS and I am currently working on developing an app that requires integration with Mailchimp to allow users to subscribe to a newsletter. I am looking for assistance on making a request using axios. Where should I input my API key? ...

Managing Numerous Dropdown Menus: Techniques and Tips

I'm currently working with MUI to design a navigation menu that contains dropdowns within certain links. However, I've encountered an issue where clicking on any button opens the same dropdown menu. Below is my code snippet: function Header() { ...

When invoking a function, jQuery may return an empty value

I am currently tweaking my jQuery script to retrieve a specific value upon page refresh in order to capture the return value. Initially, I attempted the following: var email_number = ''; // check if page refreshed or reloaded if (performance.n ...

Having difficulty with Angular's ng-options feature in a Select element

I'm currently tackling an issue with using ng-options to iterate through an array of objects and display specific properties in a select element. Upon querying the api/admin endpoint, I receive JSON data containing details of all users holding the ad ...

How can one display blog data (stored as a PDF) from a database alongside other different results (stored as

I have successfully displayed a PDF file from my database as a blob using the header("Content-type:application/pdf") method. Now, I am looking to also display some additional string results along with this PDF file. Is it feasible to achieve this while d ...

What is the best way to implement an alert box in MVC without triggering a page redirection?

I have a specific requirement to display a custom alert box in order to confirm the user's intention to delete an item. Once the item is deleted, another alert box should appear confirming that the deletion was successful, prompting the user to click ...

Embed the json data within the modal box

I received a JSON response from a php function, and it looks like this: [{"id":"15","activity_type":"call","activity_title":"Call to check "}] Below is the script that triggers the request (actvitiy.js) (Edited) $(document).on("click", ".view_contact_ac ...

Creating an associative array in javascript: A step-by-step guide

I require an array to be structured in the following manner: {"3": {"label":"All i want for christmas", "song":"Alliw_1405399165.mp3", "name":"All i want for christmas"}, "4": {"label":"Call your girlfriend robyn clip", "song":"Gang ...

Manipulating variables across various methods in TypeScript

I have a simple code snippet where two variables are defined in the Main method and I need to access them from another method. However, I am encountering an issue with 'variables are not defined', even though I specified them in the declerations ...

Distinguishing Between server.listen() and app.listen() in Google Apple Engine

I am currently working on a NodeJS + Express application. While running it locally, I have the following code: const port = 3001; server.listen(port, () => { console.log(`App listening on port ${port}`); }); However, when deploying to GAE, I switch ...

Prevent the execution of a post request function depending on the promise result?

When I handle a POST request in express, I am required to retrieve data from a mongoDB cluster and then respond accordingly based on the retrieved response. app.post('/api/persons', (req, res) => { const data = req.body; if (!data.name || ...

"Disabling Dropzone.js functionality once a file has been selected - here's how

When using my dropzone, I typically choose a file to save first and then click the save button. However, I am facing an issue: how can I disable the dropzone area after selecting a file? I attempted the following approach: accept: function (file, done) { ...

Merging classes from several files into a unified namespace in typescript

When working with typescript, my goal is to instantiate a class by using its name as a string. After some research, I discovered the following approach: const googlecommand = Object.create((Commands as any)['GoogleCommand'].prototype); This lin ...

What is the best way to access and extract values from Material-UI TextFields within a Dialog component using React?

Here is the dialog that I am working with: <Dialog> <DialogContent sx={{ display: "flex", flexDirection: "column" }}> <TextField id="item-name" label="Item Name" /> <Tex ...

Performing synchronous POST requests to manipulate data in a SQL database using AJAX

My goal is to send synchronous calls to a page that will handle the SQL insertion of words I am posting. However, due to the large number of chunks and the synchronous nature of SQL, I want each AJAX call to be processed one after another. for (chunk = 1; ...

managing arrays in JavaScript with multiple tables

**I have successfully written code for calculating the sum of inputs in one table** $('#example122').on('input', '.calculate', function () { calculateTotal(); }); function calculateTotal() { var grandTotal = 0; $ ...

The input type "number" does not seem to be compatible with the currency pipe feature

The currency pipe seems to not be working when using the input type number. The web page is not displaying any value. I have searched various blogs and it appears that the currency pipe only works with input type text, but my requirement necessitates the ...

What is the best way to monitor different selections to keep track of their state?

In a certain scenario, a user is presented with three options: They can select the body_type of a car, the car_year it was manufactured, or the car_make. Initially, there is a state called carJson which contains a list of cars. "2": { " ...

The Power of Javascript in Enhancing Lightbox Experience

I am trying to enhance an image outputted by JavaScript with Lightbox functionality. Since the image link is dynamically created, I am approaching it this way! Despite searching on Stack Overflow, I have not found a solution that fits my needs... The cur ...

What is the reason why the show() function in JQuery only applies to one specific element, rather than all elements selected with the same selector?

JSFiddle. This example code features a nested <table> within another <table>. The main issue concerns the click listener for the #add button. Specifically, the final if/else statement in the function. When you execute this code and click the ...