Getting Started

Installing the MetaMask Plugin Beta

Note: At the moment, the beta only supports Google Chrome. You may experience issues if developing on Windows. We recommend a *nix environment.

To get started, you'll need to clone and build our special fork of MetaMask:

git clone [email protected]:MetaMask/metamask-plugin-beta.git
cd metamask-plugin-beta
yarn install
yarn start

yarn start will auto rebuild MetaMask on any file change. You can then add your custom build to Chrome.

Chrome will auto-reload the extension when it detects a change, but this auto-reload is not perfectly reliable, so you may want to make a habit of navigating to chrome://extensions and clicking the reload icon next to your custom MetaMask:

Running Plugin Dapps

A plugin has a few parts:

• A normal web front-end
• A package.json that defines the plugin and its permissions
• A source file bundle pointed to by package.json

To help you build those bundled files, we have a utility we call mm-plugin.

We recommend you clone that repository, and install it globally with npm to start:

git clone https://github.com/MetaMask/mm-plugin
cd mm-plugin
npm i -g mm-plugin

This gives you some tools you can use right away. You can read them by running mm-plugin --help.

To try out your new plugin branch right away, let's try out an example. You can find several interesting examples in the examples folder. We'll start with the simplest example, hello-plugin.

cd examples/hello-plugin
mm-plugin build
mm-plugin serve

This should give you a message Server listening on: http://localhost:8081. That port, and the build target are configured in the mm-plugin.config.json file, or command line arguments. You can now visit that address in your browser, and if you have installed your plugin branch of MetaMask correctly, you should be able to:

1. Click the "Connect" button on the site.
2. Approve the site's permissions request (which includes the plugin installation!)
3. Approve the plugin's permissions request (which in this case is permission to show alerts to you, to send its message)
4. Click the "Send Hello" button to receive a greeting from the plugin.

The permissions the plugin initially requests are configured in its package.json, under the web3Wallet key. This permissions request uses the same schema as an EIP 2255 permissions request. (TypeScript definition)

If you look closely at the index.html file, you'll see that interacting with the plugin required two basic API calls:

• Request to connect to or install the plugin
• Calling the "hello" method on the plugin

And if you look in the index.js file, you can see just how easy it is to add API methods to connected websites from within a plugin.

You can edit the index.js freely, and just run mm-plugin build again to rebuild the bundle. (There is also a mm-plugin watch command to rebuild automatically.) MetaMask itself doesn't yet auto-detect updates to the plugin, so you'll have to reinstall the plugin when the bundle changes.

For starting your own plugin, you might want to just copy one of the examples to start!