Skip to content
Hosinoharu edited this page Jul 28, 2026 · 2 revisions

Welcome to the cure-magic-shadow wiki!


基本概念

本项目是一个浏览器插件,用于管理和更方便地使用 JS RPC。

在插件中,RPC 分为两种:

  • 普通 RPC(Rpc Normal) —— 可以通过插件提供的 API、UI 来创建,用于在非断点的情况下调用,支持同步、异步的函数
  • 堆栈 RPC(Rpc Stack) —— 只能通过插件提供的 UI 来创建,用于在断点的情况下调用,并且,只能支持同步的函数

测试 RPC

安装插件后,在正式开始之前,需要确认其是否工作正常,这包括:

  • 能否注入 RPC
  • 能否调用同步、异步的 RPC
  • 能否请求 RPC Server,完成一次完整的 RPC

测试普通 RPC

打开浏览器控制台,默认为普通 RPC 的模式。如下进行测试。

image-20260729002602123

在控制台中可以看到注入后的结果,以及插件内部的通信测试。

image-20260729002805888

然后开启 RPC Server,打开插件的配置页面,进行完整的通信测试。

image-20260729002926229

image-20260729003338225

如下,选择 echo 方法进行测试,能返回正确的结果,同时在网页中也能看到对应的 RPC 被调用。

image-20260729003732932

同时,也可以生成代码进行实际的请求测试。

image-20260729004102488

image-20260729004237777

测试堆栈 RPC

这基于 Chrome DevTools Protocol,所以开启网页的调试。如下进行测试。

image-20260729004908651

如下,我在网页中触发了一个断点,可以正确注入测试用的 RPC。

image-20260729005327056

因为浏览器的限制,在堆栈 RPC 中不能调用异步的 RPC。

image-20260729005523366

后续的操作是一样,打开配置页面,开始测试。

image-20260729005938047

添加 RPC

插件提供 API 和 UI 来创建 RPC。

通过 API 创建普通 RPC

插件暴露了 curerpc 对象到全局作用域中,如下可以快速创建 RPC,支持同步、异步函数。

// 参数 1:函数名
// 参数 2:该函数的描述
// 参数 3:该函数的实现
curerpc.add('add', 'add x, y', (x, y) => x + y)

然后就能在插件的配置页面中看到它,并进行测试。

image-20260729010326158

通过 UI 创建普通 RPC

image-20260729010447336

image-20260729010539689

然后是注入,需要选择到哪个上下文 —— 网页中可能有多个 frame,如下。

image-20260729010641054

image-20260729010722318

注入后就能在控制台看到对应的 RPC。

image-20260729010803714

然后就是在配置页面进行测试啦。

通过 UI 创建堆栈 RPC

堆栈 RPC 只能通过 UI 来创建。先开启堆栈 RPC 的功能,然后进行断点,如下此处。

image-20260729011258774

然后依旧是注入内容。

image-20260729011517224

在配置界面中测试。

image-20260729011725325

image-20260729011826851