0.0.4 ā¢ Published 1 year ago
@elasticbottle/trpc-post-message v0.0.4
ā 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:
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.