tRPC adapter for Web Extensions
npm install trpc-chrome- Easy communication for web extensions.
- Typesafe messaging between content & background scripts.
- Ready for Manifest V3.
1. Install trpc-chrome.
``bash`npm
npm install trpc-chromeyarn
yarn add trpc-chrome
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 })],
});
`
Peer dependencies:
- tRPC Server v10 (@trpc/server) must be installed.tRPC
- Client v10 (@trpc/client) must be installed.
Please see full example here.
_For advanced use-cases, please find examples in our complete test suite._
#### 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` |
---
Distributed under the MIT License. See LICENSE for more information.
James Berry - Follow me on Twitter @jlalmes 💙