{"id":4153,"date":"2026-10-20T14:07:49","date_gmt":"2026-10-20T14:07:49","guid":{"rendered":"https:\/\/nownodes.io\/blog\/?p=4153"},"modified":"2026-10-20T14:07:50","modified_gmt":"2026-10-20T14:07:50","slug":"how-to-build-a-web3-chrome-extension","status":"publish","type":"post","link":"https:\/\/nownodes.io\/blog\/how-to-build-a-web3-chrome-extension\/","title":{"rendered":"How to Build a Web3 Chrome Extension"},"content":{"rendered":"\n

A Web3 Chrome extension is a normal browser extension \u2014 built with HTML, CSS, and JavaScript \u2014 that talks to a blockchain instead of (or alongside) a regular web server. It lives in the toolbar, opens in a small popup, and can read on-chain data or send transactions through a wallet.<\/p>\n\n\n\n

This guide walks through building one from scratch: a small extension that looks up the ETH balance of any address. From there, you’ll add wallet support, keep your node credentials safe, and ship it to the Chrome Web Store. The examples use Manifest V3, which is now the only version Chrome accepts.<\/p>\n\n\n

What Is a Web3 Browser Extension?<\/h2>\n\n\n
\"\"<\/figure>\n\n\n\n

It’s a browser add-on that connects to a blockchain network. The front end is identical to any Chrome extension \u2014 standard web files packaged into a small app. What makes it “Web3” is where it gets its data: a blockchain node, usually reached over an RPC (Remote Procedure Call) endpoint, which is a server that reads chain state and broadcasts signed transactions.<\/p>\n\n\n\n

You already use several of these. MetaMask is a non-custodial wallet extension. Gas trackers show live fee estimates. Portfolio extensions read balances across chains. All of them follow the same pattern: a popup UI plus a connection to the network.<\/p>\n\n\n\n

The extension itself doesn’t run a blockchain node. It sends JSON-RPC requests \u2014 for example eth_getBalance<\/code> to read a balance \u2014 and renders whatever comes back.<\/p>\n\n\n

Why Build One Instead of a Web App?<\/h2>\n\n\n

A browser extension solves a few problems a plain website can’t. It’s always one click away in the toolbar, with no tab to open and no URL to type. It can read and modify the pages a user visits, which is how wallets inject a connection into dApps. And it keeps a persistent presence, so a price tracker or transaction monitor can sit in the corner of the screen.<\/p>\n\n\n\n

That reach is also why wallets are extensions rather than sites. A dApp in a browser tab needs to talk to a wallet that holds the user’s keys. The wallet extension exposes an interface the page can call, and the user approves each action in a popup they trust.<\/p>\n\n\n\n

Typical builders include wallet teams, analytics and portfolio tools, gas and fee estimators, NFT viewers, and internal dashboards that need a quick on-chain lookup without a full web front end.<\/p>\n\n\n

What You Need Before You Start<\/h2>\n\n\n

You don’t need much to build a basic Web3 Chrome extension.<\/p>\n\n\n\n

What you need<\/th>Why it matters<\/th><\/tr><\/thead>
Google Chrome (or a Chromium browser like Brave or Edge)<\/td>To load and test the unpacked extension<\/td><\/tr>
A code editor such as VS Code<\/td>To write the manifest and scripts<\/td><\/tr>
An RPC endpoint for Ethereum<\/td>So the extension can read chain data without you running a node<\/td><\/tr>
Basic HTML, CSS, and JavaScript<\/td>The extension’s entire front end is web code<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

The one piece that often trips people up is the node connection. Running your own Ethereum node means syncing and maintaining hundreds of gigabytes of state, which is overkill for a toolbar app. Instead, you point the extension at a hosted RPC endpoint<\/a>. Our shared nodes expose standard JSON-RPC methods such as eth_getBalance<\/code>, so the request in this tutorial works the same whether you’re on a free public endpoint or a keyed plan.<\/p>\n\n\n\n

For a quick local demo you can start with a free public endpoint \u2014 no registration, no API key \u2014 and move to a plan with a higher request quota<\/a> once the extension does real work.<\/p>\n\n\n

How to Build One Step by Step<\/h2>\n\n\n

We’ll build an extension with three files: a manifest, a popup page, and a script. No bundler required. Larger projects often add webpack or a build tool, but a simple extension doesn’t need one.<\/p>\n\n\n

Set Up the Project Files<\/h3>\n\n\n

Create a folder and add three empty files:<\/p>\n\n\n\n

sh<\/p>\n\n\n\n

mkdir eth-balance-extension\ncd eth-balance-extension\ntouch manifest.json popup.html popup.js<\/code><\/pre>\n\n\n\n
That’s the whole project. Chrome loads the folder directly.<\/p>\n\n\n
Write the Manifest File<\/h3>\n\n\n
Every extension needs a manifest.json<\/code>. It tells Chrome the extension’s name, version, what the toolbar button does, and which hosts the extension may contact.<\/p>\n\n\n\n
json<\/p>\n\n\n\n
{\n  \"manifest_version\": 3,\n  \"name\": \"ETH Balance Viewer\",\n  \"version\": \"1.0\",\n  \"description\": \"Check any Ethereum address balance from your browser.\",\n  \"action\": {\n    \"default_popup\": \"popup.html\"\n  },\n  \"host_permissions\": [\n    \"https:\/\/your-rpc-host.example\/*\"\n  ]\n}<\/code><\/pre>\n\n\n\n
A few things matter here. manifest_version<\/code> must be 3<\/code> \u2014 more on that below. The action<\/code> block points the toolbar button at the popup. host_permissions<\/code> lists the RPC host the extension is allowed to call, so the cross-origin request isn’t blocked. Replace the placeholder host with the endpoint you’re using.<\/p>\n\n\n
Build the Popup Interface<\/h3>\n\n\n
The popup is a plain HTML page. One input for an address, one button, and a spot to show the result.<\/p>\n\n\n\n
html<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <style>\n      body { font-family: system-ui, sans-serif; width: 280px; padding: 16px; }\n      input, button { width: 100%; padding: 8px; margin-top: 8px; box-sizing: border-box; }\n      #result { margin-top: 12px; font-weight: 600; }\n    <\/style>\n  <\/head>\n  <body>\n    <input id=\"address\" type=\"text\" placeholder=\"Ethereum address (0x...)\" \/>\n    <button id=\"check\">Check balance<\/button>\n    <div id=\"result\"><\/div>\n    <script src=\"popup.js\"><\/script>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Notice the script is loaded from a separate file rather than written inline. Manifest V3 blocks inline JavaScript for security, so all your logic has to live in .js<\/code> files.<\/p>\n\n\n
Connect to Ethereum Through an RPC Endpoint<\/h3>\n\n\n
Now the logic. When the button is clicked, the script sends an eth_getBalance<\/code> request and converts the result from Wei (the smallest ETH unit) to ether.<\/p>\n\n\n\n
javascript<\/p>\n\n\n\n
const RPC_URL = \"YOUR_ETH_RPC_ENDPOINT\"; \/\/ from your node dashboard\n\ndocument.getElementById(\"check\").addEventListener(\"click\", async () => {\n  const address = document.getElementById(\"address\").value.trim();\n  const out = document.getElementById(\"result\");\n  if (!address) { out.textContent = \"Enter an address first.\"; return; }\n\n  try {\n    const res = await fetch(RPC_URL, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application\/json\" },\n      body: JSON.stringify({\n        jsonrpc: \"2.0\",\n        id: 1,\n        method: \"eth_getBalance\",\n        params: [address, \"latest\"]\n      })\n    });\n    const data = await res.json();\n    const eth = parseInt(data.result, 16) \/ 1e18;\n    out.textContent = `Balance: ${eth.toFixed(4)} ETH`;\n  } catch (e) {\n    out.textContent = \"Request failed. Check the endpoint and address.\";\n  }\n});<\/code><\/pre>\n\n\n\n
eth_getBalance<\/code> returns a hex string, which is why the code parses it as base-16 and divides by 1e18<\/code>. Swap YOUR_ETH_RPC_ENDPOINT<\/code> for the endpoint URL from your node dashboard. Keep the host_permissions<\/code> entry in the manifest in sync with this host.<\/p>\n\n\n
Load and Test It in Chrome<\/h3>\n\n\n
\"\"<\/figure>\n\n\n\n
Local testing is free \u2014 you don’t publish anything to try the extension.<\/p>\n\n\n\n
    \n
  1. Open chrome:\/\/extensions<\/code> in a new tab.<\/li>\n\n\n\n
  2. Turn on Developer mode<\/strong> (top-right toggle).<\/li>\n\n\n\n
  3. Click Load unpacked<\/strong> and select your project folder.<\/li>\n<\/ol>\n\n\n\n
    The extension appears in the list and in the toolbar. Click it, paste an address, and check the balance. A good test address is Ethereum co-founder Vitalik Buterin’s public wallet, 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045<\/code>. Edit a file, click the refresh icon on the extension card, and your changes reload.<\/p>\n\n\n
    How to Connect a Wallet Like MetaMask<\/h2>\n\n\n
    Reading a balance only needs an RPC endpoint. Sending a transaction needs a wallet, because the wallet holds the user’s keys and signs on their behalf. Your extension never touches the private key \u2014 it asks the wallet to sign.<\/p>\n\n\n
    Injected Providers and window.ethereum<\/h3>\n\n\n
    Wallet extensions inject a provider object into web pages following EIP-1193<\/a>, the standard Ethereum provider interface. Historically, dApps reached it through the global window.ethereum<\/code>. You request access, then read the connected account:<\/p>\n\n\n\n
    javascript<\/p>\n\n\n\n
    await window.ethereum.request({ method: \"eth_requestAccounts\" });<\/code><\/pre>\n\n\n\n
    The catch is that window.ethereum<\/code> was never designed for more than one wallet. When a user has several wallet extensions installed, they all compete to inject into the same object, and the last one to load usually wins \u2014 so the dApp can’t reliably reach the wallet the user actually wants.<\/p>\n\n\n
    Discovering Wallets With EIP-6963<\/h3>\n\n\n
    The fix is EIP-6963<\/a>, the Multi Injected Provider Discovery standard. Instead of fighting over one global, each wallet announces itself through a browser event, and your code collects every wallet the user has. MetaMask’s own documentation recommends this mechanism for discovery, and it’s supported by MetaMask, Coinbase Wallet, Trust Wallet, OKX, and other major wallets.<\/p>\n\n\n\n
    javascript<\/p>\n\n\n\n
    const wallets = [];\nwindow.addEventListener(\"eip6963:announceProvider\", (event) => {\n  wallets.push(event.detail); \/\/ { info, provider }\n});\nwindow.dispatchEvent(new Event(\"eip6963:requestProvider\"));<\/code><\/pre>\n\n\n\n
    Each event.detail<\/code> carries info<\/code> (the wallet’s name, icon, and a reverse-domain ID like io.metamask<\/code>) and a provider<\/code> you can call. You present the list, let the user pick, and connect to their choice. For dApps that haven’t added EIP-6963 yet, window.ethereum<\/code> still works as a fallback.<\/p>\n\n\n\n
    Once you have a provider, a library makes signing easier. With ethers.js v6<\/a> \u2014 the current major release \u2014 you wrap the provider and get a signer:<\/p>\n\n\n\n
    javascript<\/p>\n\n\n\n
    const provider = new ethers.BrowserProvider(window.ethereum);\nconst signer = await provider.getSigner();\nconst address = await signer.getAddress();<\/code><\/pre>\n\n\n\n
    If you used ethers v5 before, note that v6 renamed Web3Provider<\/code> to BrowserProvider<\/code> and made getSigner()<\/code> asynchronous. web3.js and viem are equally valid choices; ethers is just one common option.<\/p>\n\n\n
    Keeping Your RPC Key Off the Client<\/h2>\n\n\n
    Anyone can unzip a published Chrome extension and read its code. If you hard-code a secret API key in popup.js<\/code>, you’ve handed it to the world. That key can then be used \u2014 and abused \u2014 against your node account.<\/p>\n\n\n\n
    Two patterns keep you safe. For public, read-only data, a free public endpoint with no key is fine to ship. For anything that needs a private key, put a small backend in front of your node: the extension calls your server, and your server adds the key and forwards the request to the RPC provider. The credential stays on the server and never reaches the browser.<\/p>\n\n\n\n
    A few more security basics apply to any crypto extension:<\/p>\n\n\n\n