diff --git a/mascara/example/index.js b/mascara/example/app.js similarity index 100% rename from mascara/example/index.js rename to mascara/example/app.js diff --git a/mascara/example/index.html b/mascara/example/app/index.html similarity index 81% rename from mascara/example/index.html rename to mascara/example/app/index.html index 47d6da34f..02323e5f9 100644 --- a/mascara/example/index.html +++ b/mascara/example/app/index.html @@ -3,15 +3,13 @@ - MetaMask ZeroClient Example - + - \ No newline at end of file diff --git a/mascara/example/server.js b/mascara/example/server.js new file mode 100644 index 000000000..d39c19600 --- /dev/null +++ b/mascara/example/server.js @@ -0,0 +1,31 @@ +const express = require('express') +const createMetamascaraServer = require('../server/') +const createBundle = require('../server/util').createBundle +const serveBundle = require('../server/util').serveBundle + +// +// Iframe Server +// + +const mascaraServer = createMetamascaraServer() + +// start the server +const mascaraPort = 9001 +mascaraServer.listen(mascaraPort) +console.log(`Mascara service listening on port ${mascaraPort}`) + + +// +// Dapp Server +// + +const dappServer = express() + +// serve dapp bundle +serveBundle(dappServer, '/app.js', createBundle(require.resolve('./app.js'))) +dappServer.use(express.static(__dirname + '/app/')) + +// start the server +const dappPort = '9002' +dappServer.listen(dappPort) +console.log(`Dapp listening on port ${dappPort}`) diff --git a/mascara/server/index.html b/mascara/proxy/index.html similarity index 90% rename from mascara/server/index.html rename to mascara/proxy/index.html index 2308dd98b..b83fc41af 100644 --- a/mascara/server/index.html +++ b/mascara/proxy/index.html @@ -15,6 +15,6 @@ Hello! I am the MetaMask iframe. - + \ No newline at end of file diff --git a/mascara/server.js b/mascara/server.js deleted file mode 100644 index 67c89f11b..000000000 --- a/mascara/server.js +++ /dev/null @@ -1,103 +0,0 @@ -const express = require('express') -const browserify = require('browserify') -const watchify = require('watchify') -const babelify = require('babelify') - -const zeroBundle = createBundle('./src/mascara.js') -const controllerBundle = createBundle('./src/dapp-connection.js') -const popupBundle = createBundle('./src/popup.js') -const swBuild = createBundle('./src/background.js') - -const appBundle = createBundle('./example/index.js') - -// -// Iframe Server -// - -const iframeServer = express() - -// serve popup window -iframeServer.get('/popup/scripts/popup.js', function(req, res){ - res.send(popupBundle.latest) -}) -iframeServer.use('/popup', express.static('../dist/chrome')) - -// serve controller bundle -iframeServer.get('/controller.js', function(req, res){ - res.send(controllerBundle.latest) -}) -iframeServer.get('/popup/sw-build.js', function(req, res){ - console.log('/sw-build.js') - res.setHeader('Content-Type', 'application/javascript') - res.send(swBuild.latest) -}) - -// serve background controller -iframeServer.use(express.static('./server')) - -// start the server -const mascaraPort = 9001 -iframeServer.listen(mascaraPort) -console.log(`Mascara service listening on port ${mascaraPort}`) - - -// -// Dapp Server -// - -const dappServer = express() - -// serve metamask-lib bundle -dappServer.get('/zero.js', function(req, res){ - res.send(zeroBundle.latest) -}) - -// serve dapp bundle -dappServer.get('/app.js', function(req, res){ - res.send(appBundle.latest) -}) - -// serve static -dappServer.use(express.static('./example')) - -// start the server -const dappPort = '9002' -dappServer.listen(dappPort) -console.log(`Dapp listening on port ${dappPort}`) - -// -// util -// - -function serveBundle(entryPoint){ - const bundle = createBundle(entryPoint) - return function(req, res){ - res.send(bundle.latest) - } -} - -function createBundle(entryPoint){ - - var bundleContainer = {} - - var bundler = browserify({ - entries: [entryPoint], - cache: {}, - packageCache: {}, - plugin: [watchify], - }) - - bundler.on('update', bundle) - bundle() - - return bundleContainer - - function bundle() { - bundler.bundle(function(err, result){ - if (err) throw err - console.log(`Bundle updated! (${entryPoint})`) - bundleContainer.latest = result.toString() - }) - } - -} diff --git a/mascara/server/index.js b/mascara/server/index.js new file mode 100644 index 000000000..61dc61a02 --- /dev/null +++ b/mascara/server/index.js @@ -0,0 +1,32 @@ +const express = require('express') +const createBundle = require('./util').createBundle +const serveBundle = require('./util').serveBundle + +module.exports = createMetamascaraServer + + +function createMetamascaraServer(){ + + // start bundlers + const metamascaraBundle = createBundle('./src/mascara.js') + const proxyBundle = createBundle('./src/proxy.js') + const uiBundle = createBundle('./src/popup.js') + const backgroundBuild = createBundle('./src/background.js') + + // serve bundles + const server = express() + // ui window + serveBundle(server, '/ui.js', uiBundle) + server.use(express.static(__dirname+'/../ui/')) + server.use(express.static(__dirname+'/../../dist/chrome')) + // metamascara + serveBundle(server, '/metamascara.js', metamascaraBundle) + // proxy + serveBundle(server, '/proxy/proxy.js', proxyBundle) + server.use('/proxy/', express.static(__dirname+'/../proxy')) + // background + serveBundle(server, '/background.js', backgroundBuild) + + return server + +} diff --git a/mascara/server/util.js b/mascara/server/util.js new file mode 100644 index 000000000..6e25b35d8 --- /dev/null +++ b/mascara/server/util.js @@ -0,0 +1,45 @@ +const browserify = require('browserify') +const watchify = require('watchify') + +module.exports = { + serveBundle, + createBundle, +} + + +function serveBundle(server, path, bundle){ + server.get(path, function(req, res){ + res.setHeader('Content-Type', 'application/javascript; charset=UTF-8') + res.send(bundle.latest) + }) +} + +function createBundle(entryPoint){ + + var bundleContainer = {} + + var bundler = browserify({ + entries: [entryPoint], + cache: {}, + packageCache: {}, + plugin: [watchify], + }) + + bundler.on('update', bundle) + bundle() + + return bundleContainer + + function bundle() { + bundler.bundle(function(err, result){ + if (err) { + console.log(`Bundle failed! (${entryPoint})`) + console.error(err) + return + } + console.log(`Bundle updated! (${entryPoint})`) + bundleContainer.latest = result.toString() + }) + } + +} diff --git a/mascara/src/lib/setup-provider.js b/mascara/src/lib/setup-provider.js index 4f2432ae4..62335b18d 100644 --- a/mascara/src/lib/setup-provider.js +++ b/mascara/src/lib/setup-provider.js @@ -4,14 +4,14 @@ const MetamaskInpageProvider = require('../../../app/scripts/lib/inpage-provider module.exports = getProvider -function getProvider(){ +function getProvider(opts){ if (global.web3) { console.log('MetaMask ZeroClient - using environmental web3 provider') return global.web3.currentProvider } console.log('MetaMask ZeroClient - injecting zero-client iframe!') var iframeStream = setupIframe({ - zeroClientProvider: 'http://localhost:9001', + zeroClientProvider: opts.mascaraUrl, sandboxAttributes: ['allow-scripts', 'allow-popups', 'allow-same-origin'], container: document.body, }) diff --git a/mascara/src/mascara.js b/mascara/src/mascara.js index 759353c1b..f9bed7e52 100644 --- a/mascara/src/mascara.js +++ b/mascara/src/mascara.js @@ -1,15 +1,22 @@ const Web3 = require('web3') const setupProvider = require('./lib/setup-provider.js') +const MASACARA_DOMAIN = 'http://localhost:9001' + // // setup web3 // -var provider = setupProvider() -hijackProvider(provider) + +var provider = setupProvider({ + mascaraUrl: MASACARA_DOMAIN + '/proxy/', +}) +instrumentForUserInteractionTriggers(provider) + var web3 = new Web3(provider) web3.setProvider = function(){ console.log('MetaMask - overrode web3.setProvider') } + // // // export web3 @@ -25,12 +32,12 @@ var shouldPop = false window.addEventListener('click', function(){ if (!shouldPop) return shouldPop = false - window.open('http://localhost:9001/popup/popup.html', '', 'width=360 height=500') + window.open(MASACARA_DOMAIN, '', 'width=360 height=500') console.log('opening window...') }) -function hijackProvider(provider){ +function instrumentForUserInteractionTriggers(provider){ var _super = provider.sendAsync.bind(provider) provider.sendAsync = function(payload, cb){ if (payload.method === 'eth_sendTransaction') { diff --git a/mascara/src/dapp-connection.js b/mascara/src/proxy.js similarity index 94% rename from mascara/src/dapp-connection.js rename to mascara/src/proxy.js index 30680c9d7..e580076c1 100644 --- a/mascara/src/dapp-connection.js +++ b/mascara/src/proxy.js @@ -4,7 +4,7 @@ const SwStream = require('sw-stream/lib/sw-stream.js') const SetupUntrustedComunication = ('./lib/setup-untrusted-connection.js') const background = new SWcontroller({ - fileName: '/popup/sw-build.js', + fileName: '/background.js', }) const pageStream = new ParentStream() diff --git a/mascara/ui/index.html b/mascara/ui/index.html new file mode 100644 index 000000000..c5eeb05ef --- /dev/null +++ b/mascara/ui/index.html @@ -0,0 +1,11 @@ + + + + + MetaMask Plugin + + +
+ + + \ No newline at end of file