# How to simulate the add-on install steps

**URL:** <https://discourse.mozilla.org/t/how-to-simulate-the-add-on-install-steps/88387>\
**Category:** Development\
**Tags:** learning\
**Created:** [November 10, 2021, 2:24pm UTC](https://discourse.mozilla.org/t/how-to-simulate-the-add-on-install-steps/88387 "2021-11-10T14:24:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrchrisadams](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mrchrisadams/32/31146_2.png) [@mrchrisadams](https://discourse.mozilla.org/u/mrchrisadams)\
**Post date:** [November 10, 2021, 2:24pm UTC](https://discourse.mozilla.org/t/how-to-simulate-the-add-on-install-steps/88387/1 "2021-11-10T14:24:57Z")

</div>

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:

> **[GitHub - thegreenwebfoundation/web-extension: The Green Web Addon based on Web Extensions](https://github.com/thegreenwebfoundation/web-extension)**
>
> The Green Web Addon based on Web Extensions

And you can see some design mockups I intend to implement here:

> **[Web extensions](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?

> **[Onboard, upboard, offboard users](https://extensionworkshop.com/documentation/develop/onboard-upboard-offboard-users/)**
>
> Learn best practices for onboarding, upboarding, and offboarding users in your Firefox extension to always create a great impression.

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

```js
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?

---

<div class="post-metadata">

**Author:** ![mrchrisadams](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mrchrisadams/32/31146_2.png) [@mrchrisadams](https://discourse.mozilla.org/u/mrchrisadams)\
**Post date:** [November 10, 2021, 6:07pm UTC](https://discourse.mozilla.org/t/how-to-simulate-the-add-on-install-steps/88387/2 "2021-11-10T18:07:46Z")

</div>

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

```auto
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](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/#using-the-command-line) after all.

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

```auto
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?

---

<div class="post-metadata">

**Author:** ![juraj.masiar](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/juraj.masiar/32/30587_2.png) [@juraj.masiar](https://discourse.mozilla.org/u/juraj.masiar)\
**Post date:** [November 10, 2021, 7:56pm UTC](https://discourse.mozilla.org/t/how-to-simulate-the-add-on-install-steps/88387/3 "2021-11-10T19:56:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mrchrisadams](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mrchrisadams/32/31146_2.png) [@mrchrisadams](https://discourse.mozilla.org/u/mrchrisadams)\
**Post date:** [November 11, 2021, 9:36am UTC](https://discourse.mozilla.org/t/how-to-simulate-the-add-on-install-steps/88387/4 "2021-11-11T09:36:28Z")

</div>

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

> [@juraj.masiar](#):
>
> 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.

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

> **[runtime.setUninstallURL() - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/setUninstallURL)**
>
> Sets the URL to be visited when the extension is uninstalled. This can be used to clean up server-side data, do analytics, or implement surveys. The URL can be up to 1023 characters. This limit used to be 255, see Browser compatibility for more...

So you might have some code like this, presumably

```auto
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);

```