How to inject CSUI on page action click?

[zamoshchin]

Traditionally this is possible via a listener in the background script

There's no clear way to do this in Plasmo. The following does not work

background/index.ts:

import Container from "~background/content";

chrome.action.onClicked.addListener((tab) => {
    chrome.scripting.executeScript(
        {
            target: {
                tabId: tab.id // the tab you want to inject into
            },
            world: "MAIN", // MAIN to access the window object
            func: Container
        },
        (e) => {
            console.log("Background script got callback after injection")
        }
    )
});

background/content.tsx:

const Container = () => {
    return <div>Test</div>
}

export default Container

[louisgv]

You will need to remove your popup entry, otherwise it will not work.

[zamoshchin]

I do not have any popup entry. No popup.tsx or anything in popup/

[louisgv]

Do you have the action permission enabled?

[zamoshchin]

There is no "action" permission. Here is what I have

"manifest": {
  "host_permissions": [
    "<all_urls>"
  ],
  "permissions": [
    "nativeMessaging",
    "activeTab",
    "tabs",
    "storage",
    "webRequest",
    "scripting",
    "clipboardWrite",
    "management"
  ]
}

[louisgv]

I just tested it just now and it worked: https://github.com/PlasmoHQ/examples/blob/main/with-background/background.ts

You might want to put a console.log in there and see where the issue actually is.

[zamoshchin]

Is it possible to inject CSUI instead of just regular content script functions via the func param?
i.e. func: Container

[louisgv]

Is it possible to inject CSUI instead of just regular content script functions via the func param?

I think so but the func must be a function that mount react etc...

You can inject CSUI in the mainworld and use messaging to toggle it on/off too,