• Stars
    star
    10,758
  • Rank 3,174 (Top 0.07 %)
  • Language
    JavaScript
  • License
    Other
  • Created about 9 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🌐 🔌 The MetaMask browser extension enables browsing Ethereum blockchain enabled websites

MetaMask Browser Extension

You can find the latest version of MetaMask on our official website. For help using MetaMask, visit our User Support Site.

For general questions, feature requests, or developer questions, visit our Community Forum.

MetaMask supports Firefox, Google Chrome, and Chromium-based browsers. We recommend using the latest available browser version.

For up to the minute news, follow our Twitter or Medium pages.

To learn how to develop MetaMask-compatible applications, visit our Developer Docs.

To learn how to contribute to the MetaMask project itself, visit our Internal Docs.

Building locally

  • Install Node.js version 16
    • If you are using nvm (recommended) running nvm use will automatically choose the right node version for you.
  • Install Yarn v3
    • ONLY follow the steps in the "Install Corepack" and "Updating the global Yarn version" sections
    • DO NOT take any of the steps in the "Initializing your project", "Updating to the latest versions" or "Installing the latest build fresh from master" sections. These steps could result in your repo being reset or installing the wrong yarn version, which can break your build.
  • Duplicate .metamaskrc.dist within the root and rename it to .metamaskrc
  • Build the project to the ./dist/ folder with yarn dist.
    • Optionally, you may run yarn start to run dev mode.

Uncompressed builds can be found in /dist, compressed builds can be found in /builds once they're built.

See the build system readme for build system usage information.

Git Hooks

To get quick feedback from our shared code quality fitness functions before committing the code, you can install our git hooks with Husky.

$ yarn githooks:install

You can read more about them in our testing documentation.

Contributing

Development builds

To start a development build (e.g. with logging and file watching) run yarn start.

React and Redux DevTools

To start the React DevTools, run yarn devtools:react with a development build installed in a browser. This will open in a separate window; no browser extension is required.

To start the Redux DevTools Extension:

  • Install the package remotedev-server globally (e.g. yarn global add remotedev-server)
  • Install the Redux Devtools extension.
  • Open the Redux DevTools extension and check the "Use custom (local) server" checkbox in the Remote DevTools Settings, using the default server configuration (host localhost, port 8000, secure connection checkbox unchecked).

Then run the command yarn devtools:redux with a development build installed in a browser. This will enable you to use the Redux DevTools extension to inspect MetaMask.

To create a development build and run both of these tools simultaneously, run yarn start:dev.

Test Dapp

This test site can be used to execute different user flows.

Running Unit Tests and Linting

Run unit tests and the linter with yarn test. To run just unit tests, run yarn test:unit.

You can run the linter by itself with yarn lint, and you can automatically fix some lint problems with yarn lint:fix. You can also run these two commands just on your local changes to save time with yarn lint:changed and yarn lint:changed:fix respectively.

For Jest debugging guide using Node.js, see docs/tests/jest.md.

Running E2E Tests

Our e2e test suite can be run on either Firefox or Chrome.

  1. required yarn build:test to create a test build.
  2. run tests, targetting the browser:
  • Firefox e2e tests can be run with yarn test:e2e:firefox.
  • Chrome e2e tests can be run with yarn test:e2e:chrome. The chromedriver package major version must match the major version of your local Chrome installation. If they don't match, update whichever is behind before running Chrome e2e tests.

These test scripts all support additional options, which might be helpful for debugging. Run the script with the flag --help to see all options.

Running a single e2e test

Single e2e tests can be run with yarn test:e2e:single test/e2e/tests/TEST_NAME.spec.js along with the options below.

  --browser        Set the browser used; either 'chrome' or 'firefox'.
                                         [string] [choices: "chrome", "firefox"]
  --debug          Run tests in debug mode, logging each driver interaction
                                                      [boolean] [default: false]
  --retries        Set how many times the test should be retried upon failure.
                                                           [number] [default: 0]
  --leave-running  Leaves the browser running after a test fails, along with
                   anything else that the test used (ganache, the test dapp,
                   etc.)                              [boolean] [default: false]

For example, to run the account-details tests using Chrome, with debug logging and with the browser set to remain open upon failure, you would use: yarn test:e2e:single test/e2e/tests/account-details.spec.js --browser=chrome --debug --leave-running

Changing dependencies

Whenever you change dependencies (adding, removing, or updating, either in package.json or yarn.lock), there are various files that must be kept up-to-date.

  • yarn.lock:
    • Run yarn again after your changes to ensure yarn.lock has been properly updated.
    • Run yarn lint:lockfile:dedupe:fix to remove duplicate dependencies from the lockfile.
  • The allow-scripts configuration in package.json
    • Run yarn allow-scripts auto to update the allow-scripts configuration automatically. This config determines whether the package's install/postinstall scripts are allowed to run. Review each new package to determine whether the install script needs to run or not, testing if necessary.
    • Unfortunately, yarn allow-scripts auto will behave inconsistently on different platforms. macOS and Windows users may see extraneous changes relating to optional dependencies.
  • The LavaMoat policy files
    • If you are a MetaMask team member and your PR is on a repository branch, you can use the bot command @metamaskbot update-policies to ask the MetaMask bot to automatically update the policies for you.
    • If your PR is from a fork, you can ask a MetaMask team member to help with updating the policy files.
    • Manual update instructions: The tl;dr is to run yarn lavamoat:auto to update these files, but there can be devils in the details:
      • There are two sets of LavaMoat policy files:
        • The production LavaMoat policy files (lavamoat/browserify/*/policy.json), which are re-generated using yarn lavamoat:background:auto. Add --help for usage.
          • These should be regenerated whenever the production dependencies for the background change.
        • The build system LavaMoat policy file (lavamoat/build-system/policy.json), which is re-generated using yarn lavamoat:build:auto.
          • This should be regenerated whenever the dependencies used by the build system itself change.
      • Whenever you regenerate a policy file, review the changes to determine whether the access granted to each package seems appropriate.
      • Unfortunately, yarn lavamoat:auto will behave inconsistently on different platforms. macOS and Windows users may see extraneous changes relating to optional dependencies.
      • If you keep getting policy failures even after regenerating the policy files, try regenerating the policies after a clean install by doing:
        • rm -rf node_modules/ && yarn && yarn lavamoat:auto
      • Keep in mind that any kind of dynamic import or dynamic use of globals may elude LavaMoat's static analysis. Refer to the LavaMoat documentation or ask for help if you run into any issues.

Architecture

Architecture Diagram

Other Docs

Dapp Developer Resources

More Repositories

1

metamask-mobile

Mobile web browser providing access to websites that use the Ethereum blockchain
JavaScript
1,625
star
2

eth-phishing-detect

Utility for detecting phishing domains targeting Web3 users
TypeScript
1,091
star
3

snaps

Extend the functionality of MetaMask using Snaps
TypeScript
715
star
4

metamask-docs

Developer documentation for MetaMask
MDX
660
star
5

web3-provider-engine

A JavaScript library for composing Ethereum provider objects using middleware modules
JavaScript
585
star
6

faq

MetaMask FAQ and Guides
538
star
7

eth-sig-util

A collection of functions for signing and verifying data with Ethereum keys.
TypeScript
537
star
8

test-dapp

The sample dapp used for e2e testing and metamask-extension QA
JavaScript
456
star
9

contract-metadata

A mapping of ethereum contract addresses to broadly accepted icons for those addresses.
JavaScript
440
star
10

detect-provider

A tiny utility for detecting the MetaMask Ethereum Provider, or any Provider compliant with EIP-1193.
JavaScript
231
star
11

logo

A 3d take on the metamask logo, in browser, as a browserifyable module.
JavaScript
214
star
12

KeyringController

A module for managing groups of Ethereum accounts and using them.
TypeScript
183
star
13

metamask-sdk

The simplest yet most secure way to connect your blockchain-based applications to millions of MetaMask Wallet users.
TypeScript
177
star
14

mascara

(beta) Add MetaMask to your dapp even if the user doesn't have the extension installed
JavaScript
173
star
15

core

This monorepo is a collection of packages used across multiple MetaMask clients
TypeScript
172
star
16

providers

An Ethereum Provider that connects over a stream, as injected into websites by MetaMask
TypeScript
161
star
17

eth-json-rpc-middleware

Ethereum middleware for composing an Ethereum provider using json-rpc-engine. Intended to replace provider-engine
TypeScript
153
star
18

vault-decryptor

A web app for decrypting MetaMask vault data.
JavaScript
147
star
19

metamask-snaps-beta

Fork of MetaMask that supports plugins! Read the Wiki!
JavaScript
143
star
20

metamask-onboarding

A library to help onboard new MetaMask users
TypeScript
142
star
21

dapps

home.metamask.io website
JavaScript
135
star
22

eth-block-tracker

A JS module for keeping track of the latest Ethereum block by polling an ethereum provider
TypeScript
129
star
23

Add-Token

A simple web3 dapp that allows suggesting a token to users of compatible wallets like MetaMask.
JavaScript
127
star
24

json-rpc-engine

A tool for processing JSON RPC
TypeScript
125
star
25

template-snap-monorepo

TypeScript
113
star
26

eth-simple-keyring

A simple standard interface for a series of Ethereum private keys
TypeScript
113
star
27

legacy-web3-extension

An extension that adds MetaMask's legacy web3 API to your browser.
JavaScript
92
star
28

rpc-errors

Ethereum RPC Errors
TypeScript
90
star
29

browser-passworder

A simple browserifiable module for encrypting and decrypting JSON-serializable objects with a password.
TypeScript
86
star
30

eth-hd-keyring

A simple standard interface for an HD ethereum wallet.
TypeScript
81
star
31

eth-faucet

MetaMask's test faucet
JavaScript
71
star
32

eth-token-tracker

A JS module for tracking Ethereum token balances over block changes
JavaScript
71
star
33

extensionizer

A JS module for writing cross-browser extensions
JavaScript
66
star
34

eth-ledger-bridge-keyring

A wrapper around LedgerJS libraries, to support the KeyringController protocol used by MetaMask
TypeScript
66
star
35

post-message-stream

Sets up a duplex object stream over window.postMessage
TypeScript
51
star
36

template-snap

The official MetaMask Snaps template repository.
JavaScript
47
star
37

eth-json-rpc-infura

json-rpc-engine middleware for Infura's endpoints
TypeScript
47
star
38

extension-provider

A module for allowing a WebExtension to access the web3 provider from an installed MetaMask instance
JavaScript
46
star
39

metamask-android-sdk

MetaMask SDK for Android
Kotlin
44
star
40

TipButton

A set of tip button images for use with MetaMask
HTML
41
star
41

IPFS-Ethereum-Hackathon

Repo for hackathon submissions
40
star
42

metamask-ios-sdk

MetaMask SDK for iOS
Swift
39
star
43

website

The MetaMask website
JavaScript
39
star
44

brand-resources

MetaMask logo assets and brand guidelines
39
star
45

nonce-tracker

JavaScript
37
star
46

SIPs

Snaps Improvement Proposals
HTML
37
star
47

eth-trezor-keyring

A JS wrapper around Trezor Connect libraries, to support the KeyringController protocol used by MetaMask
TypeScript
37
star
48

snaps-cli

A CLI for developing MetaMask plugins.
TypeScript
36
star
49

Nextjs-Starter

TypeScript
35
star
50

key-tree

TypeScript
33
star
51

delegation-framework

The contracts that power the Delegation Framework
Solidity
33
star
52

mobile-provider

An Ethereum provider, as injected into websites by MetaMask Mobile
JavaScript
32
star
53

utils

Various JavaScript / TypeScript utilities of wide relevance to the MetaMask codebase.
TypeScript
30
star
54

rpc-cap

A module for adding an object-capabilities system to any JSON-RPC API as middleware for json-rpc-engine
JavaScript
30
star
55

api-specs

JavaScript
29
star
56

eth-json-rpc-filters

json-rpc-engine middleware implementing ethereum filter methods
JavaScript
29
star
57

etherscan-link

A library for generating Etherscan links
JavaScript
28
star
58

design-tokens

Design tokens to be used throughout MetaMask products
TypeScript
28
star
59

snaps-registry

A registry containing metadata about verified and blocked Snaps.
TypeScript
28
star
60

React-MetaMask-Login-Button

JavaScript
27
star
61

hd-seed-phrase-guesser

A tool for recovering ethereum accounts from mis-recorded seed phrases.
JavaScript
25
star
62

obs-store

A synchronous in-memory store for a single value
JavaScript
25
star
63

react-dapp-tutorial

Source code for the MetaMask Documentation's Dapp Tutorial using Vite + React
CSS
25
star
64

metamask-module-template

A simple template repository for starting new modules in the latest MetaMask fashion.
JavaScript
24
star
65

metamask-filecoin-developer-beta

The MetaMask Filecoin Developer Preview.
JavaScript
23
star
66

nft-tickets-workshop

React Dapp for selling ERC-721 NFT tickets
JavaScript
23
star
67

metamask-deeplinks

Simple web app to generate Metamask deeplinks on the fly
JavaScript
23
star
68

abi-utils

Lightweight utilities for encoding and decoding Solidity ABI
TypeScript
22
star
69

mesh-testing

Testbed for p2p metamask client
JavaScript
22
star
70

metamask-storybook

The Storybook for the MetaMask extension
JavaScript
20
star
71

test-snaps

TypeScript
20
star
72

metamask-improvement-proposals

A public space to discuss, evaluate, and implement improvements to the MetaMask Wallet API
19
star
73

eth-ipfs-browser-client

Ethereum browser client based on ipfs/libp2p
19
star
74

vite-react-ts-eip-6963

Discover Multi Injected Providers with EIP-6963 in a ViteJS using React + TypeScript
TypeScript
19
star
75

keyring-api

TypeScript
18
star
76

.github

MetaMask default GitHub community health files
18
star
77

eth-method-registry

A JS library for getting Solidity method data from a four-byte method signature
JavaScript
18
star
78

snap-simple-keyring

TypeScript
17
star
79

extension-port-stream

A module for creating a node style stream over a WebExtension port object.
TypeScript
17
star
80

contributor-docs

Guides, best practices, and everything needed to contribute to MetaMask repositories effectively.
JavaScript
17
star
81

mm-docs-v2

MetaMask developer documentation v2
JavaScript
15
star
82

snap-box

A box to start creating a snap with truffle
TypeScript
15
star
83

safe-event-emitter

An EventEmitter that isolates the emitter from errors in handlers
TypeScript
15
star
84

eth-gas-price-suggestor

A module for advising default gas prices, by analyzing recent successful transactions.
JavaScript
15
star
85

phishing-warning

A page to warn users about a suspected phishing site.
TypeScript
15
star
86

snaps-directory

Explore community-built Snaps to customize your web3 experience via our official directory.
TypeScript
14
star
87

Eth-Token-Sender

A simple single-page app for viewing an Ethereum token's balance and sending it.
JavaScript
14
star
88

legacy-web3

MetaMask's legacy window.web3
JavaScript
14
star
89

examples

A collection of examples and useful guides on how we think MetaMask can be used.
TypeScript
13
star
90

web3-dubai-mm-workshop

TypeScript
13
star
91

snaps-simulator

A hackathon project by @eriknson, @FrederikBolding, and @Mrtenz
TypeScript
12
star
92

menpo

DeFi Incident Database
JavaScript
12
star
93

zero-client

MetaMask ZeroClient and backing iframe service
JavaScript
12
star
94

action-publish-release

TypeScript
12
star
95

action-create-release-pr

TypeScript
11
star
96

smart-transactions-controller

TypeScript
11
star
97

metamask-desktop

🖥️ The MetaMask Desktop app is a companion app that improves the overall performance of the MetaMask Extension Flask build
TypeScript
11
star
98

metamask-eth-abis

Collection of smart contracts ABIs
TypeScript
10
star
99

object-multiplex

Simple stream multiplexing for objectMode.
TypeScript
10
star
100

react-sdk-linea-workshop

MetaMask SDK + Linea (Vite + React & TypeScript Workshop)
TypeScript
10
star