Introduction

All of @webext-core's packages are provided via NPM. Depending on your project's setup, you can consume them in 2 different ways:

  1. If your project uses a bundler or framework (like Vite, Webpack, WXT, or Plasmo), see Bundler Setup.
  2. If your project does not use a bundler, see Non-bundler Setup

Bundler Setup

If you haven't setup a bundler yet, I recommend using WXT for the best DX and to support all browsers.

pnpm dlx wxt@latest init

Install any of the packages and use them normally. Everything will just work šŸ‘

pnpm i @webext-core/storage

import { localExtStorage } from '@webext-core/storage';

const value = await localExtStorage.getItem('some-key');

Non-bundler Setup

If you're not using a bundler, you'll have to download each package and put it inside your project.

Why download them?

All of @webext-core NPM packages include a minified, lib/index.global.js file that will create a global variable you can use to access the package's APIs.

Lets say you've put all your third-party JS files inside a vendor/ directory, and want to install the @webext-core/storage package.

.
ā”œā”€ vendor
ā”‚  ā””ā”€ jquery.min.js
ā””ā”€ manifest.json

You can download the package like so:

mkdir -p vendor/webext-core
curl -o vendor/webext-core/storage.js https://cdn.jsdelivr.net/npm/@webext-core/storage/lib/index.global.js

You project should now look like this:

.
ā”œā”€ vendor
ā”‚  ā”œā”€ jquery.min.js
ā”‚  ā””ā”€ webext-core
ā”‚     ā””ā”€ storage.js
ā””ā”€ manifest.json

Now you can include the vendor/webext-core/storage.js file in your extension! Each package sets up it's own global variable, so refer to the individual docs for that variable's name. In this case, it's webExtCoreStorage.

HTML Files
<head>
  <script src="/vendor/webext-core/storage.js"></script>
  <script>
    const { localExtStorage } = webExtCoreStorage;

    const value = await localExtStorage.getItem('some-key');
  </script>
</head>
Content Scripts
"content_scripts": [{
  "matches": [...],
  "js": ["vendor/webext-core/storage.js", "your-content-script.js"]
}]
MV2 Background
"background": {
  "scripts": ["vendor/webext-core/storage.js", "your-background-script.js"]
}
MV3 Background

For MV3 background scripts, you need to use a bundler since background.service_worker only accepts a single script.

Table of Contents