Flow Chrome Extension Wallet Example

An example and guide showing how to build an FCL-compatible wallet extension on Flow.
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.

Getting started

Run all commands from the root directory.

Install

npm i

Build the extension

npm run build --workspace fcl-wallet-extension-demo

Add the extension to Chrome

• In Chrome, navigate to chrome://extensions
• Enable the "Developer mode" toggle
• Click on "Load unpacked"
• Select the packages/extension/build folder

Refreshing the extension

If you make changes to the code, rebuild the extension with npm run dev --workspace fcl-wallet-extension-demo and then click the refresh icon in the Chrome extensions page.

Start the harness app

The harness is a barebones web app that allows you to connect to the extension and send transactions.

npm run start --workspace fcl-harness

Open http://localhost:3000 to view it in the browser.

---

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