!trpc-chrome

trpc-chrome

---

Chrome extension support for tRPC 🧩

- Easy communication for web extensions.
- Typesafe messaging between content & background scripts.
- Ready for Manifest V3.

Usage

1. Install trpc-chrome.

``bash


npm

2. Add createChromeHandler in your background script.

`typescript
// background.ts
import { initTRPC } from '@trpc/server';
import { createChromeHandler } from 'trpc-chrome/adapter';

const t = initTRPC.create({
isServer: false,
allowOutsideOfServer: true,
});

const appRouter = t.router({
// ...procedures
});

export type AppRouter = typeof appRouter;

createChromeHandler({
router: appRouter / 👈 /,
});
`

3. Add a chromeLink to the client in your content script.

`typescript
// content.ts
import { createTRPCClient } from '@trpc/client';
import { chromeLink } from 'trpc-chrome/link';

import type { AppRouter } from './background';

const port = chrome.runtime.connect();
export const chromeClient = createTRPCClient({
links: [/ 👉 / chromeLink({ port })],
});
`

Requirements

Peer dependencies:

- tRPC Server v10 (@trpc/server) must be installed.
- tRPC Client v10 (@trpc/client) must be installed.

Example

Please see full example here.

_For advanced use-cases, please find examples in our complete test suite._

Types

#### ChromeLinkOptions

Please see full typings here.

| Property | Type | Description | Required |
| -------- | --------------------- | ---------------------------------------------------------------- | -------- |
| port | chrome.runtime.Port | An open web extension port between content & background scripts. | true |

#### CreateChromeHandlerOptions

Please see full typings here.

| Property | Type | Description | Required |
| --------------- | ---------- | ------------------------------------------------------ | -------- |
| router | Router | Your application tRPC router. | true |
| createContext | Function | Passes contextual (ctx) data to procedure resolvers. | false |
| onError | Function | Called if error occurs inside handler. | false` |

---

License

Distributed under the MIT License. See LICENSE for more information.

Contact

James Berry - Follow me on Twitter @jlalmes 💙