{"id":13603272,"url":"https://github.com/jlalmes/trpc-chrome","last_synced_at":"2025-04-04T19:15:16.793Z","repository":{"id":40943980,"uuid":"506218349","full_name":"jlalmes/trpc-chrome","owner":"jlalmes","description":"tRPC adapter for Web Extensions 🧩","archived":false,"fork":false,"pushed_at":"2023-12-02T07:31:45.000Z","size":1433,"stargazers_count":267,"open_issues_count":7,"forks_count":21,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-30T08:38:16.646Z","etag":null,"topics":["chrome-extension","trpc","webext","webextensions"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/trpc-chrome","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jlalmes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"jlalmes"}},"created_at":"2022-06-22T11:30:23.000Z","updated_at":"2024-10-30T03:06:32.000Z","dependencies_parsed_at":"2024-10-26T01:04:22.933Z","dependency_job_id":null,"html_url":"https://github.com/jlalmes/trpc-chrome","commit_stats":{"total_commits":10,"total_committers":3,"mean_commits":"3.3333333333333335","dds":0.5,"last_synced_commit":"af6cc54c66b652fee90be39b837b1b7ff8269cb5"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlalmes%2Ftrpc-chrome","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlalmes%2Ftrpc-chrome/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlalmes%2Ftrpc-chrome/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlalmes%2Ftrpc-chrome/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jlalmes","download_url":"https://codeload.github.com/jlalmes/trpc-chrome/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234927,"owners_count":20905854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-extension","trpc","webext","webextensions"],"created_at":"2024-08-01T18:02:00.010Z","updated_at":"2025-04-04T19:15:16.768Z","avatar_url":"https://github.com/jlalmes.png","language":"TypeScript","funding_links":["https://github.com/sponsors/jlalmes"],"categories":["TypeScript","chrome-extension","Packages"],"sub_categories":[],"readme":"![trpc-chrome](assets/trpc-chrome-readme.png)\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003etrpc-chrome\u003c/h1\u003e\n  \u003ca href=\"https://www.npmjs.com/package/trpc-chrome\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/trpc-chrome.svg?style=flat\u0026color=brightgreen\" target=\"_blank\" /\u003e\u003c/a\u003e\n  \u003ca href=\"./LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-black\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://trpc.io/discord\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/chat-discord-blue.svg\" /\u003e\u003c/a\u003e\n  \u003cbr /\u003e\n  \u003chr /\u003e\n\u003c/div\u003e\n\n## **[Chrome extension](https://developer.chrome.com/docs/extensions/mv3/) support for [tRPC](https://trpc.io/)** 🧩\n\n- Easy communication for web extensions.\n- Typesafe messaging between content \u0026 background scripts.\n- Ready for Manifest V3.\n\n## Usage\n\n**1. Install `trpc-chrome`.**\n\n```bash\n# npm\nnpm install trpc-chrome\n# yarn\nyarn add trpc-chrome\n```\n\n**2. Add `createChromeHandler` in your background script.**\n\n```typescript\n// background.ts\nimport { initTRPC } from '@trpc/server';\nimport { createChromeHandler } from 'trpc-chrome/adapter';\n\nconst t = initTRPC.create({\n  isServer: false,\n  allowOutsideOfServer: true,\n});\n\nconst appRouter = t.router({\n  // ...procedures\n});\n\nexport type AppRouter = typeof appRouter;\n\ncreateChromeHandler({\n  router: appRouter /* 👈 */,\n});\n```\n\n**3. Add a `chromeLink` to the client in your content script.**\n\n```typescript\n// content.ts\nimport { createTRPCClient } from '@trpc/client';\nimport { chromeLink } from 'trpc-chrome/link';\n\nimport type { AppRouter } from './background';\n\nconst port = chrome.runtime.connect();\nexport const chromeClient = createTRPCClient\u003cAppRouter\u003e({\n  links: [/* 👉 */ chromeLink({ port })],\n});\n```\n\n## Requirements\n\nPeer dependencies:\n\n- [`tRPC`](https://github.com/trpc/trpc) Server v10 (`@trpc/server`) must be installed.\n- [`tRPC`](https://github.com/trpc/trpc) Client v10 (`@trpc/client`) must be installed.\n\n## Example\n\nPlease see [full example here](examples/with-plasmo).\n\n_For advanced use-cases, please find examples in our [complete test suite](test)._\n\n## Types\n\n#### ChromeLinkOptions\n\nPlease see [full typings here](src/link/index.ts).\n\n| Property | Type                  | Description                                                      | Required |\n| -------- | --------------------- | ---------------------------------------------------------------- | -------- |\n| `port`   | `chrome.runtime.Port` | An open web extension port between content \u0026 background scripts. | `true`   |\n\n#### CreateChromeHandlerOptions\n\nPlease see [full typings here](src/adapter/index.ts).\n\n| Property        | Type       | Description                                            | Required |\n| --------------- | ---------- | ------------------------------------------------------ | -------- |\n| `router`        | `Router`   | Your application tRPC router.                          | `true`   |\n| `createContext` | `Function` | Passes contextual (`ctx`) data to procedure resolvers. | `false`  |\n| `onError`       | `Function` | Called if error occurs inside handler.                 | `false`  |\n\n---\n\n## License\n\nDistributed under the MIT License. See LICENSE for more information.\n\n## Contact\n\nJames Berry - Follow me on Twitter [@jlalmes](https://twitter.com/jlalmes) 💙\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjlalmes%2Ftrpc-chrome","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjlalmes%2Ftrpc-chrome","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjlalmes%2Ftrpc-chrome/lists"}