MetaMask/metamask-extension/mascara 的运行实现
https://github.com/MetaMask/metamask-extension/tree/develop/mascara
找了很多个实例,基本上很少是不使用线上钱包的,只有metamask-extension的mascara实例中实现了,下面是将整个metamask-extension下载下来,进行配置,然后运行的步骤:
进行环境部署:
Building locally
- Install Node.js version 8.11.3 and npm version 6.1.0
- If you are using nvm (recommended) running
nvm use
will automatically choose the right node version for you. - Select npm 6.1.0:
npm install -g npm@6.1.0
- If you are using nvm (recommended) running
- Install dependencies:
npm install
- Install gulp globally with
npm install -g gulp-cli
. - Build the project to the
./dist/
folder withgulp 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 withgulp dist
.
Uncompressed builds can be found in /dist
, compressed builds can be found in /builds
once they're built.
运行npm install时出现错误:
Unhandled rejection Error: Command failed: /usr/bin/git checkout 4.0
error: pathspec '4.0' did not match any file(s) known to git. at ChildProcess.exithandler (child_process.js::)
at ChildProcess.emit (events.js::)
at maybeClose (internal/child_process.js::)
at Socket.stream.socket.on (internal/child_process.js::)
at Socket.emit (events.js::)
at Pipe._handle.close (net.js::)
导致这个错误的原因在package.json这个文件中的:
"gulp": "github:gulpjs/gulp#4.0",
将其改成:
"gulp": "4.0",
就好了
再运行npm install,但是后面又出错:
/Users/user/.node-gyp/10.5./include/node/node.h::: note: expanded from
macro 'NODE_DEPRECATED'
__attribute__((deprecated(message))) declarator
^
../src/addon.cpp::: error: no matching member function for call to
'NewInstance'
info.GetReturnValue().Set(cons->NewInstance(argc...
~~~~~~^~~~~~~~~~~
/Users/user/.node-gyp/10.5./include/node/v8.h::: note: candidate
function not viable: requires single argument 'context', but arguments
were provided
V8_WARN_UNUSED_RESULT MaybeLocal<Object> NewInstance(
^
/Users/user/.node-gyp/10.5./include/node/v8.h::: note: candidate
function not viable: requires arguments, but were provided
V8_WARN_UNUSED_RESULT MaybeLocal<Object> NewInstance(
^
warnings and error generated.
make: *** [Release/obj.target/sha3/src/addon.o] Error
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code:
gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js::)
gyp ERR! stack at ChildProcess.emit (events.js::)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js::)
gyp ERR! System Darwin 18.0.
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/user/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e/node_modules/sha3
gyp ERR! node -v v10.5.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm WARN The package css-loader is included as both a dev and production dependency.
npm WARN The package eslint-plugin-react is included as both a dev and production dependency.
npm WARN The package eth-json-rpc-middleware is included as both a dev and production dependency.
npm WARN The package eth-keyring-controller is included as both a dev and production dependency.
npm WARN The package file-loader is included as both a dev and production dependency.
npm WARN The package gulp is included as both a dev and production dependency. npm ERR! code ELIFECYCLE
npm ERR! errno
npm ERR! sha3@1.2. install: `node-gyp rebuild`
npm ERR! Exit status
npm ERR!
npm ERR! Failed at the sha3@1.2. install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in:
npm ERR! /Users/user/.npm/_logs/--05T08_52_12_631Z-debug.log
这个原因好像是node版本,我的node版本是10.5.0的问题
后面找到个靠谱的方法,就是将之前的package-lock.json删掉,后面发现删了就好了:
old lock files were preventing us from getting the newer version of sha3 that fixed node support.
之后运行gulp build去生成dist文件夹时也遇见了错误:
gulp build
fs.js:
throw err;
^ Error: ENOENT: no such file or directory, scandir '/Users/user/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e/node_modules/gulp-sass/node_modules/node-sass/vendor'
解决办法:
说是运行npm rebuild node-sass,如果没有报错,那就是成功了
然后重新运行gulp build,又遇见一个错:
[::] Did you forget to signal async completion?
/Users/user/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e/gulpfile.js:
throw err
^ Error: Parsing file /Users/user/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e/node_modules/eth-sig-util/index.js: Identifier 'Buffer' has already been declared (:)
解决方法:
到文件处将
const { Buffer } = require('buffer');
注释掉,因为nodejs将Buffer定义为全局变量,不用require,然后再运行gulp build ,然后就成功了,然后就能够看见多了一个dist文件夹
然后就能够运行mascara了:
但是在运行npm run mascara的时候,会出错:
npm run mascara > metamask-crx@0.0. mascara /Users/user/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e
> gulp dev:mascara & node ./mascara/example/server Mascara service listening on port
Dapp listening on port
events.js:
throw er; // Unhandled 'error' event
^ Error: Cannot find module 'uglifyify' from '/Users/user/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e'
解决办法:npm install uglifyify --save
然后后面再运行npm run mascara就没问题了
但是在浏览器上运行http://localhost:9002时又出现了很多问题
1.找不到proxy.js
在mascara/proxy/index.html 中有:
<script src="./proxy.js"></script>
但是在当前目录下是没有这个文件的,这个文件其实在
mascara/src/proxy.js
解决这个问题的办法是在mascara/server/index.js中添加一行:
server.use(express.static(path.join(__dirname, '/../../src')))
并将
server.use(express.static(path.join(__dirname, '/../proxy')))
注释掉(后面发现其实可以不用注释,下面会说),然后将index.html中写成:
<script src="/proxy.js"></script>
即可
2.添加proxy.js后又出现问题:找不到/script/background.js
出现问题的地方是proxy.js的:
const background = new SwController({
fileName: './script/background.js',
keepAlive: true,
keepAliveInterval: ,
keepAliveDelay,
})
将其改成'/background.js',即可
3.但是最后还是有一个问题:
Unhandled promise rejection:typeError:undefined is not an object(evaluating 'serviceWorker.postMessage')
我觉得原因是
background.on('ready', () => {
const swStream = SwStream({
serviceWorker: background.controller, //这里
context: 'dapp',
})
pageStream.pipe(swStream).pipe(pageStream) //serviceWorker.postMessage肯定是这里运行了,但是这个promise出现了问题 })
好好看了一下下面这两个模块的实现,去找原因:
const SwController = require('sw-controller')//本博客MetaMask/sw-controller
const SwStream = require('sw-stream/lib/sw-stream.js')//本博客sw-stream
然后后面看见:
sw-stream/lib/sw-stream.js(这里有serviceWorker.postMessage,那就是说明background.controller.postMessage出了问题)
const PortStream = require('./message-channel-port-stream') module.exports = SericeWorkerStream function SericeWorkerStream({ serviceWorker, context }) {
// create message channel for communication
const messageChannel = new MessageChannel()
// send handshake including port to respond on
serviceWorker.postMessage({ action: 'handshake', context }, [messageChannel.port2])
// construct stream around local message channel port
const portStream = new PortStream(messageChannel.port1)
return portStream
}
后面再查看了一下sw-controller的代码,发现它的使用情况与proxy.js上写的有所不同:
const SwController = require('sw-controller')
const createSwStream = require('sw-stream')//这里proxy.js上面写的是require('sw-stream/lib/sw-stream.js') const controller = new SwController({
fileName: '/service-worker.js',
// optional, scope used when registering service worker
scope: '/',
// default: true, pings the service worker to keep it alive
keepAlive: true,
}) controller.once('ready', () => {
const swStream = createSwStream({
serviceWorker: controller.getWorker(),//这里proxy.js上写的是background.controller,这很有可能就是controller没能真正得到,所以不能够使用postMessage的原因
})
// talk to the service worker
}) controller.startWorker()
因此后面将proxy.js改为:
const createParentStream = require('iframe-stream').ParentStream
const SwController = require('sw-controller')
// const SwStream = require('sw-stream/lib/sw-stream.js')
const SwStream = require('sw-stream')//改了 const keepAliveDelay = Math.floor(Math.random() * ( - )) +
const background = new SwController({
fileName: '/background.js',
keepAlive: true,
keepAliveInterval: ,
keepAliveDelay,
}) const pageStream = createParentStream()
background.on('ready', () => {
const swStream = SwStream({
// serviceWorker: background.controller,
serviceWorker: background.getWorker(),//改了
context: 'dapp',
})
pageStream.pipe(swStream).pipe(pageStream) })
background.on('updatefound', () => window.location.reload()) background.on('error', console.error)
background.startWorker()
然后调用npm run mascara:
userdeMacBook-Pro:metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e user$ npm run mascara > metamask-crx@0.0. mascara /Users/user/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e
> gulp dev:mascara & node ./mascara/example/server Mascara service listening on port
Dapp listening on port
Bundle updated! (/Users/user/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e/mascara/example/app.js)
[::] Using gulpfile ~/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e/gulpfile.js
[::] Starting 'dev:mascara'...
[::] Starting 'clean'...
[::] Finished 'clean' after ms
[::] Starting 'dev:scss'...
[::] Finished 'dev:scss' after ms
[::] Starting 'dev:mascara:js'...
[::] Starting 'dev:copy'...
[::] Starting 'dev:reload'...
[::] Starting 'dev:mascara:js:ui'...
[::] Starting 'dev:mascara:js:proxy'...
[::] Starting 'dev:mascara:js:background'...
[::] Starting 'dev:mascara:js:metamascara'...
[::] Starting 'dev:copy:locales'...
[::] Starting 'dev:copy:images'...
[::] Starting 'dev:copy:contractImages'...
[::] Starting 'dev:copy:fonts'...
[::] Starting 'dev:copy:reload'...
[::] Starting 'dev:copy:html'...
[::] Starting 'dev:copy:manifest'...
[::] Starting 'dev:copy:html:mascara'...
[::] Finished 'dev:copy:html:mascara' after ms
[::] Finished 'dev:copy:manifest' after ms
[::] Finished 'dev:copy:reload' after ms
[::] Finished 'dev:copy:html' after 1.06 s
[::] Finished 'dev:copy:locales' after s
[::] Finished 'dev:copy:images' after s
[::] bytes written (18.85 seconds)
[::] Finished 'dev:mascara:js:proxy' after s
[::] bytes written (20.51 seconds)
[::] Finished 'dev:mascara:js:metamascara' after s
[::] bytes written (27.35 seconds)
[::] Finished 'dev:mascara:js:background' after s
[::] Finished 'dev:copy:contractImages' after s
[::] Finished 'dev:copy:fonts' after s
[::] Starting 'manifest:chrome'...
[::] Finished 'manifest:chrome' after ms
[::] Starting 'manifest:opera'...
[::] Finished 'manifest:opera' after ms
[::] Finished 'dev:copy' after s
[::] bytes written (35.72 seconds)
[::] Finished 'dev:mascara:js:ui' after s
[::] Finished 'dev:mascara:js' after s
再在浏览器运行http://localhost:9002
然后就能够惊喜地发现,错误解决了:
MetaMask/metamask-extension/mascara 的运行实现的更多相关文章
- MetaMask/zero-client
https://github.com/MetaMask/zero-client MetaMask ZeroClient and backing iframe service architecture ...
- Guide to Porting MetaMask to a New Environment
https://github.com/MetaMask/metamask-extension/blob/develop/docs/porting_to_new_environment.md MetaM ...
- MetaMask/metamask-extension-provider
用来探测你的浏览器中有没有安装metamask插件 https://github.com/MetaMask/metamask-extension-provider MetaMask Extension ...
- metamask源码学习导论
()MetaMask Browser Extension https://github.com/MetaMask/metamask-extension 这就是整个metamask的源码所在之处,好好看 ...
- metamask源码学习-ui/index.js
The UI-即上图左下角metamask-ui部分,即其图形化界面 The MetaMask UI is essentially just a website that can be configu ...
- 通过METAMASK调试和发布智能合约指南(转载)
2017-12-07 芯链团队 小明微思考 原文地址:https://mp.weixin.qq.com/s?__biz=MzA4Mzk2MzUzNg==&mid=2651223347& ...
- 青山不遮,毕竟东流,集成Web3.0身份钱包MetaMask以太坊一键登录(Tornado6+Vue.js3)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_213 上世纪九十年代,海湾战争的时候,一位美军军官担心他们的五角大楼会被敌人的一枚导弹干掉,从而导致在全球的美军基地处于瘫痪状态. ...
- 运行metamascara时出现的一些错误
The difference between mascara and the extension Mascara Is in alpha and some of it's behaviors are ...
- metamascara学习导论
研究了一段时间的metamascara终于有了一点起色,因为前段时间有一个小伙伴问了我一个问题,就是能不能将metamask嵌入到自己设计的网站中,在自己要进行交易的时候也会弹出一个页面来让用户确认这 ...
随机推荐
- c# 导出表格 api
Exportxian() { var url = "/api/Ema_bilingBill/ExportXianDeclaration"; const params = {}; v ...
- RBAC 权限设计(转载)
来源 :https://blog.csdn.net/rocher88/article/details/43190743 这是我在网上找的一些设计比较好的RBAC权限管理 不知道,像新浪.搜狐.网易.百 ...
- 【代码笔记】Web-ionic-按钮
一,效果图. 二,代码.index.html文件如下所示. <!DOCTYPE html> <html> <head> <meta charset=" ...
- Code::Blocks + GDAL
[root@server20 ~]# yum install cmake cmake-gui [root@server20 ~]# yum install cairo-devel libcurl-de ...
- mysql从入门到放弃-入门知识介绍
数据库在互联网网站的重要性 简单地说,数据库就是一个存放数据的仓库,这个仓库是按照一定的数据结构来组织和存储的,我们可以通过数据库提供的多种方法来管理数据库里的数据.由于数据库不易扩展,所以,在一个互 ...
- Fiddler抓包使用教程-Https
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/72956016 本文出自[赵彦军的博客] 开启 Https 抓包 Fiddler 默 ...
- 阿里云 centos7 django + uWSGI+Nginx + python3 部署攻略
centos7+nginx+python3+django+uwsgi配置Django 项目部署 1.租的服务器(选择centos)的话,需要在阿里云后台控制台开放几个端口,克隆一下已开放的端口,t ...
- 成功清除 windows2008 内部版本7601 字眼
cmd—>bcdedit -set testsigning off重启电脑就好了
- gitlab 和 github 配置 SSH Keys
gitlab 文档上给了很好的配置的例子:https://gitlab.com/help/ssh/README#locating-an-existing-ssh-key-pair 针对mac 下的使用 ...
- StartUML用法
转载地址 http://blog.csdn.NET/tianhai110 (下面参考了原博主的内容,也加入自己的内容,为了自己脑补,也方便其他看到的人脑补) 使用StartUML绘制用例图: ...