Metamask - Interact with Ethereum in your Browser

Metamask 101

This post introduces Metamask, how to install it in different browsers, add Ethereum (ETH) to a test account, and explore first interactions with a Web3 application.

Why Use Metamask?

How do you connect regular users to DApps? Can you interact with the Ethereum blockchain in an intuitive and user-friendly manner? Metamask set out with a mission "make Ethereum as easy to use for as many people as possible." Metamask allows you to interact with the Ethereum blockchain from the convenience of your preferred browser.

Regular web browsers rely on HTTP requests from your computer to a web server to communicate. In a decentralized network, like Ethereum, the challenge is there is no single server to communicate with. To access the Ethereum blockchain, you would have to:

Set up a full Ethereum node on your computer to communicate with other Ethereum nodes (not practical for an average user.)

Install an Ethereum client like Mist or Parity which are hard to install, clunky and not user-friendly.

Metamask created a JavaScript library that allows your preferred browser to communicate with Ethereum nodes directly. A Metamask plugin provides:

An Ethereum Wallet: Allows you to store and send any standard Ethereum-compatible tokens (ERC-20 tokens).

An Identity Vault: Allows you to manage your identities on different sites using a secure single sign-on process and interact with multiple DApps with different addresses as well as sign blockchain transactions. This keeps your data disconnected from each other while protecting your identity as well.

A Blockchain connection: Allows a fast connection to the Ethereum blockchain without the need to run a full node. Developers can also design and run Ethereum DApps from their browsers as well.

Installing Metamask

You can install the MetaMask add-on in Chrome, Firefox, Opera, and Brave browser. The installation is pretty straightforward across the browsers. In this post, we walk you through installing Metamask on the Chrome browser.

Step 1: Go to the Chrome Webstore and search for Metamask in the Extensions search box.

Step 2: Click Add to Chrome to install Metamask.

Alternatively you can go directly to metamask.io to get the extension.

Step 3: Accept the notification and click Add Extension to install.

The install is complete when you see the Metamask fox logo on the upper right corner of your browser.

Metamask's Interaction with a Web3 Application: Cryptokitties

There are various DApps to explore depending on your interest. For our example, we explore Metamask's interaction with Cryptokitties. Cryptokitties is a game created through blockchain technology that allows users to collect and breed cat-like creatures called "Cryptokitties."