crx-rpc 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -14
- package/README.zh-CN.md +15 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# Chrome Extension RPC (
|
|
1
|
+
# Chrome Extension RPC (crx-rpc)
|
|
2
2
|
|
|
3
3
|
A lightweight, type-safe RPC framework for Chrome Extensions supporting communication between web pages, content scripts, and background scripts. Built with TypeScript for maximum type safety and developer experience.
|
|
4
4
|
|
|
@@ -15,11 +15,11 @@ A lightweight, type-safe RPC framework for Chrome Extensions supporting communic
|
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
|
-
npm install
|
|
18
|
+
npm install crx-rpc
|
|
19
19
|
# or
|
|
20
|
-
pnpm add
|
|
20
|
+
pnpm add crx-rpc
|
|
21
21
|
# or
|
|
22
|
-
yarn add
|
|
22
|
+
yarn add crx-rpc
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
## Quick Start
|
|
@@ -28,7 +28,7 @@ yarn add @weird94/crx-rpc
|
|
|
28
28
|
|
|
29
29
|
```typescript
|
|
30
30
|
// services/math.ts
|
|
31
|
-
import { createIdentifier } from '
|
|
31
|
+
import { createIdentifier } from 'crx-rpc';
|
|
32
32
|
|
|
33
33
|
interface IMathService {
|
|
34
34
|
add(a: number, b: number): Promise<number>;
|
|
@@ -45,7 +45,7 @@ export const IMathService = createIdentifier<IMathService>('MathService');
|
|
|
45
45
|
|
|
46
46
|
```typescript
|
|
47
47
|
// background.ts
|
|
48
|
-
import { BackgroundRPC } from '
|
|
48
|
+
import { BackgroundRPC } from 'crx-rpc';
|
|
49
49
|
import { IMathService } from './services/math';
|
|
50
50
|
|
|
51
51
|
class MathService implements IMathService {
|
|
@@ -80,7 +80,7 @@ Content scripts can work in two modes:
|
|
|
80
80
|
|
|
81
81
|
```typescript
|
|
82
82
|
// content.ts
|
|
83
|
-
import { ContentRPC } from '
|
|
83
|
+
import { ContentRPC } from 'crx-rpc';
|
|
84
84
|
|
|
85
85
|
// Initialize RPC bridge for web page ↔ background communication
|
|
86
86
|
const contentRpc = new ContentRPC();
|
|
@@ -93,7 +93,7 @@ const contentRpc = new ContentRPC();
|
|
|
93
93
|
|
|
94
94
|
```typescript
|
|
95
95
|
// content.ts
|
|
96
|
-
import { ContentRPCClient } from '
|
|
96
|
+
import { ContentRPCClient } from 'crx-rpc';
|
|
97
97
|
import { IMathService } from './services/math';
|
|
98
98
|
|
|
99
99
|
// Use content script as a direct RPC client
|
|
@@ -112,7 +112,7 @@ console.log('Result from content script:', result);
|
|
|
112
112
|
|
|
113
113
|
```typescript
|
|
114
114
|
// content.ts
|
|
115
|
-
import { ContentRPC, ContentRPCClient } from '
|
|
115
|
+
import { ContentRPC, ContentRPCClient } from 'crx-rpc';
|
|
116
116
|
import { IMathService } from './services/math';
|
|
117
117
|
|
|
118
118
|
// Initialize bridge for web pages
|
|
@@ -131,7 +131,7 @@ console.log('Content script calculation:', result);
|
|
|
131
131
|
|
|
132
132
|
```typescript
|
|
133
133
|
// web-page.ts
|
|
134
|
-
import { WebRPCClient } from '
|
|
134
|
+
import { WebRPCClient } from 'crx-rpc';
|
|
135
135
|
import { IMathService } from './services/math';
|
|
136
136
|
|
|
137
137
|
async function calculate() {
|
|
@@ -217,7 +217,7 @@ The framework includes built-in support for reactive data streams using `RemoteS
|
|
|
217
217
|
|
|
218
218
|
```typescript
|
|
219
219
|
// background.ts
|
|
220
|
-
import { BackgroundRPC, RemoteSubject, createIdentifier } from '
|
|
220
|
+
import { BackgroundRPC, RemoteSubject, createIdentifier } from 'crx-rpc';
|
|
221
221
|
|
|
222
222
|
interface ICounterObservable {
|
|
223
223
|
value: number;
|
|
@@ -244,7 +244,7 @@ setInterval(() => {
|
|
|
244
244
|
|
|
245
245
|
```typescript
|
|
246
246
|
// web-page.ts
|
|
247
|
-
import { WebObservable, createIdentifier } from '
|
|
247
|
+
import { WebObservable, createIdentifier } from 'crx-rpc';
|
|
248
248
|
|
|
249
249
|
interface ICounterObservable {
|
|
250
250
|
value: number;
|
|
@@ -269,7 +269,7 @@ const observable = new WebObservable(
|
|
|
269
269
|
|
|
270
270
|
```typescript
|
|
271
271
|
// content.ts
|
|
272
|
-
import { ContentObservable, createIdentifier } from '
|
|
272
|
+
import { ContentObservable, createIdentifier } from 'crx-rpc';
|
|
273
273
|
|
|
274
274
|
interface ICounterObservable {
|
|
275
275
|
value: number;
|
|
@@ -318,7 +318,7 @@ The Observable system supports multiple communication patterns:
|
|
|
318
318
|
All RPC components extend the `Disposable` class for proper cleanup:
|
|
319
319
|
|
|
320
320
|
```typescript
|
|
321
|
-
import { WebRPCClient, ContentRPC, BackgroundRPC } from '
|
|
321
|
+
import { WebRPCClient, ContentRPC, BackgroundRPC } from 'crx-rpc';
|
|
322
322
|
|
|
323
323
|
const client = new WebRPCClient();
|
|
324
324
|
const contentRpc = new ContentRPC();
|
package/README.zh-CN.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# Chrome 扩展 RPC 框架 (
|
|
1
|
+
# Chrome 扩展 RPC 框架 (crx-rpc)
|
|
2
2
|
|
|
3
3
|
一个轻量级、类型安全的Chrome扩展RPC框架，支持网页、内容脚本和背景脚本之间的通信。基于TypeScript构建，提供最大的类型安全性和开发体验。
|
|
4
4
|
|
|
@@ -15,11 +15,11 @@
|
|
|
15
15
|
## 安装
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
|
-
npm install
|
|
18
|
+
npm install crx-rpc
|
|
19
19
|
# 或
|
|
20
|
-
pnpm add
|
|
20
|
+
pnpm add crx-rpc
|
|
21
21
|
# 或
|
|
22
|
-
yarn add
|
|
22
|
+
yarn add crx-rpc
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
## 快速开始
|
|
@@ -28,7 +28,7 @@ yarn add @weird94/crx-rpc
|
|
|
28
28
|
|
|
29
29
|
```typescript
|
|
30
30
|
// services/math.ts
|
|
31
|
-
import { createIdentifier } from '
|
|
31
|
+
import { createIdentifier } from 'crx-rpc';
|
|
32
32
|
|
|
33
33
|
interface IMathService {
|
|
34
34
|
add(a: number, b: number): Promise<number>;
|
|
@@ -45,7 +45,7 @@ export const IMathService = createIdentifier<IMathService>('MathService');
|
|
|
45
45
|
|
|
46
46
|
```typescript
|
|
47
47
|
// background.ts
|
|
48
|
-
import { BackgroundRPC } from '
|
|
48
|
+
import { BackgroundRPC } from 'crx-rpc';
|
|
49
49
|
import { IMathService } from './services/math';
|
|
50
50
|
|
|
51
51
|
class MathService implements IMathService {
|
|
@@ -80,7 +80,7 @@ rpc.register(IMathService, new MathService());
|
|
|
80
80
|
|
|
81
81
|
```typescript
|
|
82
82
|
// content.ts
|
|
83
|
-
import { ContentRPC } from '
|
|
83
|
+
import { ContentRPC } from 'crx-rpc';
|
|
84
84
|
|
|
85
85
|
// 为网页 ↔ 背景脚本通信初始化RPC桥接器
|
|
86
86
|
const contentRpc = new ContentRPC();
|
|
@@ -93,7 +93,7 @@ const contentRpc = new ContentRPC();
|
|
|
93
93
|
|
|
94
94
|
```typescript
|
|
95
95
|
// content.ts
|
|
96
|
-
import { ContentRPCClient } from '
|
|
96
|
+
import { ContentRPCClient } from 'crx-rpc';
|
|
97
97
|
import { IMathService } from './services/math';
|
|
98
98
|
|
|
99
99
|
// 将内容脚本用作直接RPC客户端
|
|
@@ -112,7 +112,7 @@ console.log('内容脚本结果:', result);
|
|
|
112
112
|
|
|
113
113
|
```typescript
|
|
114
114
|
// content.ts
|
|
115
|
-
import { ContentRPC, ContentRPCClient } from '
|
|
115
|
+
import { ContentRPC, ContentRPCClient } from 'crx-rpc';
|
|
116
116
|
import { IMathService } from './services/math';
|
|
117
117
|
|
|
118
118
|
// 为网页初始化桥接器
|
|
@@ -131,7 +131,7 @@ console.log('内容脚本计算:', result);
|
|
|
131
131
|
|
|
132
132
|
```typescript
|
|
133
133
|
// web-page.ts
|
|
134
|
-
import { WebRPCClient } from '
|
|
134
|
+
import { WebRPCClient } from 'crx-rpc';
|
|
135
135
|
import { IMathService } from './services/math';
|
|
136
136
|
|
|
137
137
|
async function calculate() {
|
|
@@ -233,7 +233,7 @@ interface RpcErrorDetails {
|
|
|
233
233
|
|
|
234
234
|
```typescript
|
|
235
235
|
// background.ts
|
|
236
|
-
import { BackgroundRPC, RemoteSubject, createIdentifier } from '
|
|
236
|
+
import { BackgroundRPC, RemoteSubject, createIdentifier } from 'crx-rpc';
|
|
237
237
|
|
|
238
238
|
interface ICounterObservable {
|
|
239
239
|
value: number;
|
|
@@ -260,7 +260,7 @@ setInterval(() => {
|
|
|
260
260
|
|
|
261
261
|
```typescript
|
|
262
262
|
// web-page.ts
|
|
263
|
-
import { WebObservable, createIdentifier } from '
|
|
263
|
+
import { WebObservable, createIdentifier } from 'crx-rpc';
|
|
264
264
|
|
|
265
265
|
interface ICounterObservable {
|
|
266
266
|
value: number;
|
|
@@ -285,7 +285,7 @@ const observable = new WebObservable(
|
|
|
285
285
|
|
|
286
286
|
```typescript
|
|
287
287
|
// content.ts
|
|
288
|
-
import { ContentObservable, createIdentifier } from '
|
|
288
|
+
import { ContentObservable, createIdentifier } from 'crx-rpc';
|
|
289
289
|
|
|
290
290
|
interface ICounterObservable {
|
|
291
291
|
value: number;
|
|
@@ -334,7 +334,7 @@ Observable系统支持多种通信模式：
|
|
|
334
334
|
所有RPC组件都继承了 `Disposable` 类来进行适当的清理：
|
|
335
335
|
|
|
336
336
|
```typescript
|
|
337
|
-
import { WebRPCClient, ContentRPC, BackgroundRPC } from '
|
|
337
|
+
import { WebRPCClient, ContentRPC, BackgroundRPC } from 'crx-rpc';
|
|
338
338
|
|
|
339
339
|
const client = new WebRPCClient();
|
|
340
340
|
const contentRpc = new ContentRPC();
|
|
@@ -360,7 +360,7 @@ if (!client.isDisposed()) {
|
|
|
360
360
|
|
|
361
361
|
```typescript
|
|
362
362
|
// content.ts
|
|
363
|
-
import { ContentRPCClient, ContentObservable } from '
|
|
363
|
+
import { ContentRPCClient, ContentObservable } from 'crx-rpc';
|
|
364
364
|
import { IMathService, IUserService } from './services';
|
|
365
365
|
|
|
366
366
|
const client = new ContentRPCClient();
|