{"content":{"title":"MetaMask  Snaps - 为插件钱包写插件","body":"![MetaMask-Snaps-Banner.png](https://img.learnblockchain.cn/attachments/2023/10/M2waX34I6521f7ef0ebfd.png)\r\n\r\n## 介绍\r\n\r\n官网：https://metamask.io/snaps/\r\n\r\n> Extend the functionality of MetaMask\r\n\r\nMetaMask 是 EVM 系最著名的浏览器插件[钱包](https://learnblockchain.cn/article/4615)，而 Snaps 则是其一个新功能——为 MetaMask 做扩展，进而为用户提供多样化/定制化服务\r\n\r\n截止到 2023 年 6 月，MetaMask 是唯一一家支持自定义插件的钱包提供商\r\n\r\n## 功能\r\n\r\n使用 Snaps 可以支持以下功能：\r\n\r\n- 增加新的 API\r\n- **支持各种不同的区块链协议**：支持非 EVM 系区块链\r\n- 修改现有功能/信息：对话框、提醒\r\n- 展示交易信息：能够访问区块链节点\r\n- 定时任务：用户周期性操作\r\n- 访问互联网\r\n- 自定义 UI\r\n\r\n## 开发\r\n\r\n开发者文档：https://docs.metamask.io/snaps/\r\n\r\n想要开发 MetaMask Snaps 需要使用 MetaMask Flask 钱包，也就是 MetaMask 的开发者版本。除此之外，还需要本地安装 Node.js 与 Yarn 环境\r\n\r\n_注意：[MetaMask](https://decert.me/tutorial/solidity/tools/metamask) 和 MetaMask Flask 不能在同一个浏览器中同时启用，最好将 MetaMask Flask 安装到另一个未安装 MetaMask 的浏览器上_\r\n\r\n脚手架初始化参考 [官方 QuickStart](https://docs.metamask.io/snaps/get-started/quickstart/)\r\n\r\n我们开发功能主要对 `packages/snap/src/index.ts` 来进行修改\r\n\r\n```typescript\r\nimport { OnRpcRequestHandler } from '@metamask/snaps-types';\r\nimport { panel, text } from '@metamask/snaps-ui';\r\n\r\n/**\r\n * Handle incoming JSON-RPC requests, sent through `wallet_invokeSnap`.\r\n *\r\n * @param args - The request handler args as object.\r\n * @param args.origin - The origin of the request, e.g., the website that\r\n * invoked the snap.\r\n * @param args.request - A validated JSON-RPC request object.\r\n * @returns The result of `snap_dialog`.\r\n * @throws If the request method is not valid for this snap.\r\n */\r\nexport const onRpcRequest: OnRpcRequestHandler = ({ origin, request }) => {\r\n  switch (request.method) {\r\n    case 'hello':\r\n      return snap.request({\r\n        method: 'snap_dialog',\r\n        params: {\r\n          type: 'confirmation',\r\n          content: panel([\r\n            text(`Hello, **${origin}**!`),\r\n            text('This custom confirmation is just for display purposes.'),\r\n            text(\r\n              'But you can edit the snap source code to make it do something, if you want to!',\r\n            ),\r\n          ]),\r\n        },\r\n      });\r\n    default:\r\n      throw new Error('Method not found.');\r\n  }\r\n};\r\n\r\n```\r\n\r\n网站页面的配置在 `packages/site` 路径下\r\n\r\n## 官方教程\r\n\r\n官方提供一些功能教程，比如预估 gas 和展示交易信息\r\n\r\n我参考 [官方教程](https://docs.metamask.io/snaps/tutorials/gas-estimation/) 尝试了开发预估 gas 的 Snap\r\n\r\nrepo: https://github.com/Confucian-e/gas-estimation-snap\r\n\r\n它主要是通过**联网访问**第三方 API 获取当前 gas fee\r\n\r\n需要在 `packages/snap/snap.manifest.json` 中的 `initialPermissions` 下添加 `\"endowment:network-access\": {}` 这个许可来访问网络，进而访问第三方 API\r\n\r\n然后在 `packages/snap/src/index.ts` 中增加相关逻辑代码即可响应并展示给用户\r\n\r\n![snaps-gas-estimation.png](https://img.learnblockchain.cn/attachments/2023/10/IVcB3QfZ6521f7e0470f2.png)"},"author":{"user":"https://learnblockchain.cn/people/5673","address":null},"history":"QmY2Ldpm717qcvkmnhbnNbvF4yf6fcUQ6JUAeosz6YETtg","timestamp":1697184705,"version":1}