crx-rpc 1.0.7 → 1.0.8

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.
Files changed (5) hide show
  1. package/README.md +5 -24
  2. package/README.zh-CN.md +5 -24
  3. package/dist/background.js +48 -43
  4. package/package.json +1 -1
  5. package/src/background.ts +54 -48
package/README.md CHANGED
@@ -201,31 +201,12 @@ const rpc = new BackgroundRPC(true); // Enable logging
201
201
 
202
202
  ### Log Output
203
203
 
204
- When logging is enabled, the following information is logged with **color-coded formatting**:
204
+ When logging is enabled, the following information is logged:
205
205
 
206
- - **Function Calls**: `[RPC] Call: Service.Method [ID]` with colored components
207
- - **Success Responses**: `[RPC] Success: Service.Method [ID]` with green success indicator
208
- - **Error Responses**: `[RPC] Error: Service.Method [ID]` with red error indicator
209
- - **Unknown Services/Methods**: `[RPC] Unknown service/method: Service.Method [ID]` with orange warnings
210
-
211
- ### Color Scheme
212
-
213
- - 🟣 **Purple**: `[RPC]` prefix and request IDs
214
- - 🟢 **Green**: Service names and success indicators
215
- - 🔴 **Red**: Method names and error indicators
216
- - 🟠 **Orange**: Warning messages
217
- - ⚫ **Gray**: Separators and structural elements
218
-
219
- ### Example Output
220
-
221
- ```
222
- [RPC] Call: MathService.add [rpc-123]
223
- [RPC] Success: MathService.add [rpc-123]
224
- [RPC] Error: MathService.divide [rpc-124]
225
- [RPC] Unknown service: InvalidService [rpc-125]
226
- ```
227
-
228
- *Note: Colors are visible in browser developer console, not in plain text.*
206
+ - **Function Calls**: Service name, method name, arguments, sender ID, and timestamp
207
+ - **Success Responses**: Service name, method name, result, and timestamp
208
+ - **Error Responses**: Service name, method name, error message, and timestamp
209
+ - **Unknown Services/Methods**: Warnings for invalid service or method calls
229
210
 
230
211
  ### Use Cases
231
212
 
package/README.zh-CN.md CHANGED
@@ -217,31 +217,12 @@ const rpc = new BackgroundRPC(true); // 启用日志
217
217
 
218
218
  ### 日志输出
219
219
 
220
- 启用日志时，会记录以下信息并使用**彩色格式**：
220
+ 启用日志时，会记录以下信息：
221
221
 
222
- - **函数调用**: `[RPC] Call: Service.Method [ID]` 带有彩色组件
223
- - **成功响应**: `[RPC] Success: Service.Method [ID]` 带有绿色成功指示器
224
- - **错误响应**: `[RPC] Error: Service.Method [ID]` 带有红色错误指示器
225
- - **未知服务/方法**: `[RPC] Unknown service/method: Service.Method [ID]` 带有橙色警告
226
-
227
- ### 颜色方案
228
-
229
- - 🟣 **紫色**: `[RPC]` 前缀和请求ID
230
- - 🟢 **绿色**: 服务名和成功指示器
231
- - 🔴 **红色**: 方法名和错误指示器
232
- - 🟠 **橙色**: 警告消息
233
- - ⚫ **灰色**: 分隔符和结构元素
234
-
235
- ### 输出示例
236
-
237
- ```
238
- [RPC] Call: MathService.add [rpc-123]
239
- [RPC] Success: MathService.add [rpc-123]
240
- [RPC] Error: MathService.divide [rpc-124]
241
- [RPC] Unknown service: InvalidService [rpc-125]
242
- ```
243
-
244
- *注意：颜色在浏览器开发者控制台中可见，不在纯文本中显示。*
222
+ - **函数调用**: 服务名、方法名、参数、发送者ID和时间戳
223
+ - **成功响应**: 服务名、方法名、结果和时间戳
224
+ - **错误响应**: 服务名、方法名、错误消息和时间戳
225
+ - **未知服务/方法**: 无效服务或方法调用的警告
245
226
 
246
227
  ### 使用场景
247
228
 
package/dist/background.js CHANGED
@@ -23,14 +23,14 @@ export class BackgroundRPC extends Disposable {
23
23
  const { id, method, args, service } = msg;
24
24
  const serviceInstance = this.services[service];
25
25
  if (this.log) {
26
- console.log(`%c[RPC]%c Call: %c${service}%c.%c${method}%c [%c${id}%c]`, 'color: #6b46c1; font-weight: bold;', // [RPC] 紫色
27
- 'color: #374151;', // Call: 灰色
28
- 'color: #059669; font-weight: bold;', // service 绿色
29
- 'color: #374151;', // .
30
- 'color: #dc2626; font-weight: bold;', // method 红色
31
- 'color: #374151;', // [
32
- 'color: #7c3aed; font-weight: bold;', // id 紫色
33
- 'color: #374151;', // ]
26
+ console.log(`%c RPC %c Call: %c ${service} %c.%c ${method} %c [%c ${id} %c]`, 'background: #6b46c1; color: white; font-weight: bold; padding: 2px 4px; border-radius: 3px;', // [RPC] 紫色背景
27
+ 'color: #6b7280; font-weight: 500;', // Call: 灰色
28
+ 'background: #059669; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // service 绿色背景
29
+ 'color: #6b7280; font-weight: 500;', // .
30
+ 'background: #dc2626; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // method 红色背景
31
+ 'color: #6b7280; font-weight: 500;', // [
32
+ 'background: #2563eb; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // id 蓝色背景
33
+ 'color: #6b7280; font-weight: 500;', // ]
34
34
  {
35
35
  args,
36
36
  senderId,
@@ -39,12 +39,12 @@ export class BackgroundRPC extends Disposable {
39
39
  }
40
40
  if (!serviceInstance) {
41
41
  if (this.log) {
42
- console.warn(`%c[RPC]%c Unknown service: %c${service}%c [%c${id}%c]`, 'color: #6b46c1; font-weight: bold;', // [RPC] 紫色
43
- 'color: #d97706;', // Unknown service: 橙色
44
- 'color: #059669; font-weight: bold;', // service 绿色
45
- 'color: #374151;', // [
46
- 'color: #7c3aed; font-weight: bold;', // id 紫色
47
- 'color: #374151;', // ]
42
+ console.warn(`%c RPC %c Unknown service: %c ${service} %c [%c ${id} %c]`, 'background: #6b46c1; color: white; font-weight: bold; padding: 2px 4px; border-radius: 3px;', // [RPC] 紫色背景
43
+ 'color: #d97706; font-weight: bold;', // Unknown service: 橙色
44
+ 'background: #059669; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // service 绿色背景
45
+ 'color: #6b7280; font-weight: 500;', // [
46
+ 'background: #2563eb; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // id 蓝色背景
47
+ 'color: #6b7280; font-weight: 500;', // ]
48
48
  {
49
49
  senderId,
50
50
  timestamp: new Date().toISOString()
@@ -61,14 +61,14 @@ export class BackgroundRPC extends Disposable {
61
61
  }
62
62
  if (!(method in serviceInstance)) {
63
63
  if (this.log) {
64
- console.warn(`%c[RPC]%c Unknown method: %c${service}%c.%c${method}%c [%c${id}%c]`, 'color: #6b46c1; font-weight: bold;', // [RPC] 紫色
65
- 'color: #d97706;', // Unknown method: 橙色
66
- 'color: #059669; font-weight: bold;', // service 绿色
67
- 'color: #374151;', // .
68
- 'color: #dc2626; font-weight: bold;', // method 红色
69
- 'color: #374151;', // [
70
- 'color: #7c3aed; font-weight: bold;', // id 紫色
71
- 'color: #374151;', // ]
64
+ console.warn(`%c RPC %c Unknown method: %c ${service} %c.%c ${method} %c [%c ${id} %c]`, 'background: #6b46c1; color: white; font-weight: bold; padding: 2px 4px; border-radius: 3px;', // [RPC] 紫色背景
65
+ 'color: #d97706; font-weight: bold;', // Unknown method: 橙色
66
+ 'background: #059669; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // service 绿色背景
67
+ 'color: #6b7280; font-weight: 500;', // .
68
+ 'background: #dc2626; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // method 红色背景
69
+ 'color: #6b7280; font-weight: 500;', // [
70
+ 'background: #2563eb; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // id 蓝色背景
71
+ 'color: #6b7280; font-weight: 500;', // ]
72
72
  {
73
73
  senderId,
74
74
  timestamp: new Date().toISOString()
@@ -87,14 +87,14 @@ export class BackgroundRPC extends Disposable {
87
87
  .then(() => serviceInstance[method](...args))
88
88
  .then((result) => {
89
89
  if (this.log) {
90
- console.log(`%c[RPC]%c Success: %c${service}%c.%c${method}%c [%c${id}%c]`, 'color: #6b46c1; font-weight: bold;', // [RPC] 紫色
91
- 'color: #16a34a;', // Success: 绿色
92
- 'color: #059669; font-weight: bold;', // service 绿色
93
- 'color: #374151;', // .
94
- 'color: #dc2626; font-weight: bold;', // method 红色
95
- 'color: #374151;', // [
96
- 'color: #7c3aed; font-weight: bold;', // id 紫色
97
- 'color: #374151;', // ]
90
+ console.log(`%c RPC %c Success: %c ${service} %c.%c ${method} %c [%c ${id} %c]`, 'background: #6b46c1; color: white; font-weight: bold; padding: 2px 4px; border-radius: 3px;', // [RPC] 紫色背景
91
+ 'color: #16a34a; font-weight: bold;', // Success: 绿色
92
+ 'background: #059669; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // service 绿色背景
93
+ 'color: #6b7280; font-weight: 500;', // .
94
+ 'background: #dc2626; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // method 红色背景
95
+ 'color: #6b7280; font-weight: 500;', // [
96
+ 'background: #2563eb; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // id 蓝色背景
97
+ 'color: #6b7280; font-weight: 500;', // ]
98
98
  {
99
99
  result,
100
100
  timestamp: new Date().toISOString()
@@ -109,14 +109,14 @@ export class BackgroundRPC extends Disposable {
109
109
  })
110
110
  .catch((err) => {
111
111
  if (this.log) {
112
- console.error(`%c[RPC]%c Error: %c${service}%c.%c${method}%c [%c${id}%c]`, 'color: #6b46c1; font-weight: bold;', // [RPC] 紫色
113
- 'color: #dc2626;', // Error: 红色
114
- 'color: #059669; font-weight: bold;', // service 绿色
115
- 'color: #374151;', // .
116
- 'color: #dc2626; font-weight: bold;', // method 红色
117
- 'color: #374151;', // [
118
- 'color: #7c3aed; font-weight: bold;', // id 紫色
119
- 'color: #374151;', // ]
112
+ console.error(`%c RPC %c Error: %c ${service} %c.%c ${method} %c [%c ${id} %c]`, 'background: #6b46c1; color: white; font-weight: bold; padding: 2px 4px; border-radius: 3px;', // [RPC] 紫色背景
113
+ 'color: #dc2626; font-weight: bold;', // Error: 红色
114
+ 'background: #059669; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // service 绿色背景
115
+ 'color: #6b7280; font-weight: 500;', // .
116
+ 'background: #dc2626; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // method 红色背景
117
+ 'color: #6b7280; font-weight: 500;', // [
118
+ 'background: #2563eb; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // id 蓝色背景
119
+ 'color: #6b7280; font-weight: 500;', // ]
120
120
  {
121
121
  error: err.message,
122
122
  timestamp: new Date().toISOString()
@@ -194,16 +194,21 @@ export class RemoteSubjectManager extends Disposable {
194
194
  constructor() {
195
195
  super();
196
196
  const handleMessage = (msg, sender) => {
197
- const senderId = sender.tab?.id;
198
- if (!senderId) {
199
- console.warn('Received RPC request from unknown sender, ignoring.', msg);
200
- return;
201
- }
202
197
  if (msg.type === SUBSCRIBABLE_OBSERVABLE) {
198
+ const senderId = sender.tab?.id;
199
+ if (!senderId) {
200
+ console.warn('Received RPC request from unknown sender, ignoring.', msg);
201
+ return;
202
+ }
203
203
  const { key } = msg;
204
204
  this.handleSubscription(key, senderId);
205
205
  }
206
206
  if (msg.type === UNSUBSCRIBE_OBSERVABLE) {
207
+ const senderId = sender.tab?.id;
208
+ if (!senderId) {
209
+ console.warn('Received RPC request from unknown sender, ignoring.', msg);
210
+ return;
211
+ }
207
212
  const { key } = msg;
208
213
  this.handleUnsubscription(key, senderId);
209
214
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "crx-rpc",
3
- "version": "1.0.7",
3
+ "version": "1.0.8",
4
4
  "description": "A lightweight RPC framework for Chrome Extension (background <-> content <-> web)",
5
5
  "repository": {
6
6
  "type": "git",
package/src/background.ts CHANGED
@@ -27,15 +27,15 @@ export class BackgroundRPC extends Disposable {
27
27
 
28
28
  if (this.log) {
29
29
  console.log(
30
- `%c[RPC]%c Call: %c${service}%c.%c${method}%c [%c${id}%c]`,
31
- 'color: #6b46c1; font-weight: bold;', // [RPC] 紫色
32
- 'color: #374151;', // Call: 灰色
33
- 'color: #059669; font-weight: bold;', // service 绿色
34
- 'color: #374151;', // .
35
- 'color: #dc2626; font-weight: bold;', // method 红色
36
- 'color: #374151;', // [
37
- 'color: #7c3aed; font-weight: bold;', // id 紫色
38
- 'color: #374151;', // ]
30
+ `%c RPC %c Call: %c ${service} %c.%c ${method} %c [%c ${id} %c]`,
31
+ 'background: #6b46c1; color: white; font-weight: bold; padding: 2px 4px; border-radius: 3px;', // [RPC] 紫色背景
32
+ 'color: #6b7280; font-weight: 500;', // Call: 灰色
33
+ 'background: #059669; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // service 绿色背景
34
+ 'color: #6b7280; font-weight: 500;', // .
35
+ 'background: #dc2626; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // method 红色背景
36
+ 'color: #6b7280; font-weight: 500;', // [
37
+ 'background: #2563eb; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // id 蓝色背景
38
+ 'color: #6b7280; font-weight: 500;', // ]
39
39
  {
40
40
  args,
41
41
  senderId,
@@ -47,13 +47,13 @@ export class BackgroundRPC extends Disposable {
47
47
  if (!serviceInstance) {
48
48
  if (this.log) {
49
49
  console.warn(
50
- `%c[RPC]%c Unknown service: %c${service}%c [%c${id}%c]`,
51
- 'color: #6b46c1; font-weight: bold;', // [RPC] 紫色
52
- 'color: #d97706;', // Unknown service: 橙色
53
- 'color: #059669; font-weight: bold;', // service 绿色
54
- 'color: #374151;', // [
55
- 'color: #7c3aed; font-weight: bold;', // id 紫色
56
- 'color: #374151;', // ]
50
+ `%c RPC %c Unknown service: %c ${service} %c [%c ${id} %c]`,
51
+ 'background: #6b46c1; color: white; font-weight: bold; padding: 2px 4px; border-radius: 3px;', // [RPC] 紫色背景
52
+ 'color: #d97706; font-weight: bold;', // Unknown service: 橙色
53
+ 'background: #059669; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // service 绿色背景
54
+ 'color: #6b7280; font-weight: 500;', // [
55
+ 'background: #2563eb; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // id 蓝色背景
56
+ 'color: #6b7280; font-weight: 500;', // ]
57
57
  {
58
58
  senderId,
59
59
  timestamp: new Date().toISOString()
@@ -73,15 +73,15 @@ export class BackgroundRPC extends Disposable {
73
73
  if (!(method in serviceInstance)) {
74
74
  if (this.log) {
75
75
  console.warn(
76
- `%c[RPC]%c Unknown method: %c${service}%c.%c${method}%c [%c${id}%c]`,
77
- 'color: #6b46c1; font-weight: bold;', // [RPC] 紫色
78
- 'color: #d97706;', // Unknown method: 橙色
79
- 'color: #059669; font-weight: bold;', // service 绿色
80
- 'color: #374151;', // .
81
- 'color: #dc2626; font-weight: bold;', // method 红色
82
- 'color: #374151;', // [
83
- 'color: #7c3aed; font-weight: bold;', // id 紫色
84
- 'color: #374151;', // ]
76
+ `%c RPC %c Unknown method: %c ${service} %c.%c ${method} %c [%c ${id} %c]`,
77
+ 'background: #6b46c1; color: white; font-weight: bold; padding: 2px 4px; border-radius: 3px;', // [RPC] 紫色背景
78
+ 'color: #d97706; font-weight: bold;', // Unknown method: 橙色
79
+ 'background: #059669; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // service 绿色背景
80
+ 'color: #6b7280; font-weight: 500;', // .
81
+ 'background: #dc2626; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // method 红色背景
82
+ 'color: #6b7280; font-weight: 500;', // [
83
+ 'background: #2563eb; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // id 蓝色背景
84
+ 'color: #6b7280; font-weight: 500;', // ]
85
85
  {
86
86
  senderId,
87
87
  timestamp: new Date().toISOString()
@@ -103,15 +103,15 @@ export class BackgroundRPC extends Disposable {
103
103
  .then((result) => {
104
104
  if (this.log) {
105
105
  console.log(
106
- `%c[RPC]%c Success: %c${service}%c.%c${method}%c [%c${id}%c]`,
107
- 'color: #6b46c1; font-weight: bold;', // [RPC] 紫色
108
- 'color: #16a34a;', // Success: 绿色
109
- 'color: #059669; font-weight: bold;', // service 绿色
110
- 'color: #374151;', // .
111
- 'color: #dc2626; font-weight: bold;', // method 红色
112
- 'color: #374151;', // [
113
- 'color: #7c3aed; font-weight: bold;', // id 紫色
114
- 'color: #374151;', // ]
106
+ `%c RPC %c Success: %c ${service} %c.%c ${method} %c [%c ${id} %c]`,
107
+ 'background: #6b46c1; color: white; font-weight: bold; padding: 2px 4px; border-radius: 3px;', // [RPC] 紫色背景
108
+ 'color: #16a34a; font-weight: bold;', // Success: 绿色
109
+ 'background: #059669; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // service 绿色背景
110
+ 'color: #6b7280; font-weight: 500;', // .
111
+ 'background: #dc2626; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // method 红色背景
112
+ 'color: #6b7280; font-weight: 500;', // [
113
+ 'background: #2563eb; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // id 蓝色背景
114
+ 'color: #6b7280; font-weight: 500;', // ]
115
115
  {
116
116
  result,
117
117
  timestamp: new Date().toISOString()
@@ -128,15 +128,15 @@ export class BackgroundRPC extends Disposable {
128
128
  .catch((err) => {
129
129
  if (this.log) {
130
130
  console.error(
131
- `%c[RPC]%c Error: %c${service}%c.%c${method}%c [%c${id}%c]`,
132
- 'color: #6b46c1; font-weight: bold;', // [RPC] 紫色
133
- 'color: #dc2626;', // Error: 红色
134
- 'color: #059669; font-weight: bold;', // service 绿色
135
- 'color: #374151;', // .
136
- 'color: #dc2626; font-weight: bold;', // method 红色
137
- 'color: #374151;', // [
138
- 'color: #7c3aed; font-weight: bold;', // id 紫色
139
- 'color: #374151;', // ]
131
+ `%c RPC %c Error: %c ${service} %c.%c ${method} %c [%c ${id} %c]`,
132
+ 'background: #6b46c1; color: white; font-weight: bold; padding: 2px 4px; border-radius: 3px;', // [RPC] 紫色背景
133
+ 'color: #dc2626; font-weight: bold;', // Error: 红色
134
+ 'background: #059669; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // service 绿色背景
135
+ 'color: #6b7280; font-weight: 500;', // .
136
+ 'background: #dc2626; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // method 红色背景
137
+ 'color: #6b7280; font-weight: 500;', // [
138
+ 'background: #2563eb; color: white; font-weight: bold; padding: 1px 4px; border-radius: 2px;', // id 蓝色背景
139
+ 'color: #6b7280; font-weight: 500;', // ]
140
140
  {
141
141
  error: err.message,
142
142
  timestamp: new Date().toISOString()
@@ -223,18 +223,24 @@ export class RemoteSubjectManager extends Disposable {
223
223
  super();
224
224
 
225
225
  const handleMessage = (msg: RpcObservableSubscribeMessage, sender: chrome.runtime.MessageSender) => {
226
- const senderId = sender.tab?.id;
227
- if (!senderId) {
228
- console.warn('Received RPC request from unknown sender, ignoring.', msg);
229
- return;
230
- }
226
+
231
227
 
232
228
  if (msg.type === SUBSCRIBABLE_OBSERVABLE) {
229
+ const senderId = sender.tab?.id;
230
+ if (!senderId) {
231
+ console.warn('Received RPC request from unknown sender, ignoring.', msg);
232
+ return;
233
+ }
233
234
  const { key } = msg;
234
235
  this.handleSubscription(key, senderId);
235
236
  }
236
237
 
237
238
  if (msg.type === UNSUBSCRIBE_OBSERVABLE) {
239
+ const senderId = sender.tab?.id;
240
+ if (!senderId) {
241
+ console.warn('Received RPC request from unknown sender, ignoring.', msg);
242
+ return;
243
+ }
238
244
  const { key } = msg;
239
245
  this.handleUnsubscription(key, senderId);
240
246
  }