-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore: update README #188
Merged
Merged
chore: update README #188
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
f0f0361
README update
raducristianpopa e927e1b
README update
raducristianpopa 2886a26
README update
raducristianpopa f24fb3c
Address feedback
raducristianpopa ead6dac
Test `text-align`
raducristianpopa ee22858
Revert "Test `text-align`"
raducristianpopa File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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,123 @@ | ||
| ## Web Monetization Extension | ||
| <h1 align="center">Web Monetization Extension</h1> | ||
|
|
||
|  | ||
| [](https://prettier.io/) | ||
|
|
||
| Web Monetization is a browser extension that detects Web Monetization on websites using a browser API that allows the | ||
| creation of a payment stream from the user agent to the website. This extension is built with React, TypeScript, and | ||
| Vite. | ||
| The Web Monetization browser extension is an open source implementation of the Web Monetization draft specification - learn more [here](https://webmonetization.org/specification/). The extension is built with React and TypeScript. | ||
|
|
||
| ### Contributing | ||
| ## Local Development Environment | ||
|
|
||
| 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). | ||
|
|
||
| ### Installation | ||
| ### Prerequisites | ||
|
|
||
| 1. Clone the repository from GitHub: `git clone https://github.com/interledger/web-monetization-extension.git` | ||
| 2. Navigate to the project directory: `cd web-monetization-extension` | ||
| 3. Install the dependencies using PNPM: `pnpm install` | ||
| - [NVM](https://github.com/nvm-sh/nvm) - or another Node Version Manager | ||
| - [PNPM](https://pnpm.io/) | ||
|
|
||
| ### Development | ||
| ## Setup | ||
|
|
||
| To run the extension in development mode with hot reload, use the following command: | ||
| ### Environment Setup | ||
|
|
||
| `pnpm dev` | ||
| ```sh | ||
| # Install Node 20 | ||
| nvm install lts/iron | ||
| nvm use lts/iron | ||
|
|
||
| This command builds the extension using Vite's hot reload feature, allowing you to see immediate changes in the browser | ||
| as you modify the code. | ||
| # Install pnpm using Corepack | ||
| corepack enable | ||
| ``` | ||
|
|
||
| ### Building the Extension | ||
| If you do not have `corepack` installed locally you can use `npm` or `yarn` to install `pnpm`: | ||
|
|
||
| To build the extension for production, use the following command: | ||
| ```sh | ||
| npm install -g pnpm | ||
| # or | ||
| yarn install -g pnpm | ||
| ``` | ||
|
|
||
| `pnpm build` | ||
| For alternative methods of installing `pnpm`, you can refer to the [official `pnpm` documentation](https://pnpm.io/installation). | ||
|
|
||
| ### Building the Extension for Firefox | ||
| To install dependencies, execute: | ||
|
|
||
| To build the extension for Firefox, use the following command: | ||
| ```sh | ||
| pnpm i | ||
| ``` | ||
|
|
||
| `pnpm build firefox` | ||
| ### Commands | ||
|
|
||
| This command transpiles the TypeScript code and generates a production-ready build of the extension in the dist | ||
| directory. | ||
| All commands are run from the root of the project, from a terminal: | ||
|
|
||
| ### Installing the Extension in Chrome | ||
| | 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. | | ||
|
|
||
| To install the extension in Chrome, follow these steps: | ||
| ### Installing the extension from source, in Chromium based browsers (Chrome, Opera, Edge, Brave, Arc) | ||
|
|
||
| 1. Extract the Files:<br/> | ||
| Extract the contents of the ZIP file to a folder on your computer. | ||
| 1. <b>Build the extension with `pnpm build chrome`</b> | ||
|
|
||
| 2. Open Chrome's Extensions Page:<br/> | ||
| Open Chrome, click the three dots in the top-right corner, go to "More tools," and select "Extensions." | ||
| 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`. | ||
|
|
||
| 3. Enable Developer Mode:<br/> | ||
| Enable "Developer mode" using the toggle switch at the top-right of the Extensions page. | ||
| 1. <b>Enable developer mode</b><br/> | ||
| To enable `Developer mode`, use the switch at the top-right of the extensions page. | ||
|
|
||
| 4. Load the Extension:<br/> | ||
| Click the "Load unpacked" button that appears after enabling Developer mode. | ||
| 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). | ||
|
|
||
| 5. Select the Extension Folder:<br/> | ||
| Choose the folder containing the extracted extension files (with the manifest.json file). | ||
| ### Installing the extension from source, in Firefox | ||
|
|
||
| 6. Pin the Extension:<br/> | ||
| Click on the puzzle piece icon in the top-right corner of Chrome, and pin the Web Monetization extension. | ||
| 1. <b>Build the extension with `pnpm build firefox`</b> | ||
|
|
||
| ### Installing the Extension in Firefox | ||
| 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. Extract the Files:<br/> | ||
| Extract the contents of the ZIP file to a folder on your computer. | ||
| 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". | ||
|
|
||
| 2. Open Firefox's Add-ons Page:<br/> | ||
| Open Firefox, click the three horizontal lines in the top-right corner, and choose "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). | ||
|
|
||
| 3. Access Extensions Settings:<br/> | ||
| In the Add-ons Manager, click the gear icon in the top-right corner and select "Install Add-on From File..." | ||
| ### Project structure | ||
|
|
||
| 4. Select the Extension File:<br/> | ||
| Navigate to the folder where you extracted the extension files and select the manifest.json file or the main folder of the extension. | ||
| Inside this project, you'll see the following folders and files: | ||
|
|
||
| ### Testing the Extension | ||
| ``` | ||
| . | ||
| ├── .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 | ||
| ``` | ||
|
|
||
| To run the tests, use the following command: | ||
| ## Contributing | ||
|
|
||
| `pnpm test` | ||
| 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). | ||
|
|
||
| This command runs the tests using Jest and generates a coverage report in the coverage directory. | ||
| ## Roadmap | ||
|
|
||
| ### Linting and Pre-Commit Hooks | ||
| [Web Monetization Roadmap](https://github.com/orgs/interledger/projects/6/views/1?filterQuery=label%3A%22web+monetization%22) | ||
|
|
||
| The extension is set up with ESLint and Prettier for code linting and formatting. Husky and lint-staged are configured | ||
| to enforce linting and formatting rules before each commit. When you commit changes, Husky will run the linting and | ||
| formatting tasks to ensure code quality. | ||
|
|
||
| ## License | ||
|
|
||
| This project is licensed under the Apache License 2.0 - see the [LICENSE](./LICENSE) | ||
| file for details | ||
| 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.