Skip to main content

Develop a Snap

A Snap can extend the dapp-facing MetaMask JSON-RPC API in arbitrary ways, or integrate with and extend the functionality of MetaMask using the Snaps Exports, Snaps JSON-RPC API, and permissions.

Before developing a Snap, it's important to understand:

You can get started quickly using the Snaps template or follow a tutorial.

This page describes additional important steps when developing a Snap.

Detect the user's MetaMask version​

When developing a website that depends on MetaMask Flask, you first need to know whether the user has it installed.

The following example uses the @metamask/detect-provider package to get the provider object from MetaMask first:

import detectEthereumProvider from '@metamask/detect-provider';

// This resolves to the value of window.ethereum or null
const provider = await detectEthereumProvider();

// web3_clientVersion returns the installed MetaMask version as a string
const isFlask = (
  await provider?.request({ method: 'web3_clientVersion' })
)?.includes('flask');

if (provider && isFlask) {
  console.log('MetaMask Flask successfully detected!');

  // Now you can use Snaps!
} else {
  console.error('Please install MetaMask Flask!', error);
}

Test your Snap​

Test your Snap by hosting it locally using mm-snap serve, installing it in Flask, and calling its API methods from a web page.

note

If you use the template Snap monorepo, running yarn start will serve the Snap at http://localhost:8080

Debug your Snap​

To debug your Snap, use console.log and inspect the MetaMask background process. You can add your log statements in your source code and build your Snap, or add them directly to your Snap bundle and use mm-snap manifest --fix to update the shasum in your Snap manifest file. The manifest shasum must match the contents of your bundle at the time MetaMask fetches your Snap.

note

Because adding logs modifies the Snap source code, you must re-install the Snap whenever you add a log statement.

The Snap log output is only visible in the extension background process console. If you're using a Chromium browser, use the following steps to inspect the background process and view its console:

  1. Go to chrome://extensions.
  2. Toggle Developer mode on in the top right corner.
  3. Find MetaMask Flask, and select Details.
  4. Under Inspect views, select background.html.

The log output displays in the console that pops up.

Publish your Snap​

Snaps are npm packages, so publishing a Snap is as simple as publishing an npm package. Refer to the npm CLI documentation for details on publishing to the public registry. The following details are specific to Snaps:

  • The version in package.json and snap.manifest.json should match.
  • The repository.url field in package.json should match the correct repository for your Snap.
  • The source.location.npm.packageName in snap.manifest.json should match the name in package.json.
  • The proposedName in snap.manifest.json should be a human-readable name and should not include the words "MetaMask" or "Snap."
  • The image specified in iconPath in the manifest file is used as the icon displayed when installing the Snap, in custom dialogs, and in the settings menu.
    • This icon should be a valid SVG.
    • The icon will be cropped in a circle when displayed in MetaMask; you do not need to make the icon circular.

After publishing the Snap, any dapp can connect to the Snap by using the Snap ID npm:[packageName].

caution

If you are using the Snap template, make sure to only publish the Snap package in /packages/snap. You can use the Snaps Simulator to verify that your Snap was published correctly — just select localhost in the top right corner and change the Snap location to npm and the ID of your Snap.

Also, make sure to update the manifest file, icon file, and README to differentiate your Snap from the template.

Distribute your Snap​

You should deploy a dapp where users can learn about your Snap and install it, or integrate with your existing dapp.

If your Snap is designed to communicate with dapps, you can encourage other dapp developers to integrate your Snap.

Resources and tools​

You can review the growing number of example Snaps maintained by MetaMask, as well as the following fully functional and open source Snaps:

MetaMask also maintains tools to help developers build, debug, and maintain Snaps:

  • Template Snap - A template that includes TypeScript/React and vanilla JavaScript options and a CLI for building, packaging, and deploying your Snap and a companion dapp.
  • Snaps Simulator - A developer tool built for simulating Snaps in the browser, streamlining the development process.
  • Snaps Truffle Box - A template that combines the TypeScript template Snap and Truffle so you can easily test Snaps that use smart contracts with Ganache.
  • Test Snaps - A collection of test Snaps and a dapp for evaluating them.

If you have any questions, ask them on GitHub discussions, and if you encounter any issues, please open a GitHub issue.