How to simulate the add-on install steps

Add-ons Development
#1

Hi there.

I’m planning to give this browser extension some very long overdue love, and update it to bring it in-line with the newer best practices around UX, privacy and transparency in terms of how browser extensions work.

You can see the code in its current state now:

And you can see some design mockups I intend to implement here:
https://miro.com/app/board/o9J_kvaKopo=/

I’m looking for help with a few things though, as I can’t find the pointers in the docs.

1. how can I simulate installation and updates programatically?

I want to implement some nice onboarding, upboarding and offboarding screens - is there a recommended way to do this?

I’m talking about working on these steps here - is there a workflow that doesn’t involve manually installing and uninstalling every time?

I’m aware of some of the triggers outlined below:

browser.runtime.onInstalled.addListener((details) => {

  // (abridged code, details omitted)

    switch (details.reason) {
      case "install":
        // show installation onboarding page
        browser.tabs.create({
          url: browser.runtime.getURL("/views/installation/index.html"),
          active: true
        });
      break;

      case "update":
        // show update notification
          displayNotification(title, updateMessage)
      break;    
    }
  });
});

But I’m not aware how to trigger these programaticaly when using something like web-ext. Is there a way to do this?

2. How should I test this?

Is there a way to test this, so I use CI to check that these screens show during installation or update steps?

#2

Ah, it turns out that if you have code like so:

browser.runtime.onInstalled.addListener((details) => {
  switch (details.reason) {
    case "install":
      // show installation onboarding page
      browser.tabs.create({
        url: browser.runtime.getURL("/installation.html"),
        active: true
      });
      break;
  }
});

Then you can use web-ext after all.

If you run the following code on a project using web-ext:

npx web-ext run  --browser-console

Then this will default to spinning up a fresh browser, with a fresh install of your extension.

The --browser-console bit opens up a console listening to output from the background.js as specificied in your manifest.json file, and the function will be called, with the install case matching to automatically open the installation.html page.

This is enough to simulate an install and design a nicer onboarding experience.

I’m not sure how to simulate an update or an exit though - are there ways to trigger the other events?

#3

I’m pretty sure that running web-ext run will trigger the onInstalled event with "install" reason.
Regarding update, you just increase the version number in your manifest file and the “web-ext” will reload your extension and the event will fire with "update" reason.

1 Like
#4

Ah, I didn’t know this was possible - this super helpful, thanks!

That just leaves a way to the offboard, and I think this snippet here outlines that part.

So you might have some code like this, presumably

let settingUrl = browser.runtime.setUninstallURL("https://example.org/extension-goodbye");

function onSetURL() {
  console.log("set uninstall URL");
}

function onError(error) {
  console.log(`Error: ${error}`);
}

// might not be necessary, but probably useful in dev at least
settingUrl.then(onSetURL, onError);