Trpc-chrome NPM

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.

# 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:

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`