浏览器插件钱包 - 区块链世界的入口
前言：对于大多数人来说，浏览器插件钱包是首次接触区块链的必需品，这篇文章将带你从代码层面对浏览器插件钱包进行深层的认识，进而了解到区块链的各类特性，例如：链（网络），地址（账户），交易和签名。
本系列将分为多次文章展示，敬请期待，也可以到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，其类型如下：
interface EIP6963ProviderInfo {
uuid: string;
name: string;
icon: string;
rdns: string;
}
下一步我们需要使用另一个结构，把我们的Provider实体和Provider Info结合在一起：
interface EIP6963ProviderDetail {
info: EIP6963ProviderInfo;
provider: Provider;
}
下一步我们需要声明一个customer event：
interface EIP6963AnnounceProviderEvent extends CustomEvent {
type: "eip6963:announceProvider";
detail: EIP6963ProviderDetail;
}
下一步我们用window.dispatchEvent将这个事件给发布出去：
// 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/ 就能够看到我们的钱包已经能够被检测到了。
