Execute code in the main world from a side panel

[stevebeauge]

Hi,

I want to execute some arbitrary code in the main world, triggered by a button in a side panel. My goal is to call API in a specific app using the user's context without having to reauthenticate.

As far as I understand, the only way o achieve this is:

• send a message from the side panel to the active tab
• listen messages in a content script, and forward it to the main world
• listen for main world message return's
• send back the message to the sidepanel.

Basically, using @webext-core/messaging, I've done:

// protocolMap.ts
export interface ProtocolMap {
  fetchData(url: string): object;
}

// panelContentMessaging.ts
import { defineExtensionMessaging } from "@webext-core/messaging";
import type { ProtocolMap } from "./ProtocolMap";

const panelContentMessaging = defineExtensionMessaging<ProtocolMap>();

export { panelContentMessaging };

// contentInjectedMessaging.ts
import { defineCustomEventMessaging } from "@webext-core/messaging/page";
import packageJson from "../../package.json";
import type { ProtocolMap } from "./ProtocolMap";

const contentInjectedMessaging = defineCustomEventMessaging<ProtocolMap>({
  namespace: packageJson.name,
});

export { contentInjectedMessaging };

// entrypoints/content/index.ts
import { contentInjectedMessaging } from "../../messaging/contentInjectedMessaging";
import { panelContentMessaging } from "../../messaging/panelContentMessaging";

export default defineContentScript({
  matches: ["*://*/*"],
  async main() {
    await injectScript("/content-mainworld.js", {
      keepInDom: true,
    });
   // ! Trick here: forward the message to the main workd
    panelContentMessaging.onMessage("fetchData", async (msg) => {
      return contentInjectedMessaging.sendMessage("fetchData", msg.data);
    });

  },
});

// entrypoints/content-mainworld.ts
export default defineUnlistedScript(() => {
  contentInjectedMessaging.onMessage("fetchData", async (url) => {
      // Do the fetch using app's context
      return myApi.fetch(url);
  });
});

// entrypoints/sidepanel/App.tsx
import { useState } from "react";
import { panelContentMessaging } from "../../messaging/panelContentMessaging";

import { browser, Tabs } from "wxt/browser";
export const getActiveTab = async (): Promise<Tabs.Tab> => {
  const allTabs = await browser.tabs.query({
    active: true,
    currentWindow: true,
  });
  const activeTab = allTabs[0];
  return activeTab;
};

function App() {
  const [count, setCount] = useState(0);
  const [messageResponse, setMessageResponse] = useState<object>();

  const sendMessageOnClick = async () => {
    try {
      const activeTab = await getActiveTab();
      if (!activeTab.id) {
        console.error("No active tab found");
        return;
      }
      const response = await panelContentMessaging.sendMessage(
        "fetchData",
        "https://",
        {
          tabId: activeTab.id,
        }
      );
      setMessageResponse(response);
    } catch (error) {
      console.error("Error sending message:", error);
    }
  };

  return (
    <div>
      <button onClick={() => setCount((count) => count + 1)}>
        count is {count}
      </button>
      <button onClick={sendMessageOnClick}>Send Message</button>
      {messageResponse && <pre>{JSON.stringify(messageResponse, null, 2)}</pre>}
    </div>
  );
}

export default App;

I wonder if I missed something. Is there any simpler way to reach my goal?

As a side note I'll probably reuse the logic to implement an actual DevTool. Should I keep my structure ? are there better way ?

PS: thanks for the awesome work for this project!

[aklinker1]

You can send a message to the background, then use the scripting API to run a script in the active tab. This would consume less resources compared to always injecting a content script (and keeping it idle until it receives a message).

• https://developer.chrome.com/docs/extensions/reference/api/scripting
• https://wxt.dev/guide/essentials/scripting.html

[stevebeauge]

Thanks for the suggestion. However, I'm struggling with implementing the injection from the background.

Inside my background script, I have something like this:

export default defineBackground(() => {
  console.log("Hello background!", { id: browser.runtime.id });

  // bridgeFetch message is set by my sidepanel
  panelContentMessaging.onMessage("bridgeFetch", async (msg) => {
    try {
      const activeTab = await getActiveTab();
      if (!activeTab.id)  { console.error("No active tab found");        return;      }
      const res = await browser.scripting.executeScript({
        target: { tabId: activeTab.id },
        func: bridge,
        args: [msg.data]
      });
      return res;
    } catch (error) {
      console.error("Error fetching data:", error);
      throw error;
    }
  });
});

If I define the bridge function like this (in the same file as the background script):

function bridge(url: string) { 
   return url.toUpperCase();
}

I get the proper result (send back the upper cased value to my caller).

However, as soon as I want to consume another function or module inside my function, it stops working.

Even a simple

function up(url : string) { 
   return url.toUpperCase();
}
function bridge(url: string) { 
   return up(url);
}

does not works.

My injected script can be a bit complex and will involves a few modules, I cannot simply inline all my sub functions.

I tried something like this to load dynamically a module:

async function bridge(url: string) {
  return import("../service/bridge").then((module) => {
    const fetchBridge= module.fetchBridge;
    return fetchBridge(url);
  });
}

But still not working.

The bundled javascript of this pattern is something like:

    async function bridge$1(url) {
        return Promise.resolve().then( () => bridge).then( (module) => {
            const fetchBridge= module.fetchBridge;
            return fetchBridge(url);
        }
        );
    }

   ...

    const bridge= /* @__PURE__ */
    Object.freeze(/* @__PURE__ */
    Object.defineProperty({
        __proto__: null,
        fetchBridge,
    }, Symbol.toStringTag, {
        value: "Module"
    }));

I'm quite new to extension development, but I guess it's failing because of the way the native chrome.extension.executeScript serializes the function and deserializes it in the actual page context.

Is there any rule of thumb regarding script injection from a background script that I should be aware of? Is there anything I can do?

thanks

[aklinker1]

If you have a complex script you need to run, don't use func. Instead, create a new unlisted script with your logic and use files instead.

There's a complete example in the docs: https://wxt.dev/guide/essentials/scripting.html

For more info: https://developer.chrome.com/docs/extensions/reference/api/scripting#files

[stevebeauge]

I saw this, but unless I misunderstood, passing parameter is only possible using func.
I think I'll have to find an hybrid approach, using file injection from a background script, which will start the message listening. This way I'll bootstrap my complex script only once, while still been able to pass parameters
thanks for your support :)