Extension Workshop

https://extensionworkshop.com
Admin
Extension Workshop provides comprehensive documentation, guides, and tools for developers to build,...
Tokens:125,627
Snippets:1,099
Trust Score:9.7
Update:18 hours ago
Show doc for...
Tokens:
Raw
### Detect extension installation with runtime.onInstalled

Source: https://extensionworkshop.com/documentation/develop/onboard-upboard-offboard-users/

Listens for the extension's installation event. Skips handling during development when the temporary flag is true. On install, opens the onboarding page in a new tab or popup window.

```javascript
browser.runtime.onInstalled.addListener(async ({ reason, temporary }) => {
  if (temporary) return; // skip during development
  switch (reason) {
    case "install":
      {
        const url = browser.runtime.getURL("views/installed.html");
        await browser.tabs.create({ url });
        // or: await browser.windows.create({ url, type: "popup", height: 600, width: 600, });
      }
      break;
    // see below
  }
});
```

--------------------------------

### Open a start URL with --start-url

Source: https://extensionworkshop.com/documentation/develop/web-ext-command-reference/

Use `--start-url` to open a tab at the specified URL when the browser starts. Declare multiple times to open several tabs. Environment variable: `$WEB_EXT_START_URL`.

```shell
web-ext run --start-url www.mozilla.com
```

```shell
web-ext run --start-url www.mozilla.com --start-url developer.mozilla.org
```

--------------------------------

### Install web-ext with brew

Source: https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/

Installs web-ext using Homebrew. Requires Node.js LTS version.

```shell
brew install web-ext
```

--------------------------------

### Check web-ext version

Source: https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/

Displays the installed web-ext version to verify installation.

```shell
web-ext --version
```

--------------------------------

### Install web-ext with npm

Source: https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/

Installs web-ext globally using npm. Requires Node.js LTS version.

```shell
npm install --global web-ext
```

--------------------------------

### web-ext run with --source-dir option

Source: https://extensionworkshop.com/documentation/develop/web-ext-command-reference/

Example of running web-ext with the --source-dir option to specify the extension source directory.

```shell
web-ext run --source-dir=/path/to/my/extension
```

--------------------------------

### List all commands and options with --help

Source: https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/

Use web-ext --help to list all commands and options. Add a command as an argument to list options for that specific command.

```shell
web-ext --help
```

```shell
web-ext --help run
```

--------------------------------

### Run extension in a specific Firefox version on Windows

Source: https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/

On Windows, the path must include firefox.exe. This example uses the standard Firefox installation path.

```shell
web-ext run --firefox="C:\Program Files\Mozilla Firefox\firefox.exe"
```

--------------------------------

### Manifest.json with no data collection

Source: https://extensionworkshop.com/documentation/develop/firefox-builtin-data-consent/

Example manifest.json that specifies the 'none' required permission to indicate the extension does not collect or transmit any data. Firefox shows a description in the installation prompt and lists 'no data collected' in about:addons.

```json
{
  "manifest_version": 2,
  "name": "extension without data collection",
  "version": "1.0.0",
  "browser_specific_settings": {
    "gecko": {
      "id": "@extension-without-data-collection",
      "data_collection_permissions": {
        "required": ["none"]
      }
    }
  },
  "permissions": [
    "bookmarks",
    "<all_urls>"
  ]
}
```

--------------------------------

### Build with a configuration file

Source: https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/

Specify a configuration file with --config=my-config.mjs to set default values for any option. This example runs the build command with the configuration file.

```shell
web-ext --config=my-config.mjs build
```

--------------------------------

### Home directory config file example

Source: https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/

Creating ~/.web-ext-config.mjs with these contents is equivalent to the shell command shown. The config file sets API key and secret for the sign command.

```js
export default {
  "sign": {
    "apiKey": "<API_KEY>",
    "apiSecret": "<API_SECRET>"
  }
}
```

```shell
web-ext sign --api-key <API_KEY> --api-secret <API_SECRET>
```

--------------------------------

### Manifest.json with required and optional data types

Source: https://extensionworkshop.com/documentation/develop/firefox-builtin-data-consent/

Example manifest.json that specifies one required data type (locationInfo) and one optional data type (technicalAndInteraction). This results in a data collection paragraph in the installation prompt and lists permissions in about:addons.

```json
{
  "manifest_version": 2,
  "name": "Example - Data collection with fallback",
  "version": "1.0.0",
  "permissions": [
    "storage",
    "management"
  ],
  "browser_specific_settings": {
    "gecko": {
        "id": "@example-data-collection-with-fallback",
        "data_collection_permissions": {
          "required": [
             "locationInfo"
          ],
          "optional": [
             "technicalAndInteraction"
          ]
         }
      }
  },
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "browser_action": {},
  "options_ui": {
     "page": "options/page.html"
  }
}
```

--------------------------------

### Run extension with web-ext

Source: https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/

Run this command from the extension's root directory to start Firefox and temporarily load the extension. It has the same limitations regarding prompts for permissions and restart features as about:debugging.

```shell
web-ext run
```
Tokens:
Raw