MetaMask/metamask-extension/mascara 的运行实现
https://github.com/MetaMask/metamask-extension/tree/develop/mascara
找了很多个实例,基本上很少是不使用线上钱包的,只有metamask-extension的mascara实例中实现了,下面是将整个metamask-extension下载下来,进行配置,然后运行的步骤:
进行环境部署:
Building locally
- InstallNode.jsversion 8.11.3 and npm version 6.1.0
- If you are usingnvm(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 usingnvm(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.0error: pathspec'4.0'did not match any file(s) known to git.at ChildProcess.exithandler (child_process.js:291:12)at ChildProcess.emit (events.js:182:13)at maybeClose (internal/child_process.js:961:16)at Socket.stream.socket.on (internal/child_process.js:380:11)at Socket.emit (events.js:182:13)at Pipe._handle.close (net.js:595:12)
导致这个错误的原因在package.json这个文件中的:
"gulp": "github:gulpjs/gulp#4.0",
将其改成:
"gulp": "4.0",
就好了
再运行npm install,但是后面又出错:
/Users/user/.node-gyp/10.5.0/include/node/node.h:88:20: note: expanded frommacro'NODE_DEPRECATED'__attribute__((deprecated(message))) declarator^../src/addon.cpp:59:36: error: no matching member function forcall to'NewInstance'info.GetReturnValue().Set(cons->NewInstance(argc...~~~~~~^~~~~~~~~~~ /Users/user/.node-gyp/10.5.0/include/node/v8.h:3914:44: note: candidatefunction not viable: requires single argument'context', but 2argumentswere providedV8_WARN_UNUSED_RESULT MaybeLocal<Object>NewInstance(^ /Users/user/.node-gyp/10.5.0/include/node/v8.h:3911:44: note: candidatefunction not viable: requires3 arguments, but 2were providedV8_WARN_UNUSED_RESULT MaybeLocal<Object>NewInstance(^ 4 warnings and 1error generated. make:*** [Release/obj.target/sha3/src/addon.o] Error 1gyp ERR!build error gyp ERR! stack Error: `make` failed with exit code: 2gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23) gyp ERR! stack at ChildProcess.emit (events.js:182:13) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:237:12) gyp ERR! System Darwin 18.0.0gyp 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.0gyp ERR! node-gyp -v v3.8.0gyp ERR!not ok npm WARN The package css-loader is included asboth a dev and production dependency. npm WARN The package eslint-plugin-react is included asboth a dev and production dependency. npm WARN The package eth-json-rpc-middleware is included asboth a dev and production dependency. npm WARN The package eth-keyring-controller is included asboth a dev and production dependency. npm WARN The package file-loader is included asboth a dev and production dependency. npm WARN The package gulpis included asboth a dev and production dependency.npm ERR!code ELIFECYCLE npm ERR! errno 1npm ERR! sha3@1.2.0 install: `node-gyp rebuild` npm ERR! Exit status 1npm ERR!npm ERR! Failed at the sha3@1.2.0install script. npm ERR! This is probably not a problem with npm. There islikely additional logging output above.npm ERR! A complete log of this run can be found in: npm ERR! /Users/user/.npm/_logs/2018-11-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 10 support.
之后运行gulp build去生成dist文件夹时也遇见了错误:
gulp build fs.js:119throwerr;^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,又遇见一个错:
[18:07:02] Did you forget to signal async completion? /Users/user/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e/gulpfile.js:522throwerr^Error: Parsing file/Users/user/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e/node_modules/eth-sig-util/index.js: Identifier 'Buffer' has already been declared (2:8)
解决方法:
到文件处将
const { Buffer } = require('buffer');
注释掉,因为nodejs将Buffer定义为全局变量,不用require,然后再运行gulp build ,然后就成功了,然后就能够看见多了一个dist文件夹
然后就能够运行mascara了:
但是在运行npm run mascara的时候,会出错:
npm run mascara> metamask-crx@0.0.0 mascara /Users/user/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e> gulp dev:mascara & node ./mascara/example/serverMascara service listening on port9001Dapp listening on port9002events.js:167throw 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 = newSwController({fileName:'./script/background.js',keepAlive:true,keepAliveInterval:30000,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-controllerconst 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=SericeWorkerStreamfunction SericeWorkerStream({ serviceWorker, context }) {//create message channel for communicationconst messageChannel = newMessageChannel()//send handshake including port to respond onserviceWorker.postMessage({ action: 'handshake', context }, [messageChannel.port2])//construct stream around local message channel portconst portStream = newPortStream(messageChannel.port1)returnportStream }
后面再查看了一下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 = newSwController({fileName:'/service-worker.js',//optional, scope used when registering service workerscope: '/',//default: true, pings the service worker to keep it alivekeepAlive: 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').ParentStreamconst SwController = require('sw-controller')//const SwStream = require('sw-stream/lib/sw-stream.js') const SwStream = require('sw-stream')//改了const keepAliveDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000 const background = newSwController({fileName:'/background.js',keepAlive:true,keepAliveInterval:30000,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.0 mascara /Users/user/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e> gulp dev:mascara & node ./mascara/example/serverMascara service listening on port9001Dapp listening on port9002Bundle updated! (/Users/user/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e/mascara/example/app.js) [10:41:31] Using gulpfile ~/metamask-extension-8c3091aa7ad31e41e8f62bd5c0b803de45816b0e/gulpfile.js [10:41:31] Starting 'dev:mascara'... [10:41:31] Starting 'clean'... [10:41:31] Finished 'clean' after 132ms [10:41:31] Starting 'dev:scss'... [10:41:32] Finished 'dev:scss' after 638ms [10:41:32] Starting 'dev:mascara:js'... [10:41:32] Starting 'dev:copy'... [10:41:32] Starting 'dev:reload'... [10:41:32] Starting 'dev:mascara:js:ui'... [10:41:32] Starting 'dev:mascara:js:proxy'... [10:41:32] Starting 'dev:mascara:js:background'... [10:41:32] Starting 'dev:mascara:js:metamascara'... [10:41:32] Starting 'dev:copy:locales'... [10:41:32] Starting 'dev:copy:images'... [10:41:32] Starting 'dev:copy:contractImages'... [10:41:32] Starting 'dev:copy:fonts'... [10:41:32] Starting 'dev:copy:reload'... [10:41:32] Starting 'dev:copy:html'... [10:41:32] Starting 'dev:copy:manifest'... [10:41:32] Starting 'dev:copy:html:mascara'... [10:41:32] Finished 'dev:copy:html:mascara' after 89ms [10:41:32] Finished 'dev:copy:manifest' after 153ms [10:41:33] Finished 'dev:copy:reload' after 796ms [10:41:33] Finished 'dev:copy:html' after 1.06s [10:41:45] Finished 'dev:copy:locales' after 13s [10:41:49] Finished 'dev:copy:images' after 17s [10:41:51] 801665 bytes written (18.85seconds) [10:41:51] Finished 'dev:mascara:js:proxy' after 19s [10:41:53] 1236552 bytes written (20.51seconds) [10:41:53] Finished 'dev:mascara:js:metamascara' after 21s [10:41:59] 10910194 bytes written (27.35seconds) [10:42:00] Finished 'dev:mascara:js:background' after 28s [10:42:04] Finished 'dev:copy:contractImages' after 32s [10:42:05] Finished 'dev:copy:fonts' after 33s [10:42:05] Starting 'manifest:chrome'... [10:42:05] Finished 'manifest:chrome' after 40ms [10:42:05] Starting 'manifest:opera'... [10:42:05] Finished 'manifest:opera' after 33ms [10:42:05] Finished 'dev:copy' after 33s [10:42:08] 27940940 bytes written (35.72seconds) [10:42:09] Finished 'dev:mascara:js:ui' after 37s [10:42:09] Finished 'dev:mascara:js' after 37 s
再在浏览器运行http://localhost:9002
然后就能够惊喜地发现,错误解决了:
转载于:https://www.cnblogs.com/wanghui-garcia/p/9911016.html
MetaMask/metamask-extension/mascara 的运行实现相关推荐
- 第27篇 联盟链 + metamask + remix 玩转智能合约
本文环境: 区块链:以太坊POA联盟链: 操作系统:windows 64: 节点版本:Geth1.9.14: 浏览器:chrome: metamask版本:metamask-chrome-7.7.9: ...
- App Extension
Today extensions (今日扩展): Today extension就是我们上面所说的通知中心扩展,因为这个扩展会显示在我们通知中心的 "今天" 这个标签下面.这个扩展 ...
- iOS App添加扩展App Extension
主要参考文章 : https://www.cnblogs.com/fengmin/p/6118592.html demo地址,里面额外添加了一个分享的扩展 : https://github.com ...
- iOS App Extension 介绍
应用扩展介绍 App Extension是iOS8推出来的一个新特性,iOS9,iOS10中相继推出了许多新的扩展点. 应用扩展程序可以让我们自定义功能和内容扩展到应用程序之外,并在用户与其他应用程序 ...
- zeppelin连接数据源_使用开放源代码合同(open-zeppelin)创建以太坊令牌
zeppelin连接数据源 by Danny 通过丹尼 使用开放源代码合同(open-zeppelin)创建以太坊令牌 (Create an Ethereum token using open sou ...
- 一文了解区块链开发最全技术资料!
本文收集了所有区块链(BlockChain)技术开发的相关资料,包括 Fabric 和 Ethereum 开发资料,一应俱全,赶快 Mark 起来吧! 介绍 入门 区块链技术指南:区块链领域比较系统的 ...
- 区块链以太坊五大开发工具,你喜欢哪个?
链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. 以太坊(Ethereum)是运行智能合约的最受欢迎的分布式平台之一.因为虚拟货币近年来的发展,以太坊以区块链为基础引起广 ...
- [译] 使用 Web3 和 Vue.js 来创建你的第一个以太坊 dAPP(第二部分)
原文地址:Create your first Ethereum dAPP with Web3 and Vue.JS (Part 2) 原文作者:Alt Street 译文出自:掘金翻译计划 本文永久链 ...
- 【译】Getting Started With Ethereum and Building Basic Dapp — Part 1
什么是以太坊 以太坊是一个分散的计算机/节点网络; 网络中的每个节点执行一些字节码(即智能合同)并将结果状态存储在区块链中. 由于区块链代表应用程序状态的属性,这导致"应用程序完全按照编程运 ...
- 服务器端调用智能合约,《精通以太坊:开发智能合约和去中心化应用》 ——3.4 远程调用以太坊客户端...
远程调用以太坊客户端 远程调用以太坊的客户端是指相比全功能客户端,只提供了一部分功能的客户端.这些客户端通常不会保存完整的区块链数据,所以它们的启动速度更快,也不会消耗大量的磁盘空间. 远程调用以太坊 ...
最新文章
- linux python2和python3共存_linux-Centos7安装python3并与python2共存
- 怎样做到真实再现传统文化艺术?
- java logout_Java Core.logout方法代码示例
- 网络请求的基本知识《极客学院 --AFNetworking 2.x 网络解析详解--1》学习笔记...
- 一文说通异步 LINQ
- log4j 程序日志_使用log4j监视和筛选应用程序日志到邮件
- SQL零基础学习笔记(一)
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(四)实现2D人物动画①
- 探探经营范围变更:新增演出经纪和电信业务
- 2018微博词云项目深度解析
- C# 根据年月日计算星期几
- 微信公众号-注册最全6种类型接口权限,注册哪个好?
- c语言程序怎么实现模块化,【干货】教你如何对一个大的项目进行模块化编程...
- Kotlin:Outdated Kotlin Runtime问题修复
- could not initialize proxy -the owning Session was closed解决方法
- 如何在电脑上运行知乎?
- SR(Segment Routing)不是MPLS的优化和升级
- Linux中合并多个Pdf文件(使用pdfunite,合并比较简单)
- 大数据时代对存储发展需要哪些要求
- Javascript点击显示或隐藏下拉框
热门文章
- React Native——一次学习,随处编写
- 《Java程序员职场全攻略:从小工到专家》连载十:这条路大家都是怎么走的
- linux运行隐藏脚本,linux 下隐藏进程的一种方法及遇到的坑
- cad画流程图的插件_如何用cad画交互流程图
- appscan无法连接到服务器_和平精英无法连接到服务器是怎么回事 最新解决方案...
- 蓝桥杯2019年第十届C/C++国赛B组 题B-质数拆分(素数筛选+01背包问题)
- 蓝桥杯2017年第八届C/C++省赛A组第一题-迷宫
- rk3288_Android7.1长按recovery按键5s之后恢复出厂设置
- hive执行更新和删除操作
- Java 核心技术点之注解