diff --git a/README.md b/README.md index d636ed1..aed1f7e 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,6 @@
-
🧙‍♂️ Looking for [React-TypeScript Version](https://github.com/abhijithvijayan/web-extension-starter/tree/react-typescript) instead? @@ -46,17 +45,52 @@ curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/mast ## 🚀 Quick Start +Ensure you have +- [Node.js](https://nodejs.org) 10 or later installed +- [Yarn](https://yarnpkg.com) v1 or v2 installed + +Then run the following: - `yarn install` to install dependencies. -- `yarn run dev:chrome` to start the development server for chrome extension. -- `yarn run dev:firefox` to start the development server for firefox addon. -- `yarn run dev:opera` to start the development server for opera extension. -- `yarn run build:chrome` to build chrome extension. -- `yarn run build:firefox` to build firefox addon. -- `yarn run build:opera` to build opera extension. -- `yarn run build` builds and packs extensions all at once to extension/ directory. +- `yarn run dev:chrome` to start the development server for chrome extension +- `yarn run dev:firefox` to start the development server for firefox addon +- `yarn run dev:opera` to start the development server for opera extension +- `yarn run build:chrome` to build chrome extension +- `yarn run build:firefox` to build firefox addon +- `yarn run build:opera` to build opera extension +- `yarn run build` builds and packs extensions all at once to extension/ directory -## Usage +### Development +- `yarn install` to install dependencies. +- To watch file changes in developement + + - Chrome + - `yarn run dev:chrome` + - Firefox + - `yarn run dev:firefox` + - Opera + - `yarn run dev:opera` + +- **Load extension in browser** + + - ### Chrome + + - Go to the browser address bar and type `chrome://extensions` + - Check the `Developer Mode` button to enable it. + - Click on the `Load Unpacked Extension…` button. + - Select your extension’s extracted directory. + + - ### Firefox + + - Load the Add-on via `about:debugging` as temporary Add-on. + - Choose the `manifest.json` file in the extracted directory + + - ### Opera + + - Load the extension via `opera:extensions` + - Check the `Developer Mode` and load as unpacked from extension’s extracted directory. + +### Generating browser specific manifest.json Update `src/manifest/index.js` file with browser vendor prefixed manifest keys ```js @@ -96,37 +130,6 @@ if the vendor is `chrome` or `opera`, this compiles to: See the original [README](https://github.com/abhijithvijayan/wext-manifest) of wext-manifest package for more details -### Development - -- `yarn install` to install dependencies. -- To watch file changes in developement - - - Chrome - - `yarn run dev:chrome` - - Firefox - - `yarn run dev:firefox` - - Opera - - `yarn run dev:opera` - -- **Load extension in browser** - - - ### Chrome - - - Go to the browser address bar and type `chrome://extensions` - - Check the `Developer Mode` button to enable it. - - Click on the `Load Unpacked Extension…` button. - - Select your extension’s extracted directory. - - - ### Firefox - - - Load the Add-on via `about:debugging` as temporary Add-on. - - Choose the `manifest.json` file in the extracted directory - - - ### Opera - - - Load the extension via `opera:extensions` - - Check the `Developer Mode` and load as unpacked from extension’s extracted directory. - ### Production - `yarn run build` builds the extension for all the browsers to `extension/BROWSER` directory respectively. @@ -138,3 +141,4 @@ Give a ⭐️ if this project helped you! ## Licence Code released under the [MIT License](LICENSE). +