# Introduction
Developer Preview Software
Snaps is pre-release software. To try Snaps, install MetaMask Flask (opens new window).
# What is Snaps?
Snaps is a system that allows anyone to safely expand the capabilities of MetaMask. A "snap" is a program that we run in an isolated environment that can customize the wallet experience. For example, a snap can add new APIs to MetaMask, add support for different blockchain protocols, or modify existing functionality using internal APIs. Snaps is a new way to create web3 end user experiences, by modifying MetaMask in ways that were impossible before.
Snaps are run in an isolated environment where they have access to a limited set of capabilities, determined by the permissions they were granted by the user during installation. As with MetaMask’s Ethereum Provider RPC API, snaps communicate with MetaMask using JSON-RPC.
New RPC methods have been added to our Ethereum Provider JSON-RPC API as well, which are documented as part of the Snaps RPC API. These new methods are what allow snaps to modify the functionality of MetaMask. In addition, they also allow websites to install and communicate with individual snaps.
# Current Functionality
At present, snaps can create new RPC methods for websites to call, can call many of the same RPC methods that websites can call, and access a limited set of snap-exclusive RPC methods. See the Snaps RPC API documentation for more details. Over time, MetaMask will expose more internal functionality as RPC methods, granting more capabilities to snaps.
At the moment, snaps cannot modify the MetaMask UI directly. If a snap needs a UI, that UI must exist entirely on a website that can communicate with the snap.
# Execution Environment
Snaps are untrusted JavaScript programs but execute safely inside the MetaMask application. To isolate snaps from the rest of the application and to provide a “fully virtualizable” execution environment, MetaMask uses Secure EcmaScript (SES) (opens new window), a subset of JavaScript developed by Agoric (opens new window).
Among other things, SES allows us to restrict access to global JavaScript APIs and to isolate untrusted code from other parts of the application. SES does this at the cost of some performance and incompatibility with some JavaScript practices, such as modifying prototypes of intrinsic objects (e.g. the Promise
constructor).
# Getting Started
There are many simple snaps available for you to learn from and begin to understand what your own snap needs. The following tutorial will walk you through a "Hello, World!" snap.
# Prerequisites
- Node.js
- We recommend using nvm (opens new window). If you don't want to use nvm, your local Node version needs to be greater than or equal to the one listed here (opens new window).
- git
- yarn v1 (opens new window)
- Up-to-date Chromium or Firefox browser
# Installing MetaMask Flask
MetaMask Flask (opens new window) is a separate extension for developers that provides access to additional unstable APIs. The goal of Flask is to maximize developer control, so that we can learn the full extent of what developers want to do with MetaMask and incorporate those lessons into the stable MetaMask distribution. Snaps is the first feature to be released on Flask.
- First, in a Firefox or Chromium browser, create a new browser profile or disable any existing installed versions of MetaMask.
- Running multiple instances of MetaMask in the same browser profile will break dapp interactions.
- Next, download Flask (opens new window) and add it your chosen browser.
# Serving a Snap to Your Local Environment
With Flask in your browser, it's time to plug something into it. If you don't want to download any code for the moment, check out the example snap deployed here (opens new window) and follow the instructions below under 'Interacting with the Snap'.
If you're ready to jump in and see how a Snap looks under the hood, follow the steps below!
Open up a new terminal window, and do the following:
- Clone the template snap (opens new window) repo.
cd
into the repo, and runnvm use
.- This will install and/or use the recommended NVM version from
.nvmrc
.
- This will install and/or use the recommended NVM version from
- Run
yarn install && yarn build:clean && yarn serve
.- This first runs the commands needed to install dependencies.
- If there is a
dist/
folder, it is then cleaned before the build command is run. - Finally, the dapp is served on
http://localhost:8080
.
Your terminal window should now be serving the example snap locally. Time to see the functionality in action!
# Interacting with the Snap
If you're serving the snap locally, open up a browser window and navigate to http://localhost:8080
.
You should see a simple message explaining the functionality of the snap and two buttons. Start by clicking the Connect
button; your Flask extension should pop up and require you to click through two notifications.
Once you've connected to Flask, smash that Send Hello
button, and watch the snap display your "hello" message!
# Where to Go from Here
- If you're interested in developing your own snap, your next destination is probably the Snaps development guide.
- You can also try the following example snaps. Each one is fully functional and open-source:
- If you have questions or need help, join our discussion board (opens new window).