chore: update README #188
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,103 +1,125 @@ | ||
| <h1 align="center">Web Monetization Extension</h1> | ||
|
|
||
|  | ||
| [](https://prettier.io/) | ||
|
|
||
| </center> | ||
| Web Monetization is a browser extension that detects Web Monetization on websites using a browser API that allows the | ||
raducristianpopa marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
There was a problem hiding this comment. Suggesting rewording: This extension detects whether a user is focused on a website that is Web Monetization enabled, and then makes it possible for the user to decide if they want to streaming payments from the user's authorized digital wallet to the website. |
||
| creation of a payment stream from the user agent to the website. This extension is built with React and TypeScript. | ||
|
|
||
| ## Local Development Environment | ||
|
|
||
| ### Prerequisites | ||
|
|
||
| - [NVM](https://github.com/nvm-sh/nvm) - or another Node Version Manager | ||
| - [PNPM](https://pnpm.io/) | ||
|
|
||
| ## Setup | ||
|
|
||
| ### Environment Setup | ||
|
|
||
| ```sh | ||
| # 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`: | ||
|
|
||
| ```sh | ||
| npm install -g pnpm | ||
| # or | ||
| yarn install -g pnpm | ||
| ``` | ||
|
|
||
| For alternative methods of installing `pnpm`, you can refer to the [official `pnpm` documentation](https://pnpm.io/installation). | ||
|
|
||
| To install dependencies, execute: | ||
|
|
||
| ```sh | ||
| 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. <b>Build the extension with `pnpm build chrome`</b> | ||
|
|
||
| 1. <b>Open extensions page</b><br/> | ||
| In Chrome, click the three dots in the top-right corner. Look for the `Extensions` options and select `Manage extesions`. | ||
|
|
||
| 1. <b>Enable developer mode</b><br/> | ||
| To enable `Developer mode`, use the switch at the top-right of the extensions page. | ||
|
|
||
| 1. <b>Load the extension</b><br/> | ||
| After enabling `Developer mode`, new buttons should appear in the top-left corner. Click the `Load unpacked` one and choose the <b>folder</b> 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. <b>Build the extension with `pnpm build firefox`</b> | ||
|
|
||
| 1. <b>Open Firefox's add-ons page</b><br/> | ||
| Open Firefox, click the three horizontal lines in the top-right corner, and choose `Add-ons and themes`. | ||
|
|
||
| 1. <b>Navigate to the add-ons debugging page</b><br/> | ||
| In the add-ons page, click the gear icon and select "Debug Add-ons". | ||
|
|
||
| 1. <b>Load the extension</b><br/> | ||
| 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](.github/CONTRIBUTING.md) before submitting contributions. All contributions must adhere to our [code of conduct](.github/CODE_OF_CONDUCT.md). | ||
|
|
||
| ## Roadmap | ||
|
|
||
| [Web Monetization Roadmap](https://github.com/orgs/interledger/projects/6/views/1?filterQuery=label%3A%22web+monetization%22) | ||
|
|
||
| See the [open issues](https://github.com/interledger/web-monetization-extension/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](https://github.com/interledger/web-monetization-extension/issues). We appreciate your feedback | ||
| and contributions! | ||
|
|
||
| ## License | ||
|
|
||
| This project is licensed under the Apache License 2.0 - see the [LICENSE](./LICENSE) | ||
| file for details | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
did you want to do
<h1 text-align="center">Web Monetization Extension</h1>?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nope,
alignis what I wanted to do.Edit:
text-aligndoesn't seem to work https://github.com/interledger/web-monetization-extension/blob/ead6dac96065ef328384edcdb584817e30f52b9e/README.md.