Goyslop/web-extension-starter
Template
1
0
Fork 0
mirror of https://github.com/abhijithvijayan/web-extension-starter.git synced 2025-10-07 07:22:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Abhijith Vijayan 2020-02-01 23:07:45 +05:30 committed by GitHub
parent e544710d1d
commit 0577ac6c52
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
README.md
View File

@ -13,7 +13,6 @@
</a> </a>
<hr /> <hr />
<br />
👶🏼 Looking for [Non React/TypeScript Version](https://github.com/abhijithvijayan/web-extension-starter/tree/master) instead? 👶🏼 Looking for [Non React/TypeScript Version](https://github.com/abhijithvijayan/web-extension-starter/tree/master) instead?
@ -49,17 +48,52 @@ curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/reac
## 🚀 Quick Start ## 🚀 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 install` to install dependencies.
- `yarn run dev:chrome` to start the development server for chrome extension. - `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:firefox` to start the development server for firefox addon
- `yarn run dev:opera` to start the development server for opera extension. - `yarn run dev:opera` to start the development server for opera extension
- `yarn run build:chrome` to build chrome extension. - `yarn run build:chrome` to build chrome extension
- `yarn run build:firefox` to build firefox addon. - `yarn run build:firefox` to build firefox addon
- `yarn run build:opera` to build opera extension. - `yarn run build:opera` to build opera extension
- `yarn run build` builds and packs extensions all at once to extension/ directory. - `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 Update `src/manifest/index.js` file with browser vendor prefixed manifest keys
```js ```js
@ -99,37 +133,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 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 ### Production
- `yarn run build` builds the extension for all the browsers to `extension/BROWSER` directory respectively. - `yarn run build` builds the extension for all the browsers to `extension/BROWSER` directory respectively.