Mechanism for sending messages between current tab, iframe, background?

[ongnxco]

Hi, thanks for this great framework.

I used Google to translate, hope you understand what I mean.

I use createContentScriptIframe to create an iframe. I currently don't know how to send a message between the current tab and the iframe.

This is what I'm doing right now:

shared/messageing2.ts

import { defineWindowMessaging } from '@webext-core/messaging/page';

export interface WebsiteMessengerSchema {
  iframeVsTab(data: unknown): void;
}

export const websiteMessenger = defineWindowMessaging<WebsiteMessengerSchema>({
  namespace: 'browser.runtime.id111',
});

currentTab - iframe.content.ts

import { websiteMessenger } from "@/shared/messaging2";
export default defineContentScript({
  matches: ["<all_urls>"],
  async main(ctx) {
    const ui = createContentScriptIframe(ctx, {
      page: "/dialog.html", // App.vue
      type: "modal",
    });
    ui.iframe.className = "wxt-iframe";
    ui.mount();
    websiteMessenger.onMessage("iframeVsTab", data => {
      console.log("iframeVsTab", new Date(), data);
    })
  },
});

on Iframe, /dialog.html (App.vue):

import { websiteMessenger } from "@/shared/messaging2";
const handleClick = async () => {
    await websiteMessenger.sendMessage('iframeVsTab', false);
}

But when I click the button with the handleClick event, I don't see anything in the currentTab.

I don't know where am I wrong?

[aklinker1]

Ahh, defineWindowMessaging was more created for a website to send a message to a extension, rather than communicating with other frames on the same page... So that library will need some changes to get it working for your use-case.

To get this working without a library:

// inside the top frame
window.addEventListener("message", (event) => {
  console.log("request:", event.data);
  event.source.postMessage("response-data");
});

// inside your iframe
window.top.postMessage("request-data");
window.addEventListener("message", (event) => {
  // Do something with the response
  console.log("response:", event.data);
}, { once: true });

The reason the library doesn't work, is it sends messages to window, not window.top.

---

That said, you may run into CORS errors while sending these messages between frames... Instead, I recommend sending the message to the background, then sending the message back to the tab.

iframe -> background -> top frame -> background -> iframe

It seems complicated, but it's super easy:

// messaging.ts

import { defineExtensionMessaging } from '@webext-core/messaging';

export interface ProtocolMap {
  getDataFromTopFrame(data: YourRequestData): YourResponseData;
}

export const messaging = defineExtensionMessaging<MessagingProtocol>();

// inside the iframe

const response = await messaging.sendMessage("getDataFromTopFrame", { ... });
console.log({ response });

// inside the background

messaging.onMessage("getDataFromTopFrame", ({ sender, data }) => {
  // Send the message back to the tab, and return the response
  return await messaging.sendMessage("getDataFromTopFrame", data, sender.tab?.id);
});

// inside the top frame

messaging.onMessage("getDataFromTopFrame", ({ data }) => {
  console.log("Getting data from top frame...", data);
  // Do your top frame work and return a response
  return { ... };
});

With this approach, you don't need to worry about CORS and it works on iframes at any depth (iframe in an iframe, in an iframe, etc).

[ongnxco]

Oh I understand. Thank you very much.