OSDN Git Service

update README file
authorZhiting Lin <zlin035@uottawa.ca>
Tue, 5 Mar 2019 07:15:40 +0000 (15:15 +0800)
committerZhiting Lin <zlin035@uottawa.ca>
Tue, 5 Mar 2019 07:15:40 +0000 (15:15 +0800)
README.md
doc/cn/README.md
doc/en/add-to-chrome.md [new file with mode: 0644]
doc/en/developing-on-deps.md [new file with mode: 0644]

index 7504b83..c1d9702 100644 (file)
--- a/README.md
+++ b/README.md
@@ -1,22 +1,36 @@
-# chrome-extension-wallet
+# Bystore Chrome Extension
 
-> Bytom Chrome Extension Wallet
 
-## Build Setup
+## Building locally
 
-``` bash
-# install dependencies
-npm install
+- Install [Node.js](https://nodejs.org) version 8 and the latest available npm@6
+- Install dependencies: `npm install`
+- build for production with minification && crx package with `npm run build`
+- Optionally, to rebuild on file changes, run `npm run dev`.
+- To package .zip files for distribution, run `npm run zip`, or run the full build & zip with `gulp dist`.
+
+ Uncompressed builds can be found in `/dist`, compressed builds can be found in `/builds` once they're built.
+
+
+## Architecture
+
+![Architecture Diagram](./doc/architecture-diagram.png)
 
-# serve with auto reload && import the **dist** folder in the Chrome browser
+## Development
+
+```bash
+npm install
 npm run dev
+```
+
+## Build for Publishing
 
-# build for production with minification && crx package
+```bash
 npm run build
 ```
 
-## Architecture Diagram
-![png](https://raw.githubusercontent.com/Bytom-Community/Bytom-Chrome-Extension/master/doc/architecture-diagram.png)
 
-## Doc
-[中文](https://github.com/Bytom-Community/Bytom-Chrome-Extension/tree/master/doc/cn)
\ No newline at end of file
+## Other Docs
+- [How to add custom build to Chrome](./docs/en/add-to-chrome.md)
+- [How to live reload on local dependency changes](./docs/en/developing-on-deps.md)
+- [中文文档](./doc/cn/README.md)
index 72bfd96..1f79dd9 100644 (file)
@@ -20,3 +20,22 @@ wasm构建请参考项目[Bytom-WebAssembly](https://github.com/Bytom-Community/
 由于WASM是使用Go语言编写,请参考Go语言官方文档[Go-WebAssembly](https://github.com/golang/go/wiki/WebAssembly)。<br>
 SDK的具体实现参考其项目目录`src/wasm`内的源码。<br>
 WASM会向JavaScript全局作用域注册相关的函数,JavaScript直接调用即可,这里需要注意一点的是,WASM函数都是异步的。
+
+## 钱包完整构建流程
+由于本项目在`static/wasm`目录已经预生成了wasm文件,所以如果想要构建完整的Chrome插件文件只需要运行下面的命令:
+```sh
+git clone https://github.com/Bytom-Community/Bytom-Chrome-Extension.git bytom_chrome_wallet # clone项目
+cd bytom_chrome_wallet # 进入工作目录
+npm install # 安装依赖
+npm run build # 构建插件文件(crx文件)
+```
+生成的chrome-ext.crx文件可以直接拖拽至Chrome浏览器扩展程序界面( chrome://extensions/ )安装(建议打开右上角的开发者模式)。<br>
+如果您想修改开发本项目,则使用开发构建模式:
+```
+npm run dev
+```
+这个时候会在工作目录生成dist目录,在Chrome浏览器扩展程序界面中点击`加载已解压的扩展程序`选择dist文件夹,即可在浏览器中调试程序。
+npm进程会监听您对文件的修改,以及时编译代码,将更改提现在程序上(这就和前端开发的dev模式一样)。<br>
+如果您想自行构建wasm文件,请参考此项目[Bytom-WebAssembly](https://github.com/Bytom-Community/Bytom-WebAssembly)。
+您只需要将构建好的wasm文件拷贝到`static/wasm`目录下,并命名为main.wasm即可。<br>
+注意,要想自行构建wasm文件,需要安装Go(最低1.11版本),安装请参考[Go Install](https://golang.org/doc/install)。
diff --git a/doc/en/add-to-chrome.md b/doc/en/add-to-chrome.md
new file mode 100644 (file)
index 0000000..8d1c3dd
--- /dev/null
@@ -0,0 +1,12 @@
+## Add Custom Build to Chrome
+
+* Open `Settings` > `Extensions`.
+* Check "Developer mode".
+* Alternatively, use the URL `chrome://extensions/` in your address bar
+* At the top, click `Load Unpacked Extension`.
+* Navigate to your `Bystore/dist` folder.
+* Click `Select`.
+* Change to your locale via `chrome://settings/languages`
+* Restart the browser and test the plugin in your locale
+
+You now have the plugin, and can click 'inspect views: background plugin' to view its dev console.
diff --git a/doc/en/developing-on-deps.md b/doc/en/developing-on-deps.md
new file mode 100644 (file)
index 0000000..b30df9e
--- /dev/null
@@ -0,0 +1,9 @@
+### Developing on Dependencies
+
+To enjoy the live-reloading that `npm run dev` offers while working on the dependencies:
+
+ 1. Clone the dependency locally.
+ 2. `npm install` in its folder.
+ 3. Run `npm link` in its folder.
+ 4. Run `npm link $DEP_NAME` in this project folder.
+ 5. Next time you `npm start` it will watch the dependency for changes as well!