The Web Monetization browser extension is an open source implementation of the Web Monetization draft specification - learn more here. The extension is built with React and TypeScript.
- NVM (Linux, macOS), NVM Windows (Windows) - or another Node Version Manager
# Install Node 20
# For Linux/macOS
nvm install lts/iron
nvm use lts/iron
# For Windows
nvm install lts
nvm use lts
# Install correct version of pnpm using Corepack (Corepack comes with Node)
corepack enable
To install dependencies, execute:
pnpm i
All commands are run from the root of the project, from a terminal:
Command | Action |
---|---|
pnpm dev [target] |
Builds the extension for development, rebuilding on source code changes, for a specified target (chrome or firefox ). If the target is not specified the script will build the extension for a Chromium based browser. Output folder: dev . |
pnpm build [TARGET] --channel=CHANNEL |
Builds the extension for production usage, for a specified target (chrome or firefox ) and channel (nightly , preview or stable ). If the target is not specified the script will build the extension for all available targets. If the channel is not specified the script will build the extension for the nightly channel. Output folder: dist . |
pnpm test |
Runs all test files using Jest. |
Installing the extension from source, in Chromium based browsers (Chrome, Opera, Edge, Brave, Arc, Vivaldi)
-
Build the extension with
pnpm build chrome
-
Open extensions page
In Chrome, click the three dots in the top-right corner. Look for theExtensions
options and selectManage extensions
. -
Enable developer mode
To enableDeveloper mode
, use the switch at the top-right of the extensions page. -
Load the extension
After enablingDeveloper mode
, new buttons should appear in the top-left corner. Click theLoad unpacked
one and choose the folder that contains the extension files (in thedist
folder, look for thechrome
one with themanifest.json
file).
-
Build the extension with
pnpm build firefox
-
Open Firefox's add-ons page
Open Firefox, click the three horizontal lines in the top-right corner, and chooseAdd-ons and themes
. -
Navigate to the add-ons debugging page
In the add-ons page, click the gear icon and select "Debug Add-ons". -
Load the extension
Look for theTemporary Extensions
section and expand its content. After expanding its content click on theLoad Temporary Add-on...
button and select themanifest.json
file (in thedist
folder, go in thefirefox
folder and select the manifest file).
Inside this project, you'll see the following folders and files:
.
├── .github/ # GitHub Workflows
├── docs/ # Repository documentation
├── esbuild/ # Esbuild configuration
├── scripts/ # Script to build the extension (production, development)
├── src/ # Extension's source code
│ ├── _locales/ # Files for multi-lang support
│ ├── assets/ # Images for the extension (icon, etc.)
│ ├── background/ # Source code for the background script/service worker
│ ├── content/ # Source code for the content scripts
│ │ └── keyAutoAdd/ # content scripts for automatic key addition to wallets
│ ├── popup/ # Source code for the popup UI
│ ├── pages/ # Source code for additional extension pages
│ ├── shared/ # Shared utilities
│ └── manifest.json # Extension's manifest - processed by Webpack depending on the target build
├── jest.config.ts
├── jest.setup.ts
├── package.json
├── tailwind.config.ts
└── tsconfig.json
Please read the contribution guidelines before submitting contributions. All contributions must adhere to our code of conduct.
See the open issues for a full list of proposed features (and known issues).
If you encounter any issues or have feedback, please open an issue on the GitHub repository. We appreciate your feedback and contributions!
This project is licensed under the Apache License 2.0 - see the LICENSE file for details