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 |

License

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

Contact

James Berry - Follow me on Twitter @jlalmes 💙