22 Nov 2025

Create MetaMask-Style Crypto Wallet Chrome Extension Using JavaScript, Ether.js & Web3 Full Project

Daulat Hussain

The podcast details the creation of a MetaMask clone, focusing on the technical aspects of building the extension and its API. It explains how to set up the development environment, including cloning the repository, installing necessary packages, and configuring the database connection. The discussion covers key functionalities such as account creation, fund transfers, token importing, and account switching, emphasizing the importance of secure private key storage and API authentication. The podcast also describes the user interface elements, CSS styling, and the manifest file configuration required for Chrome Web Store deployment. It also addresses common bugs encountered during development, offering solutions for troubleshooting.

Outlines

Part 1: Introduction, Core Features

Part 2: Development Environment, API Structure

Part 3: Frontend Logic, DOM, State Management

Part 4: Core Function Implementation

Part 5: Backend Development, Database

Part 6: UI Styling, CSS

Part 7: HTML Components, UI Building

Part 8: Testing, Debugging, Deployment

Continue

Preview

How to Get Rich: Every EpisodeNaval

Create MetaMask-Style Crypto Wallet Chrome Extension Using JavaScript, Ether.js & Web3 Full Project

Daulat Hussain

Part 1: Introduction, Core Features

00:00MetaMask Extension Installation and Account Login/Creation Overview

MetaMask Extension Installation and Account Login/Creation Overview

01:15Token Importing and Application Logout Functionality

Token Importing and Application Logout Functionality

01:44Creating a New MetaMask Account: Backend Data Storage and Wallet Address Generation

Creating a New MetaMask Account: Backend Data Storage and Wallet Address Generation

02:53Transferring Funds to a Newly Created Wallet Address

Transferring Funds to a Newly Created Wallet Address

03:47Account Creation and Transfer Functionality Testing

Account Creation and Transfer Functionality Testing

04:54Token Importing and Account Switching Demonstration

Token Importing and Account Switching Demonstration

Part 2: Development Environment, API Structure

06:31Setting Up the Development Environment: VS Code and Cloning the Repository

Setting Up the Development Environment: VS Code and Cloning the Repository

08:20API Folder Structure and Key Files Overview

API Folder Structure and Key Files Overview

11:46Project Development Plan: Extension Deployment and File Structure

Project Development Plan: Extension Deployment and File Structure

Part 3: Frontend Logic, DOM, State Management

12:52DOM Targeting and State Variable Definition in pop.js

DOM Targeting and State Variable Definition in pop.js

14:11Function Definitions and DOM Element Targeting in pop.js

Function Definitions and DOM Element Targeting in pop.js

19:31DOM Element Targeting and Event Listener Attachment

DOM Element Targeting and Event Listener Attachment

24:53Alchemy Account Setup and Provider URL Configuration

Alchemy Account Setup and Provider URL Configuration

Part 4: Core Function Implementation

26:23Handler Function Implementation: Setting Up Loader and Building Transaction

Handler Function Implementation: Setting Up Loader and Building Transaction

35:06Check Balance Function Implementation: Fetching and Displaying Account Balance

Check Balance Function Implementation: Fetching and Displaying Account Balance

37:44Network Selection and Provider URL Configuration

Network Selection and Provider URL Configuration

42:47User Account Creation: Generating Wallet and API Call

User Account Creation: Generating Wallet and API Call

47:21API Call and Data Handling for User Account Creation

API Call and Data Handling for User Account Creation

53:56User Login Functionality: API Call and Local Storage

User Login Functionality: API Call and Local Storage

58:40Logout and Component Visibility Functions

Logout and Component Visibility Functions

1:01:01Component Visibility Functions and Add Token Implementation

Component Visibility Functions and Add Token Implementation

1:02:31Add Token Function Implementation: API Call and Data Storage

Add Token Function Implementation: API Call and Data Storage

1:04:37Add Account Function Implementation: API Call and Data Retrieval

Add Account Function Implementation: API Call and Data Retrieval

1:07:33My Function Implementation: Fetching and Rendering Data

My Function Implementation: Fetching and Rendering Data

1:13:18Rendering Token and Account Data Dynamically

Rendering Token and Account Data Dynamically

1:16:20Copy Address and Change Account Functions

Copy Address and Change Account Functions

1:18:35Review of Functions and API Development Course Recommendation

Review of Functions and API Development Course Recommendation

Part 5: Backend Development, Database

1:21:31Router Setup: Account, Token, and User Routes

Router Setup: Account, Token, and User Routes

1:24:40Model Creation: Account, Token, and User Models

Model Creation: Account, Token, and User Models

1:27:04User Model Methods: Password Encryption and Validation

User Model Methods: Password Encryption and Validation

1:33:03Controller Setup: Importing Models and Building Sign Token

Controller Setup: Importing Models and Building Sign Token

1:34:58Controller Functions: Signup Implementation

Controller Functions: Signup Implementation

1:37:06Controller Functions: Login, All Tokens, and Add Token

Controller Functions: Login, All Tokens, and Add Token

1:40:31Controller Functions: All Accounts and Create Account

Controller Functions: All Accounts and Create Account

1:42:27App.js Setup: Importing Packages and Building Middleware

App.js Setup: Importing Packages and Building Middleware

1:44:05MongoDB Account Creation and Database String Retrieval

MongoDB Account Creation and Database String Retrieval

1:47:06Server.js Setup: Connecting to the Database and Running the Application