@notevenaneko/trpc-chrome
v1.1.1
Published
tRPC adapter for Web Extensions
Downloads
1
Maintainers
Readme
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
.
# npm
npm install trpc-chrome
# yarn
yarn add trpc-chrome
2. Add createChromeHandler
in your background script.
// 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.
// 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<AppRouter>({
links: [/* 👉 */ chromeLink({ port })],
});
Requirements
Peer dependencies:
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 💙