Flow Chrome Extension Wallet Example

An example and guide showing how to build an FCL-compatible wallet extension on Flow with EVM support.
Read the docs »

What is FCL? · Report a Bug

This guide and sample is based on a winning FLIP Fest submission from the ZayCodes team.

🚀 Architecture

This project consists of two main components:

• Extension (packages/extension/): Chrome extension wallet built with React + Vite
• Harness (packages/harness/): Testing dApp built with Next.js, featuring dual Flow/EVM support with RainbowKit

🛠 Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended package manager)

Installation

Run all commands from the root directory.

# Install pnpm globally if you haven't already
npm install -g pnpm

# Install dependencies
pnpm install

Build the Extension

# Development build (with watch mode)
cd packages/extension
pnpm run dev

# Production build
pnpm run build

Add the Extension to Chrome

1. In Chrome, navigate to chrome://extensions
2. Enable the "Developer mode" toggle
3. Click on "Load unpacked"
4. Select the packages/extension/dist folder

Refreshing the Extension

If you make changes to the code:

1. Rebuild with pnpm run build (or use pnpm run dev for watch mode)
2. Click the refresh icon in the Chrome extensions page

Start the Harness App

The harness is a Next.js web app with dual Flow/EVM support for testing wallet functionality.

# Development server
cd packages/harness
pnpm run dev

# Production build
pnpm run build
pnpm run start

Open http://localhost:3000 to view the harness.

🌐 Flow EVM Support

The harness includes built-in support for Flow EVM networks:

• Flow EVM Mainnet (Chain ID: 747)

  • RPC: https://mainnet.evm.nodes.onflow.org
  • Explorer: https://evm.flowscan.org

• Flow EVM Testnet (Chain ID: 545)

  • RPC: https://testnet.evm.nodes.onflow.org
  • Explorer: https://evm-testnet.flowscan.org

The harness displays both Flow and EVM connection details side-by-side, making it easy to test both networks simultaneously.

---

Build your own wallet

See the full guide to building an extension on Flow here.

• Overview
  • FCL Fundamentals
    • Discovery
    • Service Methods
    • Wallet Services
  • Browser & Extension Requirements
  • Key Scripts
• Implementation
  • Manifest V3 configurations
  • FCL Installation & Configuration
  • Harness & Testing
  • FCL Discovery
  • Account Creation
  • FCL Authentication
  • FCL Authorization
  • Other Services
  • Transaction History & Event Indexing
  • NFT Viewing & Metadata
  • Other Resources