Web Extension Lifecycle

If you could follow along so far well amazing work because we have a working Chrome extension that does all functionalities that we wanted it to do

But when a new user starts to use it it’s always a good practice to give them some kind of guidance

So that’s exactly what we’re going to do

And to achieve that we can listen to some of the web extensions’ lifecycle events

Lifecycle events

We can listen to onInstalled which can be installed or updated but even when the Chrome browser is updated

We can listen to startup when the browser starts but we could also connect to an event called onUpdateAvailable which is fired when there’s a newer version of our extension available in the web store

And although it’s technically not possible to execute code if a user uninstalls our application but we can still ask for feedback and I will show you how to do it at the end of this lesson

Creating a welcome experience

I want to show a simple step-by-step instruction to our users when they first start using our extension and I will use the onInstalled listener

But first let’s add some changes to our notes page

You could create a totally new page

That would be okay but we already had notes so I will just adjust this

// background.ts
browser.runtime.onInstalled.addListener(async (details) => {
  if (details.reason === 'install') {
    // First time installation
    await browser.tabs.create({
      url: browser.runtime.getURL('/notes.html?welcome=true')
    });
  }
});

Perfect

Now when a user installs the extension for the first time it opens the notes page with a welcome parameter

Detecting welcome mode

In your notes page check for the welcome parameter

// notes/main.ts
const urlParams = new URLSearchParams(window.location.search);
const isWelcome = urlParams.get('welcome') === 'true';

if (isWelcome) {
  document.getElementById('welcome').style.display = 'block';
  document.getElementById('notes-grid').style.display = 'none';
  document.getElementById('no-notes').style.display = 'none';
  return; // Skip loading notes
}

// Otherwise load notes normally
loadNotes();

Add a welcome section to your HTML

<div id="welcome" style="display: none;">
  <h2>Welcome to TabNotes!</h2>
  <ol>
    <li>Pin the extension for easy access</li>
    <li>Click the icon on any webpage</li>
    <li>Start typing your notes</li>
    <li>Notes are automatically saved</li>
  </ol>
</div>

Perfect

Now new users get a helpful welcome message when they first install the extension

Handling updates

You can also handle when the extension is updated

browser.runtime.onInstalled.addListener(async (details) => {
  if (details.reason === 'update') {
    const previousVersion = details.previousVersion;
    const currentVersion = browser.runtime.getManifest().version;
    
    // Show changelog or new features
    await browser.tabs.create({
      url: browser.runtime.getURL(`/changelog.html?from=${previousVersion}`)
    });
  }
});

Uninstall feedback

While you can’t run code after uninstall you can set an uninstall URL to gather feedback

browser.runtime.onInstalled.addListener(() => {
  browser.runtime.setUninstallURL('https://yoursite.com/feedback');
});

When users uninstall your extension this URL opens in their browser allowing you to ask why they’re leaving

Browser startup

You can also listen for when the browser starts

browser.runtime.onStartup.addListener(() => {
  // Browser was just started
  // Useful for refreshing data or checking for updates
  console.log('Browser started with extension installed');
});

What’s next

We’ve added a welcome experience for new users

In the next chapter we’ll wrap up our extension and prepare it for submission