mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
cce8d9e360
Added new Qunit build process that will browserify the contents of `test/integration/lib` into the QUnit browser, allowing much more modular testing, including unit testing of our modules in our target browsers. Made a basic unit test file of this form for the new encryptor module, which fails miserably because I've only just begun to work with it. I've started with this blog post as a starting point, and will be adjusting it to our needs from there: http://qnimate.com/passphrase-based-encryption-using-web-cryptography-api/
107 lines
6.2 KiB
Markdown
107 lines
6.2 KiB
Markdown
# MetaMask Plugin [](https://circleci.com/gh/MetaMask/metamask-plugin)
|
|
|
|
## Developing Compatible Dapps
|
|
|
|
If you're a web dapp developer, we've got two types of guides for you:
|
|
|
|
- If you've never built a Dapp before, we've got a gentle introduction on [Developing Dapps with Truffle and MetaMask](https://blog.metamask.io/developing-for-metamask-with-truffle/).
|
|
- If you have a Dapp, and you want to ensure compatibility, [here is our guide on building MetaMask-compatible Dapps](https://github.com/MetaMask/faq/blob/master/DEVELOPERS.md)
|
|
|
|
## Building locally
|
|
|
|
- Install [Node.js](https://nodejs.org/en/) version 6.3.1 or later.
|
|
- Install local dependencies with `npm install`.
|
|
- Install gulp globally with `npm install -g gulp-cli`.
|
|
- Build the project to the `./dist/` folder with `gulp build`.
|
|
- Optionally, to rebuild on file changes, run `gulp dev`.
|
|
- To package .zip files for distribution, run `gulp 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
|
|
|
|
[][1]
|
|
|
|
## Development
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
#### In Chrome
|
|
|
|
Open `Settings` > `Extensions`.
|
|
|
|
Check "Developer mode".
|
|
|
|
At the top, click `Load Unpacked Extension`.
|
|
|
|
Navigate to your `metamask-plugin/dist/chrome` folder.
|
|
|
|
Click `Select`.
|
|
|
|
You now have the plugin, and can click 'inspect views: background plugin' to view its dev console.
|
|
|
|
#### In Firefox
|
|
|
|
Go to the url `about:debugging`.
|
|
|
|
Click the button `Load Temporary Add-On`.
|
|
|
|
Select the file `dist/firefox/manifest.json`.
|
|
|
|
You can optionally enable debugging, and click `Debug`, for a console window that logs all of Metamask's processes to a single console.
|
|
|
|
If you have problems debugging, try connecting to the IRC channel `#webextensions` on `irc.mozilla.org`.
|
|
|
|
For longer questions, use the StackOverfow tag `firefox-addons`.
|
|
|
|
### Developing on UI Only
|
|
|
|
You can run `npm run ui`, and your browser should open a live-reloading demo version of the plugin UI.
|
|
|
|
Some actions will crash the app, so this is only for tuning aesthetics, but it allows live-reloading styles, which is a much faster feedback loop than reloading the full extension.
|
|
|
|
### Developing on UI with Mocked Background Process
|
|
|
|
You can run `npm run mock` and your browser should open a live-reloading demo version of the plugin UI, just like the `npm run ui`, except that it tries to actually perform all normal operations.
|
|
|
|
It does not yet connect to a real blockchain (this could be a good test feature later, connecting to a test blockchain), so only local operations work.
|
|
|
|
You can reset the mock ui at any time with the `Reset` button at the top of the screen.
|
|
|
|
### Developing on Dependencies
|
|
|
|
To enjoy the live-reloading that `gulp dev` offers while working on the `web3-provider-engine` or other 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 `gulp dev` it will watch the dependency for changes as well!
|
|
|
|
### Running Tests
|
|
|
|
Requires `mocha` installed. Run `npm install -g mocha`.
|
|
|
|
Then just run `npm test`.
|
|
|
|
You can also test with a continuously watching process, via `npm run watch`.
|
|
|
|
You can run the linter by itself with `gulp lint`.
|
|
|
|
#### Writing Browser Tests
|
|
|
|
To write tests that will be run in the browser using QUnit, add your test files to `test/integration/lib`.
|
|
|
|
### Deploying the UI
|
|
|
|
You must be authorized already on the MetaMask plugin.
|
|
|
|
0. Update the version in `app/manifest.json` and the Changelog in `CHANGELOG.md`.
|
|
1. Visit [the chrome developer dashboard](https://chrome.google.com/webstore/developer/dashboard?authuser=2).
|
|
2. Run `gulp dist` (or `gulp zip` if you've already built)
|
|
3. Upload the latest zip file from `builds/metamask-$PLATFORM-$VERSION.zip` as the updated package.
|
|
|
|
[1]: http://www.nomnoml.com/#view/%5B%3Cactor%3Euser%5D%0A%0A%5Bmetamask-ui%7C%0A%20%20%20%5Btools%7C%0A%20%20%20%20%20react%0A%20%20%20%20%20redux%0A%20%20%20%20%20thunk%0A%20%20%20%20%20ethUtils%0A%20%20%20%20%20jazzicon%0A%20%20%20%5D%0A%20%20%20%5Bcomponents%7C%0A%20%20%20%20%20app%0A%20%20%20%20%20account-detail%0A%20%20%20%20%20accounts%0A%20%20%20%20%20locked-screen%0A%20%20%20%20%20restore-vault%0A%20%20%20%20%20identicon%0A%20%20%20%20%20config%0A%20%20%20%20%20info%0A%20%20%20%5D%0A%20%20%20%5Breducers%7C%0A%20%20%20%20%20app%0A%20%20%20%20%20metamask%0A%20%20%20%20%20identities%0A%20%20%20%5D%0A%20%20%20%5Bactions%7C%0A%20%20%20%20%20%5BaccountManager%5D%0A%20%20%20%5D%0A%20%20%20%5Bcomponents%5D%3A-%3E%5Bactions%5D%0A%20%20%20%5Bactions%5D%3A-%3E%5Breducers%5D%0A%20%20%20%5Breducers%5D%3A-%3E%5Bcomponents%5D%0A%5D%0A%0A%5Bweb%20dapp%7C%0A%20%20%5Bui%20code%5D%0A%20%20%5Bweb3%5D%0A%20%20%5Bmetamask-inpage%5D%0A%20%20%0A%20%20%5B%3Cactor%3Eui%20developer%5D%0A%20%20%5Bui%20developer%5D-%3E%5Bui%20code%5D%0A%20%20%5Bui%20code%5D%3C-%3E%5Bweb3%5D%0A%20%20%5Bweb3%5D%3C-%3E%5Bmetamask-inpage%5D%0A%5D%0A%0A%5Bmetamask-background%7C%0A%20%20%5Bprovider-engine%5D%0A%20%20%5Bhooked%20wallet%20subprovider%5D%0A%20%20%5Bid%20store%5D%0A%20%20%0A%20%20%5Bprovider-engine%5D%3C-%3E%5Bhooked%20wallet%20subprovider%5D%0A%20%20%5Bhooked%20wallet%20subprovider%5D%3C-%3E%5Bid%20store%5D%0A%20%20%5Bconfig%20manager%7C%0A%20%20%20%20%5Brpc%20configuration%5D%0A%20%20%20%20%5Bencrypted%20keys%5D%0A%20%20%20%20%5Bwallet%20nicknames%5D%0A%20%20%5D%0A%20%20%0A%20%20%5Bprovider-engine%5D%3C-%5Bconfig%20manager%5D%0A%20%20%5Bid%20store%5D%3C-%3E%5Bconfig%20manager%5D%0A%5D%0A%0A%5Buser%5D%3C-%3E%5Bmetamask-ui%5D%0A%0A%5Buser%5D%3C%3A--%3A%3E%5Bweb%20dapp%5D%0A%0A%5Bmetamask-contentscript%7C%0A%20%20%5Bplugin%20restart%20detector%5D%0A%20%20%5Brpc%20passthrough%5D%0A%5D%0A%0A%5Brpc%20%7C%0A%20%20%5Bethereum%20blockchain%20%7C%0A%20%20%20%20%5Bcontracts%5D%0A%20%20%20%20%5Baccounts%5D%0A%20%20%5D%0A%5D%0A%0A%5Bweb%20dapp%5D%3C%3A--%3A%3E%5Bmetamask-contentscript%5D%0A%5Bmetamask-contentscript%5D%3C-%3E%5Bmetamask-background%5D%0A%5Bmetamask-background%5D%3C-%3E%5Bmetamask-ui%5D%0A%5Bmetamask-background%5D%3C-%3E%5Brpc%5D%0A
|