MetaMask Snaps - プラグインウォレットのためのプラグインを作成します。

metamask-snap-banner

介绍#

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

MetaMask の機能を拡張する

MetaMask は EVM 系で最も有名なブラウザプラグインウォレットであり、Snaps は MetaMask の新機能の 1 つであり、ユーザーに多様な / カスタマイズされたサービスを提供します。

2023 年 6 月までに、MetaMask はカスタムプラグインをサポートする唯一のウォレットプロバイダーです。

機能#

Snaps を使用すると、次の機能をサポートできます：

新しい API の追加
さまざまなブロックチェーンプロトコルのサポート：EVM 系以外のブロックチェーンのサポート
既存の機能 / 情報の変更：ダイアログ、リマインダー
トランザクション情報の表示：ブロックチェーンノードへのアクセス
定期的なタスク：ユーザーの定期的な操作
インターネットへのアクセス
カスタム UI

開発#

開発者ドキュメント：https://docs.metamask.io/snaps/

MetaMask Snaps を開発するには、MetaMask Flask ウォレットを使用する必要があります。これは MetaMask の開発者向けバージョンです。また、Node.js と Yarn の環境をローカルにインストールする必要もあります。

注意：MetaMask と MetaMask Flask を同じブラウザで同時に有効にすることはできません。MetaMask Flask を MetaMask がインストールされていない別のブラウザにインストールすることをお勧めします。

スケルトンの初期化については、公式クイックスタートを参照してください。

機能の開発は、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(`こんにちは、**${origin}**！`),
            text('このカスタム確認は表示目的のみです。'),
            text(
              'ただし、必要に応じてスナップソースコードを編集して何かを実行することもできます。',
            ),
          ]),
        },
      });
    default:
      throw new Error('メソッドが見つかりません。');
  }
};

ウェブサイトのページの設定は、packages/siteパスにあります。

官方教程#

公式では、ガスの見積もりやトランザクション情報の表示など、いくつかのチュートリアルを提供しています。

私は公式チュートリアルを参考にして、ガスの見積もりの Snap の開発を試みました。

リポジトリ：https://github.com/Confucian-e/gas-estimation-snap

これは、インターネットへのアクセスを通じてサードパーティ API から現在のガス手数料を取得するためのものです。

ネットワークへのアクセスを許可するために、packages/snap/snap.manifest.jsonのinitialPermissionsの下に"endowment:network-access": {}を追加する必要があります。

その後、packages/snap/src/index.tsに関連するロジックコードを追加して、ユーザーに応答して表示するだけです。

snaps-gas-estimation