poanetwork
/
nifty-wallet
mirror of https://github.com/poanetwork/nifty-wallet.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
932 Commits 329 Branches 164 Tags 80 MiB
JavaScript 79.6%
CSS 19.7%
HTML 0.5%
SCSS 0.2%
Go to file
Dan Finlay 913a9e85bd Inject inpage script synchronously 
Huge thanks to the Firefox team, for their help on the issue of our long-standing inpage script race condition.

http://stackoverflow.com/questions/38577656/how-can-i-make-a-firefox-add-on-contentscript-inject-and-run-a-script-before-oth

The problem is that we were injecting a `script` tag and assigning its `src` attribute, which triggers an asynchronous fetch request, and does not guarantee execution order! (That was news to me!)

Instead, I'm now assigning the `script` tag a `textContent` value of the script to inject, and it seems to fix the problem!

There is also a Firefox-only API that could solve this whole problem in an even more elegant way, so we might want to expose a code path for that solution later on:

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.exportFunction

Allows you to expose an object from one scope to another. There was even talk of creating a polyfill for it that does virtually what we do, message passing between contexts.
 		2016-07-25 16:38:07 -07:00
app Inject inpage script synchronously 2016-07-25 16:38:07 -07:00
development Add mock dev mode 2016-07-21 18:08:35 -07:00
docs Add instructions for taking a state dump (#469) 2016-07-20 10:10:57 -07:00
test Fix promise usage? 2016-07-22 17:08:17 -07:00
ui Add mock dev mode 2016-07-21 18:08:35 -07:00
.babelrc Added basic es6 mocha test suite 2016-03-24 17:51:46 -07:00
.editorconfig init commit 2015-07-31 18:38:02 -07:00
.eslintignore Implement some cross-browser practices (#473) 2016-07-21 10:45:32 -07:00
.eslintrc Implement some cross-browser practices (#473) 2016-07-21 10:45:32 -07:00
.gitattributes Fix gitattributes 2016-06-29 17:28:49 -07:00
.gitignore Add UI Testing Framework and Simple UI Test 2016-07-22 15:43:30 -07:00
.jshintrc init commit 2015-07-31 18:38:02 -07:00
.nvmrc Enhance nvmrc 2016-06-22 11:07:42 -07:00
.travis.yml Remove extraneous build target 2016-04-14 14:55:41 -07:00
.yo-rc.json init commit 2015-07-31 18:38:02 -07:00
CHANGELOG.md Manifest fix for firefox-specific field (#475) 2016-07-21 16:50:51 -07:00
CONTRIBUTING.md Add contributing.md file 2016-06-15 10:35:23 -07:00
LICENSE license 2016-07-14 14:37:40 -07:00
README.md Add note about firefox stackoverflow to readme 2016-07-25 14:50:19 -07:00
USER_AGREEMENT.md Proofread and fix spelling errors of user agreement. 2016-07-14 23:09:53 -07:00
circle.yml Remove phantom from build deps 2016-07-22 16:39:55 -07:00
fonts Improved Ui Dev Mode 2016-07-01 14:23:37 -07:00
gulpfile.js Inject inpage script synchronously 2016-07-25 16:38:07 -07:00
images Improved Ui Dev Mode 2016-07-01 14:23:37 -07:00
mock-dev.js Add mock dev mode 2016-07-21 18:08:35 -07:00
package.json Inject inpage script synchronously 2016-07-25 16:38:07 -07:00
testem.yml Correct skip usage 2016-07-22 17:09:50 -07:00
ui-dev.js Add mock dev mode 2016-07-21 18:08:35 -07:00

README.md

MetaMask Plugin Build Status

Building locally

  • Install Node.js version 6 or later.
  • Install local dependencies with npm install.
  • Install gulp globally with npm install -g gulp.
  • Build the project to the ./dist/ folder with gulp build.
  • Optionally, to rebuild on file changes, run gulp dev.

Architecture

Architecture Diagram

Development

npm install

Developing with Gulp

We're using an experimental version of gulp-cli, so if you have the old version of gulp, you'll need to uninstall it, npm uninstall -g gulp, and install this one instead:

npm install gulpjs/gulp-cli#4.0 -g

After that, you can just:

gulp dev

In Chrome

Open Settings > Extensions.

Check "Developer mode".

At the top, click Load Unpacked Extension.

Navigate to your metamask-plugin/dist folder.

Click Select.

You now have the plugin, and can click 'inspect views: background plugin' to view its dev console.

In Firefox (Developer Edition Only)

Go to the url about:debugging.

Click the button Load Temporary Add-On.

Select the file dist/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.

Deploying the UI

You must be authorized already on the MetaMask plugin.

  1. Update the version in app/manifest.json and the Changelog in CHANGELOG.md.
  2. Visit the chrome developer dashboard.
  3. Zip the dist folder in this repository.
  4. Upload that zip file as the updated package.