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:
- The Snap anatomy.
- The Snap lifecycle.
- The Snap user interface.
- The MetaMask Snaps execution environment.
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.
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.
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:
- Go to
chrome://extensions
. - Toggle Developer mode on in the top right corner.
- Find MetaMask Flask, and select Details.
- 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
andsnap.manifest.json
should match. - The
repository.url
field inpackage.json
should match the correct repository for your Snap. - The
source.location.npm.packageName
insnap.manifest.json
should match the name inpackage.json
. - The
proposedName
insnap.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]
.
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.