[doc] update README and CONTRIBUTING

CONTRIBUTING.md

@@ -78,12 +78,12 @@ The name of branch should be semantic, avoiding words like 'update' or 'tmp'. We
 
 ### 5. Make your changes
 
-Now you can create your patch, including appropriate test cases in the new branch. Please read and follow our [Code Rules](#rules).
+Now you can code. Please read and follow our [Code Rules](#rules).
 
-After you finish your modification, run the test and ensure that all tests pass.
+After you finish your modification, please prettify the code.
 
 ```shell
-npm run test
+yarn run prettier
 ```
 
 ### 6. Commit your changes

README.md

@@ -65,30 +65,39 @@ For more information please refer to [Installation Guide](./INSTALLATION.md).
 
 ## Contributing
 
+Please read [CONTRIBUTING](./CONTRIBUTING.md) if you are new here or not familiar with the basic rules of Git/GitHub world.
+
 ### Quickstart
 
-```bash
-git clone https://github.com/hypertrons/hypertrons-crx
-cd hypertrons-crx
-npm install
-npm run watch
-npm run web-ext
-```
-
-[web-ext](https://github.com/mozilla/web-ext) would open `Chrome` and load `Hypertrons-crx` into the browser automatically. And the default configuration of `web-ext` can be found in [package.json](https://github.com/hypertrons/hypertrons-crx/blob/master/package.json):
-
-```json
-{
-  "webExt": {
-    "sourceDir": "distribution",
-    "run": {
-      "keepProfileChanges": true,
-      "chromiumProfile": "./test/web-ext-profile",
-      "startUrl": ["https://github.com/hypertrons/hypertrons-crx"]
-    }
-  }
-}
-```
+1. git clone https://github.com/hypertrons/hypertrons-crx
+
+2. cd hypertrons-crx
+
+3. yarn install
+
+4. yarn run start
+
+5. Load the freshly built unpacked extension on Chrome following:
+
+   1. Access chrome://extensions/
+
+   2. Check "Developer mode"
+
+   3. Click on "Load unpacked extension"
+
+   4. Select the "build" folder under the project root directory
+
+   5. Keep "service worker" DevTools page open ([why?]())
+
+      ![](./assets/keep-service-worker-devtools-open.jpeg)
+
+6. Happy hacking!
+
+### HMR & auto-reload
+
+If you are developing Options page or Popup page, each time you save files the pages will hot replace the modules without refreshing, which means you can see the changes right away.
+
+However, if you are developing Background or ContentScripts, each time you save files the service worker will reload the extension automatically. And if you are developing ContentScripts, then pages that injected with ContentScripts will refresh themselves to run the newest scripts.
 
 ### Q&A
 

README.zh-CN.md

@@ -67,30 +67,39 @@ Hypertrons 浏览器插件项目旨在通过直接往 GitHub 页面中插入各
 
 ## 参与贡献
 
+如果你初来乍到或对 Git/GitHub 的基本操作不熟悉，请阅读[CONTRIBUTING](./CONTRIBUTING.md)。
+
 ### 快速开始
 
-```bash
-git clone [email protected]:hypertrons/hypertrons-crx.git
-cd hypertrons-crx
-npm install
-npm run watch
-npm run web-ext
-```
-
-[web-ext](https://github.com/mozilla/web-ext) 将会自动打开 `Chrome` 浏览器并加载 `Hypertrons-crx`. `web-ext` 的配置请参考 [package.json](https://github.com/hypertrons/hypertrons-crx/blob/master/package.json):
-
-```json
-{
-  "webExt": {
-    "sourceDir": "distribution",
-    "run": {
-      "keepProfileChanges": true,
-      "chromiumProfile": "./test/web-ext-profile",
-      "startUrl": ["https://github.com/hypertrons/hypertrons-crx"]
-    }
-  }
-}
-```
+1. git clone https://github.com/hypertrons/hypertrons-crx
+
+2. cd hypertrons-crx
+
+3. yarn install
+
+4. yarn run start
+
+5. 在 chrome 中加载新鲜出炉的插件:
+
+   1. 在浏览器地址栏访问 chrome://extensions/
+
+   2. 勾选“开发者模式”
+
+   3. 点击“加载已解压的扩展程序”
+
+   4. 选择项目根目录下的“build”目录
+
+   5. 保持“Service Worker”的 DevTools 页面为打开状态 ([why?]())
+
+      ![](/Users/tangyenan/Projects/Hypercrx/manifest-v3/assets/keep-service-worker-devtools-open.jpeg)
+
+6. Happy hacking!
+
+### HMR & auto-reload
+
+如果你开发的是 Options 页面或 Popup 页面，每次保存文件都可以让页面进行热模块替换而不需要刷新页面，这意味着你能立马看到改动后的效果。
+
+但是，如果你开发的是 Background 或 ContentScripts，每次保存文件后，service worker 会自动重新加载插件。除此之外，若你开发的是 ContentScripts，那么那些被注入 ContentScripts 的页面还会自动刷新从而运行最新的 ContentScripts。
 
 ### 问题交流