贡献
如果你对贡献 Rivet 的兴趣！在提交拉取请求之前，请花点时间查看此文档。 如果你想贡献，但不确定从哪里开始，可以创建一个 新讨论。
注意 在开始任何重大新功能的工作之前，请先询问。
投入时间和精力到新功能上后，如果你的拉取请求被拒绝，往往不是一种愉快的经历。为了避免这种情况的发生，我们要求贡献者首先创建一个 功能请求，以讨论任何 API 更改或重大新想法。
<br>
Web 扩展的概述
这里有一个 很好的入门指南 关于 Web 扩展。其余的 Chrome 开发者指南 也相当不错。
上下文
Rivet 有四个独立的上下文：
- 钱包 应用：
- 一个单页应用 (SPA)。
- Rivet 的主要用户界面 (一个 React 应用)。
- 它可以访问全局的 Web Extension APIs （即
chrome.runtime）。
- 后台 服务工作者：
- 在后台隔离运行的服务工作者。后台 上下文负责处理 RPC 请求、外部网络请求、初始化扩展上下文菜单、注册内容脚本等。
- 它也暴露给全局的 Web Extension APIs （即
chrome.runtime）。
- 内容脚本：
- 在当前网页的上下文中执行 JavaScript。内容脚本 上下文主要负责将 钱包 应用注入当前网页中。
- 它仅暴露一部分全局 Web Extension APIs （即
chrome.runtime）。
- 它的
window 实例 与 当前网页的 window 实例 不同。
- 内嵌：
- 类似于 内容脚本，并在当前网页的上下文中执行 JavaScript。内嵌 上下文主要负责将
window.ethereum 提供程序注入当前网页。
- 与内容脚本不同，它 不 访问全局 Web Extension APIs （即
chrome.runtime）。
- 它的
window 实例 与当前网页的 window 实例是相同的。
下面是一个视图图，展示这四个上下文。
<picture>
<source media="(prefers-color-scheme: dark)" srcset="./assets/interface-diagram-dark.png">
<source media="(prefers-color-scheme: light)" srcset="./assets/interface-diagram-light.png">
<img src="./assets/interface-diagram-light.png" height="400">
</picture>
<br>
<br>
跨上下文消息传递
我们可以利用 chrome.runtime.sendMessage/chrome.tabs.sendMessage APIs 和 window.postMessage API 的组合来在上下文之间进行通信。
<br>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="./assets/messaging-dark.png">
<source media="(prefers-color-scheme: light)" srcset="./assets/messaging-light.png">
<img src="./assets/messaging-light.png" height="300">
</picture>
<br>
<br>
重要的是要注意，内嵌 上下文没有访问 Web Extension APIs 的权限，后台/钱包 上下文没有访问 window 实例的权限，这使得这些上下文之间的消息传递变得不简单。为了使这成为可能，我们需要在 内容脚本 上下文中设置一个“桥接中继”，它可以访问 window 和 Web Extension APIs。
为了简化这次通信，我们创建了一个 "Messenger" 抽象，这样你就无需思考使用哪种传输（window.postMessage 与 chrome.runtime.sendMessage 与 chrome.tabs.sendMessage）、设置桥接中继以及处理它们的同步性。
示例
example.ts （钱包 上下文）
import { getMessenger } from '~/messengers';
const messenger = getMessenger('background:wallet');
async function example() {
const result = await messenger.send('ping', { foo: 'bar' });
console.log(result); // "pong and bar"
}
background.ts （后台 上下文）
import { getMessenger } from '~/messengers';
const messenger = getMessenger('background:wallet');
messenger.reply('ping', (args) => {
return `pong and ${args.foo}`;
});
<br>
入门
本指南旨在帮助你开始贡献。遵循以下步骤，你将了解开发过程和工作流程。
- 克隆存储库
- 安装 Bun
- 安装 Anvil
- 安装依赖项
- 运行 Web 扩展
- 安装 Web 扩展
- 提交拉取请求
<br>
克隆存储库
要开始为项目做出贡献，请使用 git 将其克隆到本地计算机：
git clone https://github.com/paradigmxyz/rivet.git
或者使用 GitHub CLI：
gh repo clone paradigmxyz/rivet
<div align="right">
<a href="#getting-started">↑ 返回顶部</a></b>
</div>
安装 Bun
wagmi 使用 Bun。你需要安装 Bun v1 或更高版本。
你可以在终端中运行以下命令来检查本地 Bun 版本：
bun -v
如果版本不正确或没有安装 Bun，请下载并按照它们的设置说明进行操作：
<div align="right">
<a href="#getting-started">↑ 返回顶部</a></b>
</div>
安装 Anvil
Rivet 使用 Anvil 启动一个分叉的 Ethereum 节点。
使用以下命令安装 Anvil：
curl -L https://foundry.paradigm.xyz | bash
<div align="right">
<a href="#getting-started">↑ 返回顶部</a></b>
</div>
安装依赖项
进入项目的根目录后，运行以下命令以安装项目的依赖项：
bun i
<div align="right">
<a href="#getting-started">↑ 返回顶部</a></b>
</div>
运行 Web 扩展
在安装依赖项后，你可以运行 Web 扩展。为此，请运行以下命令：
bun run dev # 启动开发服务器
这将运行一个脚本，该脚本将构建 Web 扩展，启动 Test Dapp 的开发服务器，并自动用全新个人资料打开 Chrome 并安装扩展。Web 扩展还利用了热模块替换（HMR），因此你可以对代码进行更改并在扩展中查看，无需重新加载扩展。
<div align="right">
<a href="#getting-started">↑ 返回顶部</a></b>
</div>
（可选）安装 Web 扩展
你可以在浏览器中单独安装 Web 扩展。为此，请按照以下步骤操作：
- 打开浏览器的扩展页面
- 在右上角启用“开发者模式”
- 在左上角点击“加载已解压的扩展”
- 选择 Rivet 根目录中的
dist/dev 文件夹
- 完成了！不要忘记将扩展固定到浏览器工具栏，以便轻松访问。🎉
<div align="right">
<a href="#getting-started">↑ 返回顶部</a></b>
</div>
提交拉取请求
当你准备好提交拉取请求时，可以遵循以下命名约定：
- 拉取请求标题使用 命令语气 （例如，
添加某些内容，修复某事）。
- 更改集 使用过去时动词（例如，
添加某些内容，修复某事）。
当你提交拉取请求时，GitHub 会自动对你的更改进行 lint、构建和测试。如果你看到一个 ❌，最有可能是你代码中的一个错误。请通过 GitHub UI 查看日志以查找原因。
<div align="right">
<a href="#getting-started">↑ 返回顶部</a></b>
</div>
<br>
<div align="center">
✅ 现在你已准备好为 Rivet 贡献了！
</div>
<br>
