trpc-post-message

⭐ Help this repo out, STAR it! ⭐

Post Message support for tRPC 📨

Easy communication between iframes.
Typesafe messaging between parent and child windows
soon to be compatible with web workers

Usage

1. Install trpc-post-message.

# npm
npm install @elasticbottle/trpc-post-message
# yarn
yarn add @elasticbottle/trpc-post-message
# pnpm
pnpm add @elasticbottle/trpc-post-message

2. Add createPostMessageHandler in your background script.

// background.ts
import { initTRPC } from "@trpc/server";
import { createPostMessageHandler } from "@elasticbottle/trpc-post-message/adapter";

const t = initTRPC.create({
  isServer: false,
  allowOutsideOfServer: true,
});

const appRouter = t.router({
  // ...procedures
});

export type AppRouter = typeof appRouter;

createPostMessageHandler({
  router: appRouter,
  postMessage: ({ message }) => window.postMessage(message, "your_targeted_url"),
  addEventListener: (listener) =>
    window.addEventListener("message", (e) => {
      if (e.origin !== 'your_whitelisted_domain') {
        return;
      }
      listener(e);
    }),
}); /* 👈 */,

3. Add a PostMessageLink to the client in your content script.

// content.ts
import { createTRPCClient } from "@trpc/client";
import { PostMessageLink } from "@elasticbottle/trpc-post-message/link";

import type { AppRouter } from "./background";

export const PostMessageClient = createTRPCClient<AppRouter>({
  links: [
    PostMessageLink({
      postMessage: ({ message }) => window.postMessage(message, "your_targeted_url"),
      addEventListener: (listener) => {
        const customerListener = (e) => {
          if (e.origin !== 'your_whitelisted_domain') {
            return;
          }
          listener(e);
        }
        window.addEventListener("message", customerListener)
        // if you don't return anything it is assumed that the default listener was used
        return customerListener;
      },
      removeEventListener: (listener) =>
        window.removeEventListener("message", listener),
    }),
  ], /* 👈 */,
});

Requirements

Peer dependencies:

tRPC Server v10 (@trpc/server) must be installed.
tRPC Client v10 (@trpc/client) must be installed.

Types

PostMessageLinkOption

Please see full typings here.

Property	Type	Description	Required
`postMessage`	`Function`	Called to send data to the "server". You must send the `message` param as is	`true`
`addEventListener`	`Function`	Called to add listener to receive request from the "server".	`true`

CreatePostMessageHandlerOptions

Please see full typings here.

Property	Type	Description	Required
`router`	`Router`	Your application tRPC router.	`true`
`postMessage`	`Function`	Called to send data to the "client". You must send the `message` param as is	`true`
`addEventListener`	`Function`	Called to add listener to receive request from the "client".	`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

Winston Yeo - Follow me on Twitter @winston_yeo 💖

Acknowledgements

Ths project would not have been possible without @jlalmes and his well-documented trpc-chrome package for which this code base was heavily built upon.

ElasticBottle/trpc-post-message