MetaMask Snaps - Development插件钱包的插件

电报联系方式

MetaMask是以太坊虚拟机（EVM）生态系统中最知名的浏览器插件钱包，而Snaps则是它的一项新功能，它允许开发者扩展MetaMask，以为用户提供更多多样化和定制化的服务。截止到 2023 年 6 月，MetaMask 是唯一一家支持自定义插件的钱包提供商.

官网：https://metamask.io/snaps/

功能

使用 Snaps 可以支持以下功能：

1、扩展新API

2、实现多种区块链协议的支持，包括非EVM系列区块链

3、对现有功能和信息进行修改，包括对话框和提醒。

4、展示交易信息，包括访问区块链节点数据。

5、执行定时任务以满足用户周期性操作需求。

6、允许访问互联网。

7、提供自定义用户界面（UI）的能力。

Development

开发者文档：https://docs.metamask.io/snaps/

要开发MetaMask Snaps需要使用MetaMask的开发者版本，也称为MetaMask Flask钱包。此外还需要在本地安装Node.js和Yarn环境。

Caution.MetaMask 和 MetaMask Flask 不能在同一个浏览器中同时启用，最好将 MetaMask Flask 安装到另一个未安装 MetaMask 的浏览器上

脚手架初始化参考 官方 QuickStart

我们开发功能主要对 packages/snap/src/index.ts 来进行修改

import { OnRpcRequestHandler } from '@metamask/snaps-types';
import { panel, text } from '@metamask/snaps-ui';

/**
* Handle incoming JSON-RPC requests, sent through `wallet_invokeSnap`.
*
* @param args - The request handler args as object.
* @param args.origin - The origin of the request, e.g., the website that
* invoked the snap.
* @param args.request - A validated JSON-RPC request object.
* @returns The result of `snap_dialog`.
* @throws If the request method is not valid for this snap.
*/
export const onRpcRequest: OnRpcRequestHandler = ({ origin, request }) => {
switch (request.method) {
case 'hello':
return snap.request({
method: 'snap_dialog',
params: {
type: 'confirmation',
content: panel([
text(`Hello, **${origin}**!`),
text('This custom confirmation is just for display purposes.'),
text(
'But you can edit the snap source code to make it do something, if you want to!',
),
]),
},
});
default:
throw new Error('Method not found.');
}
};

网站页面的配置在 packages/site 路径下

官方教程

官方提供一些功能教程，比如预估 gas 和展示交易信息

我查看了GitHub仓库，并尝试了开发用于估算Gas费用的Snaps

它主要是通过联网访问第三方 API 获取当前 gas fee

需要在 packages/snap/snap.manifest.json 中的 initialPermissions 下添加 "endowment:network-access": {} 这个许可来访问网络，进而访问第三方 API

然后在 packages/snap/src/index.ts 中增加相关逻辑代码即可响应并展示给用户

开发联系：DEXDAO