Web Monetization Extension

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.

Local Development Environment

Prerequisites

• NVM - or another Node Version Manager
• PNPM

Setup

Environment Setup

# Install Node 20
nvm install lts/iron
nvm use lts/iron

# Install pnpm using Corepack
corepack enable

If you do not have corepack installed locally you can use npm or yarn to install pnpm:

npm install -g pnpm
# or
yarn install -g pnpm

For alternative methods of installing pnpm, you can refer to the official pnpm documentation.

To install dependencies, execute:

pnpm i

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm dev <TARGET>	Builds the extension for development, 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>	Builds the extension for production usage, for a specified target (chrome or firefox). If the target is not specified the script will build the extension for all available targets. 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)

1. Build the extension with pnpm build chrome

2. Open extensions page
   In Chrome, click the three dots in the top-right corner. Look for the Extensions options and select Manage extesions.

3. Enable developer mode
   To enable Developer mode, use the switch at the top-right of the extensions page.

4. Load the extension
   After enabling Developer mode, new buttons should appear in the top-left corner. Click the Load unpacked one and choose the folder that contains the extension files (in the dist folder, look for the chrome one with the manifest.json file).

Installing the extension from source, in Firefox

1. Build the extension with pnpm build firefox

2. Open Firefox's add-ons page
   Open Firefox, click the three horizontal lines in the top-right corner, and choose Add-ons and themes.

3. Navigate to the add-ons debugging page
   In the add-ons page, click the gear icon and select "Debug Add-ons".

4. Load the extension
   Look for the Temporary Extensions section and expand its content. After expanding its content click on the Load Temporary Add-on... button and select the manifest.json file (in the dist folder, go in the firefox folder and select the manifest file).

Project structure

Inside this project, you'll see the following folders and files:

.
├── .github/ # GitHub Workflows
├── 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
│   ├── content/ # Source  code for the content script
│   │   ├── static/ # WM polyfill
│   ├── popup/ # Source code for the popup UI
│   └── shared/ # Shared utilities
├── webpack/ # Webpack configuration
├── jest.config.ts
├── jest.setup.ts
├── package.json
├── tailwind.config.ts
└── tsconfig.json

Contributing

Please read the contribution guidelines before submitting contributions. All contributions must adhere to our code of conduct.

Roadmap

Web Monetization Roadmap

See the open issues for a full list of proposed features (and known issues).

Feedback and Issues

If you encounter any issues or have feedback, please open an issue on the GitHub repository. We appreciate your feedback and contributions!

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details