如何使用ethers.js制作自定义链连接按钮 点击可添加Arbitrum到MetaMask

这个功能核心是调用MetaMask注入的wallet_addEthereumChain RPC方法，配合ethers.js的封装即可快速实现。

前置条件 #

• 项目已经正确安装ethers.js（v5/v6版本都兼容，以下示例同时适配两个版本的核心逻辑）
• 功能触发前先检测用户浏览器是否注入了MetaMask的window.ethereum对象

核心实现代码 #

首先是页面按钮部分：

<button id="addArbitrumBtn">添加 Arbitrum 网络到 MetaMask</button>

对应的JS逻辑：

// ethers v6版本导入写法，v5版本将BrowserProvider替换为Web3Provider即可
import { BrowserProvider } from "ethers";

const addArbitrumBtn = document.getElementById('addArbitrumBtn');

// Arbitrum One 主网固定配置参数
const arbitrumNetworkParams = {
  chainId: `0x${Number(42161).toString(16)}`, // 必须为十六进制格式
  chainName: "Arbitrum One",
  nativeCurrency: {
    name: "Ethereum",
    symbol: "ETH",
    decimals: 18
  },
  rpcUrls: ["https://arb1.arbitrum.io/rpc"],
  blockExplorerUrls: ["https://arbiscan.io"]
};

addArbitrumBtn.addEventListener('click', async () => {
  // 先检测MetaMask安装状态
  if (!window.ethereum) {
    alert("请先安装 MetaMask 钱包");
    return;
  }

  try {
    const provider = new BrowserProvider(window.ethereum);
    // 先请求用户连接钱包
    await provider.send("eth_requestAccounts", []);
    
    // 调用添加网络的原生RPC方法
    await provider.send("wallet_addEthereumChain", [arbitrumNetworkParams]);
    alert("Arbitrum 网络添加成功");
  } catch (error) {
    if (error.code === 4001) {
      alert("你已拒绝添加网络的请求");
    } else if (error.message.includes("already exists")) {
      alert("Arbitrum 网络已在你的 MetaMask 中存在");
    } else {
      console.error("添加网络失败：", error);
      alert(`添加失败：${error.message || "未知错误"}`);
    }
  }
});

注意事项 #

• chainId必须转换为十六进制字符串格式，否则MetaMask会直接报错
• 如果要添加Arbitrum测试网，只需要替换配置里的chainId、rpcUrls、blockExplorerUrls为对应测试网参数即可
• 如果用户钱包已经添加过对应网络，调用wallet_addEthereumChain时MetaMask会自动提示用户切换到该网络，不需要额外开发切换逻辑

内容的提问来源于stack exchange，提问作者Curio