@elasticbottle/trpc-post-message

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.