介绍官网:https://metamask.io/snaps/ MetaMask是EVM系最著名的浏览器插件钱包,而Snaps则是其一个新功能——为MetaMask做扩展,进而为用户提供多样化/定制化服务
Extend the functionality of MetaMask
MetaMask 是 EVM 系最著名的浏览器插件钱包,而 Snaps 则是其一个新功能——为 MetaMask 做扩展,进而为用户提供多样化/定制化服务
截止到 2023 年 6 月,MetaMask 是唯一一家支持自定义插件的钱包提供商
使用 Snaps 可以支持以下功能:
开发者文档:https://docs.metamask.io/snaps/
想要开发 MetaMask Snaps 需要使用 MetaMask Flask 钱包,也就是 MetaMask 的开发者版本。除此之外,还需要本地安装 Node.js 与 Yarn 环境
注意: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 和展示交易信息
我参考 官方教程 尝试了开发预估 gas 的 Snap
repo: https://github.com/Confucian-e/gas-estimation-snap
它主要是通过联网访问第三方 API 获取当前 gas fee
需要在 packages/snap/snap.manifest.json
中的 initialPermissions
下添加 "endowment:network-access": {}
这个许可来访问网络,进而访问第三方 API
然后在 packages/snap/src/index.ts
中增加相关逻辑代码即可响应并展示给用户
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!