⭐ 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.