@cyia/chrome-trpc 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyia/chrome-trpc",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "tRPC Adapter for Chrome Extension",
   "module": "esm",
   "type": "module",
@@ -39,7 +39,8 @@
   },
   "dependencies": {
     "snappyjs": "^0.7.0",
-    "bowser": "2.14.1"
+    "bowser": "2.14.1",
+    "superjson": "2.2.6"
   },
   "devDependencies": {
     "@types/snappyjs": "^0.7.1",

package/readme.md

@@ -37,18 +37,20 @@ Define your router in a shared `router.ts` file using `@trpc/server` so that bot
 
 ```typescript
 import { initTRPC } from '@trpc/server';
-import { z } from 'zod'; // or another validation library like valibot
+import * as v from 'valibot';
 
 const t = initTRPC.create();
 
 export const appRouter = t.router({
-  greet: t.procedure.input(z.string()).query(({ input }) => `Hello ${input}`),
+  greet: t.procedure.input(v.string()).query(({ input }) => `Hello ${input}`),
   getData: t.procedure.query(() => ({ payload: new Uint8Array([1, 2, 3]) })),
 });
 
 export type AppRouter = typeof appRouter;
 ```
 
+- If used in a Content Script, you need to set `isServer`: `const t = initTRPC.create({ isServer: true });`
+
 ### 2. Server (receiving end)
 
 In the script that provides the service (e.g., background or content script), use `createChromeHandler` to listen for connections from other parts.
@@ -90,10 +92,10 @@ console.log(greeting); // "Hello World"
 
 ## 🔌 Three Communication Modes Explained
 
-| Direction                      | Client (caller) | Server (receiver) | How to obtain the `port`                                                    |
-| ------------------------------ | --------------- | ----------------- | --------------------------------------------------------------------------- |
-| **Popup → Background**          | Popup           | Background        | `chrome.runtime.connect()`                                                  |
-| **Content Script → Background** | Content Script  | Background        | `chrome.runtime.connect()`                                                  |
+| Direction                       | Client (caller) | Server (receiver) | How to obtain the `port`                                                          |
+| ------------------------------- | --------------- | ----------------- | --------------------------------------------------------------------------------- |
+| **Popup → Background**          | Popup           | Background        | `chrome.runtime.connect()`                                                        |
+| **Content Script → Background** | Content Script  | Background        | `chrome.runtime.connect()`                                                        |
 | **Popup → Content Script**      | Popup           | Content Script    | First get the tabId via `chrome.tabs.query`,<br>then `chrome.tabs.connect(tabId)` |
 
 ### Example: Popup calling Content Script
@@ -112,24 +114,27 @@ createChromeHandler({ router: appRouter });
 import { chromeLink } from '@cyia/chrome-trpc/client';
 import { createTRPCProxyClient } from '@trpc/client';
 import type { AppRouter } from './router';
-
+// when popup to Content Script
 const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
-if (tab.id) {
-  const port = chrome.tabs.connect(tab.id);
-  const trpc = createTRPCProxyClient<AppRouter>({
-    links: [chromeLink({ port })],
-  });
-  const data = await trpc.getData.query();
-}
+const port = chrome.tabs.connect(tab.id);
+// when popup/Content Script to Background
+const port = chrome.runtime.connect();
+
+const trpc = createTRPCProxyClient<AppRouter>({
+  links: [chromeLink({ port })],
+});
+const data = await trpc.getData.query();
 ```
 
+
+
 ## 📦 Binary Compression
 
 The adapter uses the [Snappy](https://github.com/zhipeng-jia/snappyjs) algorithm to compress and decompress `Uint8Array` data, significantly reducing the transfer size.
 
 ### Response Compression (server configuration)
 
-In some scenarios you may want to explicitly specify which response paths should be compressed, or a procedure may return data that is not a plain `Uint8Array` but is still large.  
+In some scenarios you may want to explicitly specify which response paths should be compressed, or a procedure may return data that is not a plain `Uint8Array` but is still large.
 In such cases you can pass the `compressPathObj` option to `createChromeHandler`. The keys are the procedure route paths, and a value of `true` enables compression.
 
 For example, suppose you extended your router with a `res` sub-router and a `cmp` query:
@@ -137,7 +142,7 @@ For example, suppose you extended your router with a `res` sub-router and a `cmp
 ```typescript
 // router.ts extended
 export const appRouter = t.router({
-  greet: t.procedure.input(z.string()).query(({ input }) => `Hello ${input}`),
+  greet: t.procedure.input(v.string()).query(({ input }) => `Hello ${input}`),
   getData: t.procedure.query(() => ({ payload: new Uint8Array([1, 2, 3]) })),
   res: t.router({
     cmp: t.procedure.query(() => {
@@ -145,7 +150,7 @@ export const appRouter = t.router({
     }),
   }),
 });
-```
+
 
 Server configuration compressing the path `'res.cmp'`:
 

package/readme.zh-hans.md

@@ -37,18 +37,20 @@ npm install @cyia/chrome-trpc @trpc/client @trpc/server
 
 ```typescript
 import { initTRPC } from '@trpc/server';
-import { z } from 'zod'; // 或其他验证库，如 valibot
+import * as v from 'valibot';
 
 const t = initTRPC.create();
 
 export const appRouter = t.router({
-  greet: t.procedure.input(z.string()).query(({ input }) => `Hello ${input}`),
+  greet: t.procedure.input(v.string()).query(({ input }) => `Hello ${input}`),
   getData: t.procedure.query(() => ({ payload: new Uint8Array([1, 2, 3]) })),
 });
 
 export type AppRouter = typeof appRouter;
 ```
 
+- 如果在Content Script中使用，需要设置isServer `const t = initTRPC.create({ isServer: true });`
+
 ### 2. 服务端（接收端）
 
 在需要提供服务的脚本（如 background 或 content script）中，使用 `createChromeHandler` 监听来自其他部分的连接。
@@ -112,15 +114,16 @@ createChromeHandler({ router: appRouter });
 import { chromeLink } from '@cyia/chrome-trpc/client';
 import { createTRPCProxyClient } from '@trpc/client';
 import type { AppRouter } from './router';
-
+// popup 到 Content Script 时
 const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
-if (tab.id) {
-  const port = chrome.tabs.connect(tab.id);
-  const trpc = createTRPCProxyClient<AppRouter>({
-    links: [chromeLink({ port })],
-  });
-  const data = await trpc.getData.query();
-}
+const port = chrome.tabs.connect(tab.id);
+// popup/Content Script 到 Background 时
+const port = chrome.runtime.connect();
+
+const trpc = createTRPCProxyClient<AppRouter>({
+  links: [chromeLink({ port })],
+});
+const data = await trpc.getData.query();
 ```
 
 ## 📦 二进制压缩
@@ -137,7 +140,7 @@ if (tab.id) {
 ```typescript
 // router.ts 扩展
 export const appRouter = t.router({
-  greet: t.procedure.input(z.string()).query(({ input }) => `Hello ${input}`),
+  greet: t.procedure.input(v.string()).query(({ input }) => `Hello ${input}`),
   getData: t.procedure.query(() => ({ payload: new Uint8Array([1, 2, 3]) })),
   res: t.router({
     cmp: t.procedure.query(() => {