ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

Mist API 开发指南:在 Mist 浏览器中调用 dapp 专属能力

Mist API 开发指南:在 Mist 浏览器中调用 dapp 专属能力 区块链Web3桌面应用【免费下载链接】mist[DEPRECATED] Mist. Browse and use Ðapps on the Ethereum network.项目地址https://gitcode.com/gh_mirrors/mi/mist点击查看免费下载Mist 浏览器Mist Browser为以太坊 dapp 提供了一套仅在 Mist 环境内可用的 JavaScript API——mist全局对象。本文以仓库根目录的 MISTAPI.md 为骨架结合modules/preloader、interface/client/mistAPIBackend.js等源码实现与tests/mocha-in-browser测试用例系统讲解mistAPI 的检测方式、web3 初始化、账户请求、侧边栏子菜单控制与系统音效调用帮助你为运行在 Mist 中的 dapp 实现深度集成。注当前仓库项目为 [DEPRECATED]已弃用状态Mist 及配套 API 已不再维护本文仅作为该 API 设计与实现的完整技术参考。什么是 Mist APIMist 浏览器是一个集成了以太坊节点、账户系统与 dapp 浏览器的客户端。普通 dapp 通过 web3 与链上交互但诸如「请求用户授权一个账户」「在 Mist 侧边栏你的 dapp 按钮下方添加子菜单」「播放系统提示音」这类浏览器级能力必须通过 Mist 暴露的mist全局对象调用。mistAPI 的作用域在 modules/preloader/injected/mistAPI.js 的类注释中定义得很明确Provides an API for all dapps, which specifically targets features from the Mist browser即专门面向 Mist 浏览器独有功能的 dapp API。它不是链上交互接口而是「浏览器能力接口」。环境检测与 web3 初始化检测mist对象是否存在dapp 需要先确认自己是否运行在 Mist 环境中再决定是否使用mistAPIif (typeof mist ! undefined) { ... }由于mist是在 Mist 的 webview 预加载脚本中注入的全局变量见下文「注入机制」一节在普通浏览器中打开同一 dapp 时它不会存在因此上述检测是安全的。用 Mist 的 provider 初始化 web3Mist 同时维护了自身的 web3 provider通过 IPC 连接本地节点文档建议 dapp 优先复用该 provider否则回退到ws://localhost:8546if (typeof web3 ! undefined) { web3 new Web3(web3.currentProvider); } else { web3 new Web3(ws://localhost:8546); }两种路径的差异运行在 Mist 内web3已由 Mist 注入web3.currentProvider指向 Mist 内部维护的 provider。在预加载脚本 modules/preloader/browser.js 中Mist 会通过webFrame.executeJavaScript将mistAPI、BigNumber、EventEmitter3、EthereumProvider一起注入页面dapp 直接复用即可无需自建连接。运行在外部环境dapp 自行连接ws://localhost:8546Mist 默认监听的 WebSocket 端口此时无法访问mistAPI只能使用链上功能。API 总览mist对象按功能划分为四组MISTAPI.md 中的完整清单如下API说明mist.platform返回 Mist 当前运行的操作系统平台mist.requestAccount(callback)请求用户提供或创建一个账户mist.menu.add([id,] options, callback)添加/更新侧边栏子菜单项mist.menu.clear()清空全部子菜单项mist.menu.remove(id)移除一个子菜单项mist.menu.select(id)选中某个子菜单项mist.menu.setBadge(text)设置 dapp 主按钮下方的徽标文本mist.menu.update(id [, options][, callback])更新子菜单项等价于带 id 的 addmist.sounds.bip()/bloop()/invite()播放三种系统音效mist.platform获取当前平台mist.platform返回值为以下三者之一darwinMac OSXwin32WindowslinuxLinux从源码看该值直接来自 Electron 的process.platform。在 modules/preloader/include/mistAPI.js 中为platform: process.platform在注入版 modules/preloader/injected/mistAPI.js 中则由 modules/preloader/browser.js 在注入时执行.replace(__platform__, process.platform)填充占位符。与之配套的还有两个同类属性供 dapp 做版本判断mist.version // Mist 客户端版本取自 package.json 的 version mist.license // 许可证标识取自 package.json 的 license mist.solidity.version // 内置 Solidity 编译器版本取自 solc 依赖版本号如 0.4.xmist.solidity.version的取值逻辑见 modules/preloader/include/mistAPI.jsString(packageJson.dependencies.solc).match(/\d\.\d\.\d/)[0]测试用例 tests/mocha-in-browser/spec/general-spec.js 断言其格式匹配^\d\.\d{1,2}\.\d{1,2}$如 0.4.6、0.5.10。注意这三个附加属性并未写入 MISTAPI.md属于源码中额外暴露的实现细节。mist.requestAccount(callback)请求用户提供或创建账户用法mist.requestAccount(function(error, address) { console.log(Added new account, address); });参数Function回调函数新地址作为第二个参数传入第一个参数为错误对象。返回值无。回调在用户完成操作后被异步触发。底层调用链从源码看requestAccount是mistAPI 中唯一涉及完整 UI 弹窗流程的方法其调用链横跨注入脚本、预加载脚本、主进程与弹窗组件四层注入层modules/preloader/injected/mistAPI.jsrequestAccount先把回调存入this.callbacks.connectAccount数组再通过window.postMessage发送{ type: mistAPI_requestAccount }。预加载桥接层modules/preloader/browser.js页面中的message监听器匹配到mistAPI_requestAccount通过ipcRenderer.send(data.type, data.message)转发给主进程。主进程层modules/ipcCommunicator.js收到mistAPI_requestAccount后按运行模式分流——wallet模式直接打开requestAccount弹窗Mist 模式若请求方是钱包页面e.sender.history[0]以file://.../wallet/index.html开头也直接创建账户否则打开connectAccount弹窗让用户先选择/连接已有账户。弹窗组件层interface/components/RequestAccount.js用户填写密码并提交后调用web3.eth.personal.newAccount(pw)创建账户成功后通过backendAction_windowMessageToOwner把新地址回传给请求方。回调返回主进程向 webview 发送uiAction_windowMessage携带type、error、value经 modules/preloader/browser.js 的postMessage转发回页面注入脚本中的message监听器modules/preloader/injected/mistAPI.js匹配uiAction_windowMessage后取出对应回调并调用cb(params.error, params.value)随后删除该回调组。因此 dapp 侧看到的(error, address)签名最终address来自web3.eth.personal.newAccount(pw)的返回地址error则透传弹窗流程中的错误。mist.menu控制侧边栏子菜单mist.menu提供对 dapp 侧边栏子菜单的完整控制。当你的 dapp 被添加到 Mist 侧边栏后其按钮下方会出现一组子菜单项mist.menu负责动态增删改查这些条目。侧边栏的渲染逻辑位于 interface/client/templates/layout/sidebar.jsdapp 的menu数据会被转换为数组并按position排序position越小越靠上1为顶部渲染为ul.sub-menu按钮组点击事件会触发对应的 dapp 回调。mist.menu.add([id,] options, callback)添加或更新一个子菜单项位置在 dapp 按钮下方的侧边栏。参数String可选— 子菜单条目的 id用于后续更新时标识同一 id 在页面重载间必须保持一致源码注释明确要求 has to be the same across page reloads。Object— 菜单选项nameString子菜单按钮显示名称必填badgeString|null可选子菜单按钮的徽标文本如50positionNumber可选子菜单位置1为最顶部selectedBoolean可选该条目当前是否处于选中态。Function可选— 点击该子菜单条目时触发的回调。最小示例mist.menu.add({ name: My account });完整示例mist.menu.add( tkrzU, { name: My Meny Entry, badge: 50, position: 1, selected: true }, function() { // Redirect window.location http://domain.com/send; // Using history pushstate history.pushState(null, null, /my-entry); // In Meteor iron:router Router.go(/send); } );回调中展示了三种常见的跳转方式直接改window.location、用 HTML5history.pushState做单页应用路由、或在 Meteor 的 iron:router 中用Router.go导航。需要注意示例中My Meny Entry是原文档保留的拼写实际使用时请替换为正确文案。源码层面的行为细节modules/preloader/injected/mistAPI.js参数通过arguments末尾类型推断实现重载依次弹出末尾的Function、Object、String/有限数值因此add(options, callback)、add(id, options)、add(options)均可调用filterAdd校验options必须是对象且包含name键否则返回falseid 经filterId清洗仅保留a-z A-Z 0-9 _ -字符其余全部剔除并统一加entry_前缀存储如tkrzU最终存储为entry_tkrzU子菜单总数受MIST_SUBMENU_LIMIT 100上限约束若新 id 尚未存在且当前条目数已达 100add返回false条目先压入内部queue由setInterval每 500ms 批量通过postMessage发送mistAPI_menuChanges到宿主由 interface/client/mistAPIBackend.js 落库到 Tabs 集合进而驱动侧边栏渲染。mist.menu.update(id [, options][, callback])与mist.menu.add()行为一致但id为必填。源码中update直接this.add.apply(this, arguments)委托给add。参数String— 子菜单条目 idObject可选— 同add的 optionsname、badge、position、selected均可选Function可选— 点击回调。示例mist.menu.update(tkrzU, { badge: 50, position: 2 });测试用例 tests/mocha-in-browser/spec/general-spec.js 验证了add后再update会整体覆盖条目属性且未提供的字段如badge会保留为undefined。mist.menu.remove(id)移除一个子菜单条目。id 同样经filterId清洗并加entry_前缀。源码中删除本地entries[filteredId]并压入{ action: removeMenu, filteredId }队列后端在 interface/client/mistAPIBackend.js 中以$unset方式删除 Tabs 中对应菜单字段。参数String— 子菜单条目 id。mist.menu.select(id)将指定子菜单条目置为选中态同时取消其他条目的选中态源码遍历this.entries仅把 id 匹配项置true。参数String— 子菜单条目 id。mist.menu.setBadge(text)设置 dapp 主按钮正下方的徽标文本区别于单个子菜单项的badge这是整个 dapp 按钮的徽标。参数String— 徽标文本。后端收到mistAPI_setBadge后将该文本写入 Tabs 的badge字段见 interface/client/mistAPIBackend.js。mist.menu.clear()清空当前 dapp 的全部子菜单条目。文档特别建议在应用重载时调用clear()以清理上次会话遗留、可能已失效的菜单项避免脏数据。参数无。mist.sounds播放系统音效mist.sounds提供一组预设音效dapp 可用来做交易成功、新消息等场景的提示。三个方法均无参数mist.sounds.bip(); // 短促的 bip 提示音 mist.sounds.bloop(); // 低沉的 bloop 音效 mist.sounds.invite(); // 邀请提示音实现细节注入版通过postMessage({ type: mistAPI_sound, message: bip | bloop | invite })通知宿主预加载版则直接ipcRenderer.sendToHost(mistAPI_sound, file://.../sounds/name.mp3)。后端 interface/client/mistAPIBackend.js 收到后创建一个audio元素播放仓库 sounds 目录下对应的bip.mp3、bloop.mp3、invite.mp3文件每次播放前先pause()并重置src避免叠加播放。注入机制两个实现版本与消息桥接从源码结构看mistAPI 在仓库中存在两套实现服务于不同的运行场景文件场景通信方式modules/preloader/injected/mistAPI.js注入到外部 dapp 页面window.postMessage与宿主通信modules/preloader/include/mistAPI.js供Mist 内置界面browser.js、mistUI.js 等使用直接ipcRenderer.sendToHost两套实现的核心逻辑filterId、entry_前缀、100 条上限、500ms 队列批量发送、mistAPI_callMenuFunction/uiAction_windowMessage回调分发完全一致区别仅在传输层。外部 dapp 的完整消息链路为dapp 页面 (window.mist) → window.postMessage({ type: mistAPI_* }) → 预加载 browser.js 的 message 监听器 → ipcRenderer.send / sendToHost → 主进程 ipcCommunicator.js / 界面后端 mistAPIBackend.js → 回程: uiAction_windowMessage / mistAPI_callMenuFunction → 预加载 browser.js postMessage 转发 → dapp 页面回调其中点击菜单回调的分发链路由 modules/preloader/browser.js 处理主进程发来mistAPI_callMenuFunction含菜单 id经postMessage转发回页面注入脚本匹配mist.menu.entries[id].callback后执行——这也是 dapp 通过mist.menu.add注册的点击回调能被调用的底层原理。测试验证仓库在 tests/mocha-in-browser/spec/general-spec.js 中提供了针对mistAPI 的浏览器内测试Mocha chai覆盖了以下关键行为可作为 dapp 集成时的行为契约参考mist.platform与mist.solidity.version的格式断言mist.menu.add在缺少name、参数为空等非法输入下返回falsegeneral-spec.jsadd成功后返回trueupdate整体覆盖条目属性select的互斥选中语义选中一个其余取消remove、clear对entries的增删效果100 条子菜单上限添加 100 条后继续添加返回falsegeneral-spec.js。小结mistAPI 是 Mist 浏览器为 dapp 提供的「浏览器能力层」接口规模虽小但链路完整platform与版本信息用于环境判断requestAccount打通账户授权弹窗流程menu系列方法实现侧边栏动态菜单sounds提供系统音效。理解其注入与消息桥接机制postMessage → IPC → 主进程 → 弹窗/侧边栏 → 回调回传有助于你在自己的 dapp 中正确地探测、初始化与调用这些能力。由于 Mist 项目已弃用实际开发中可将本文作为该 API 设计模式浏览器宿主能力注入 异步回调的参考范本。赞分享区块链Web3桌面应用【免费下载链接】mist[DEPRECATED] Mist. Browse and use Ðapps on the Ethereum network.项目地址https://gitcode.com/gh_mirrors/mi/mist点击查看免费下载相关推荐Mist 浏览器Ethereum Mist开发指南从环境搭建、节点连接到构建测试的完整实践Mist 浏览器Ethereum Mist开发指南从环境搭建、节点连接到构建测试的完整实践 本文基于本仓库 README.md https://link.区块链Web3桌面应用Polymarket Copy Trading Bot交易者选择指南如何找到低风险高回报的顶尖高手Polymarket Copy Trading Bot交易者选择指南如何找到低风险高回报的顶尖高手 Polymarket Copy Trading Bot是一后端金融科技区块链Web3如何通过DEIM实现2倍训练加速CVPR 2025突破性目标检测框架深度解析如何通过DEIM实现2倍训练加速CVPR 2025突破性目标检测框架深度解析 在实时目标检测领域传统DETR模型因匈牙利匹配机制导致的收敛缓慢问题长期困扰着人工智能计算机视觉深度学习上一篇Opslane用户体验设计如何打造直观的多会话管理界面下一篇obsidian-livesync 自托管 Docker 部署指南CouchDB 栈搭建、四种访问 Profile 与运维实践创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表