浏览器插件钱包（一） - 区块链世界的入口

浏览器插件钱包 - 区块链世界的入口

前言：对于大多数人来说，浏览器插件钱包是首次接触区块链的必需品，这篇文章将带你从代码层面对浏览器插件钱包进行深层的认识，进而了解到区块链的各类特性，例如：链（网络），地址（账户），交易和签名。

本系列将分为多次文章展示，敬请期待，也可以到github 仓库地址查看最新的代码更新。

浏览器插件开发准备

技术栈

浏览器插件开发

浏览器插件开发环境搭建

首先我们可以跟着 wxt 的官网指引，创建好我们的项目，创建好的文件项目结构，如图：

然后运行 npm run dev，就会弹出一个浏览器窗口，点击浏览器窗口的插件按钮就能看到初始化的项目，如图：

开发所需要的界面

开发界面的时候我们需要使用：

react进行界面开发
react router，这里需要使用HashRouter，不用BowserRouter，模拟路由跳转
tailwindCSS 和 shadcnUI 进行样式和组件的调整

大致页面有：

Login 界面
Import 界面
Create new account界面
Home 界面
Network 管理界面
Token 管理界面
Send transaction 界面

钱包与DApp的通信

当我们的插件钱包界面做好了之后，怎样才能让DApp检测到呢？

我们需要使用 metamask.github.io/test-dapp/ 这个网站来进行测试，这个网站可以检测到浏览器插件里面的钱包，例如：我的浏览器里面有两个钱包插件，他检测到了就会显示在页面上，如图：

那么接下来我们就需要做到让DApp检测到我们的浏览器插件。

EIP-6963: Multi Injected Provider Discovery

EIP-6963是一个协议，用于定义检测钱包的接口。根据定义我们需要将我们的浏览器插件定义为一个provider，其类型如下：

ts 复制代码

interface EIP6963ProviderInfo {
  uuid: string;
  name: string;
  icon: string;
  rdns: string;
}

下一步我们需要使用另一个结构，把我们的Provider实体和Provider Info结合在一起：

ts 复制代码

interface EIP6963ProviderDetail {
  info: EIP6963ProviderInfo;
  provider: Provider;
}

下一步我们需要声明一个customer event：

ts 复制代码

interface EIP6963AnnounceProviderEvent extends CustomEvent {
  type: "eip6963:announceProvider";
  detail: EIP6963ProviderDetail;
}

下一步我们用window.dispatchEvent将这个事件给发布出去：

ts 复制代码

// Announce provider following EIP-6963
const announceProvider = () => {
    const info = {
        uuid: uuidv4(),
        name: "Browser Wallet",
        icon: Logo,
        rdns: "com.browserwallet"
    };

    window.dispatchEvent(
        new CustomEvent("eip6963:announceProvider", {
            detail: Object.freeze({
                info,
                provider
            })
        })
    );
};

// Listen for provider requests
window.addEventListener("eip6963:requestProvider", () => {
    announceProvider();
});

// Initial announcement
announceProvider();

那么这个代码需要写在浏览器插件开发的content.js中，这样子才能在页面加载之后让DApp检测到。完成之后，我们启动代码，然后访问 metamask.github.io/test-dapp/ 就能够看到我们的钱包已经能够被检测到了。

下期预告

《浏览器插件钱包（二） - 处理DApp请求》

求打赏

文章总结不易，欢迎各位打赏，打赏越快，更新越快，谢谢~