Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jlalmes/trpc-chrome
tRPC adapter for Web Extensions 🧩
https://github.com/jlalmes/trpc-chrome
chrome-extension trpc webext webextensions
Last synced: 19 days ago
JSON representation
tRPC adapter for Web Extensions 🧩
- Host: GitHub
- URL: https://github.com/jlalmes/trpc-chrome
- Owner: jlalmes
- License: mit
- Created: 2022-06-22T11:30:23.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-02T07:31:45.000Z (about 1 year ago)
- Last Synced: 2024-10-30T08:38:16.646Z (about 1 month ago)
- Topics: chrome-extension, trpc, webext, webextensions
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/trpc-chrome
- Size: 1.37 MB
- Stars: 267
- Watchers: 7
- Forks: 21
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-webext-dev - trpc-chrome - tRPC adapter for Web Extensions (Packages)
README
trpc-chrome
## **[Chrome extension](https://developer.chrome.com/docs/extensions/mv3/) support for [tRPC](https://trpc.io/)** 🧩
- Easy communication for web extensions.
- Typesafe messaging between content & background scripts.
- Ready for Manifest V3.
## Usage
**1. Install `trpc-chrome`.**
```bash
# npm
npm install trpc-chrome
# yarn
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 })],
});
```
## Requirements
Peer dependencies:
- [`tRPC`](https://github.com/trpc/trpc) Server v10 (`@trpc/server`) must be installed.
- [`tRPC`](https://github.com/trpc/trpc) Client v10 (`@trpc/client`) must be installed.
## Example
Please see [full example here](examples/with-plasmo).
_For advanced use-cases, please find examples in our [complete test suite](test)._
## Types
#### ChromeLinkOptions
Please see [full typings here](src/link/index.ts).
| Property | Type | Description | Required |
| -------- | --------------------- | ---------------------------------------------------------------- | -------- |
| `port` | `chrome.runtime.Port` | An open web extension port between content & background scripts. | `true` |
#### CreateChromeHandlerOptions
Please see [full typings here](src/adapter/index.ts).
| 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](https://twitter.com/jlalmes) 💙