From 0577ac6c5251225d4b6914b1e5b9bd259908555d Mon Sep 17 00:00:00 2001
From: Abhijith Vijayan <34790378+abhijithvijayan@users.noreply.github.com>
Date: Sat, 1 Feb 2020 23:07:45 +0530
Subject: [PATCH] Update README.md

---
 README.md | 83 ++++++++++++++++++++++++++++---------------------------
 1 file changed, 43 insertions(+), 40 deletions(-)

diff --git a/README.md b/README.md
index 6fec219..150c2d5 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,6 @@
   </a>
   
 <hr />
-<br />
 
 👶🏼 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
 
+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
@@ -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
 
-### 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.