crx-rpc 1.0.6 → 1.0.7

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 +24 -5
  2. package/README.zh-CN.md +24 -5
  3. package/dist/background.js +49 -8
  4. package/package.json +1 -1
  5. package/src/background.ts +74 -18
package/README.md CHANGED
@@ -201,12 +201,31 @@ 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:
204
+ When logging is enabled, the following information is logged with **color-coded formatting**:
205
205
 
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
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.*
210
229
 
211
230
  ### Use Cases
212
231
 
package/README.zh-CN.md CHANGED
@@ -217,12 +217,31 @@ const rpc = new BackgroundRPC(true); // 启用日志
217
217
 
218
218
  ### 日志输出
219
219
 
220
- 启用日志时，会记录以下信息：
220
+ 启用日志时，会记录以下信息并使用**彩色格式**：
221
221
 
222
- - **函数调用**: 服务名、方法名、参数、发送者ID和时间戳
223
- - **成功响应**: 服务名、方法名、结果和时间戳
224
- - **错误响应**: 服务名、方法名、错误消息和时间戳
225
- - **未知服务/方法**: 无效服务或方法调用的警告
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
+ *注意：颜色在浏览器开发者控制台中可见，不在纯文本中显示。*
226
245
 
227
246
  ### 使用场景
228
247
 
package/dist/background.js CHANGED
@@ -23,8 +23,15 @@ 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(`[RPC] Call: ${service}.${method}`, {
27
- id,
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;', // ]
34
+ {
28
35
  args,
29
36
  senderId,
30
37
  timestamp: new Date().toISOString()
@@ -32,7 +39,16 @@ export class BackgroundRPC extends Disposable {
32
39
  }
33
40
  if (!serviceInstance) {
34
41
  if (this.log) {
35
- console.warn(`[RPC] Unknown service: ${service}`);
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;', // ]
48
+ {
49
+ senderId,
50
+ timestamp: new Date().toISOString()
51
+ });
36
52
  }
37
53
  const resp = {
38
54
  id,
@@ -45,7 +61,18 @@ export class BackgroundRPC extends Disposable {
45
61
  }
46
62
  if (!(method in serviceInstance)) {
47
63
  if (this.log) {
48
- console.warn(`[RPC] Unknown method: ${service}.${method}`);
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;', // ]
72
+ {
73
+ senderId,
74
+ timestamp: new Date().toISOString()
75
+ });
49
76
  }
50
77
  const resp = {
51
78
  id,
@@ -60,8 +87,15 @@ export class BackgroundRPC extends Disposable {
60
87
  .then(() => serviceInstance[method](...args))
61
88
  .then((result) => {
62
89
  if (this.log) {
63
- console.log(`[RPC] Success: ${service}.${method}`, {
64
- id,
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;', // ]
98
+ {
65
99
  result,
66
100
  timestamp: new Date().toISOString()
67
101
  });
@@ -75,8 +109,15 @@ export class BackgroundRPC extends Disposable {
75
109
  })
76
110
  .catch((err) => {
77
111
  if (this.log) {
78
- console.error(`[RPC] Error: ${service}.${method}`, {
79
- id,
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;', // ]
120
+ {
80
121
  error: err.message,
81
122
  timestamp: new Date().toISOString()
82
123
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "crx-rpc",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
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
@@ -26,17 +26,39 @@ export class BackgroundRPC extends Disposable {
26
26
  const serviceInstance = this.services[service];
27
27
 
28
28
  if (this.log) {
29
- console.log(`[RPC] Call: ${service}.${method}`, {
30
- id,
31
- args,
32
- senderId,
33
- timestamp: new Date().toISOString()
34
- });
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;', // ]
39
+ {
40
+ args,
41
+ senderId,
42
+ timestamp: new Date().toISOString()
43
+ }
44
+ );
35
45
  }
36
46
 
37
47
  if (!serviceInstance) {
38
48
  if (this.log) {
39
- console.warn(`[RPC] Unknown service: ${service}`);
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;', // ]
57
+ {
58
+ senderId,
59
+ timestamp: new Date().toISOString()
60
+ }
61
+ );
40
62
  }
41
63
  const resp: RpcResponse = {
42
64
  id,
@@ -50,7 +72,21 @@ export class BackgroundRPC extends Disposable {
50
72
 
51
73
  if (!(method in serviceInstance)) {
52
74
  if (this.log) {
53
- console.warn(`[RPC] Unknown method: ${service}.${method}`);
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;', // ]
85
+ {
86
+ senderId,
87
+ timestamp: new Date().toISOString()
88
+ }
89
+ );
54
90
  }
55
91
  const resp: RpcResponse = {
56
92
  id,
@@ -66,11 +102,21 @@ export class BackgroundRPC extends Disposable {
66
102
  .then(() => serviceInstance[method](...args))
67
103
  .then((result) => {
68
104
  if (this.log) {
69
- console.log(`[RPC] Success: ${service}.${method}`, {
70
- id,
71
- result,
72
- timestamp: new Date().toISOString()
73
- });
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;', // ]
115
+ {
116
+ result,
117
+ timestamp: new Date().toISOString()
118
+ }
119
+ );
74
120
  }
75
121
  sendResponse({
76
122
  id,
@@ -81,11 +127,21 @@ export class BackgroundRPC extends Disposable {
81
127
  })
82
128
  .catch((err) => {
83
129
  if (this.log) {
84
- console.error(`[RPC] Error: ${service}.${method}`, {
85
- id,
86
- error: err.message,
87
- timestamp: new Date().toISOString()
88
- });
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;', // ]
140
+ {
141
+ error: err.message,
142
+ timestamp: new Date().toISOString()
143
+ }
144
+ );
89
145
  }
90
146
  sendResponse({
91
147
  id,