🧩 Plasmo Developers•11mo ago

Injecting Content Script UI on Extension Click (and disabling popup)

I've got the popup disabled already by renaming the file. However, I'm still trying to figure out how to dynamically inject a content script UI on to the page when the extension is clicked. The end functionality of the extension should be a UI that appears on screen instead of a popup. So far my background/index.ts file looks something roughly like this:

import menuUrl from './injected_helper'

chrome.action.onClicked.addListener((tab) => {
    console.log('action click', tab.id)

    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      world: "MAIN",
      func: menuUrl
    })
});

import menuUrl from './injected_helper'

chrome.action.onClicked.addListener((tab) => {
    console.log('action click', tab.id)

    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      world: "MAIN",
      func: menuUrl
    })
});

It works for importing in a regular .ts file (./injected_helper), but I can't seem to get it to work with a content script UI file.

4 Replies

Arcane•11mo ago

@asmboy has reached level 1. GG!

Diegood•2w ago

did you manage to find a solution?? Plasmo should definetly add an example of this I think it's very common and not very clear how to proceed with this

tbrockman•2w ago

Does the UI need to be injected dynamically? Could you register a static UI which then only renders after the action is clicked?

tbrockman•2w ago

I don't think Plasmo supports dynamic UI injection natively, so if you really want to do something like this you'd probably have to cobble it together yourself, which would involve something like compiling the necessary javascript into a self contained serializable function (so you can pass it to func, I wrote this parcel plugin when I had to do something similar), and then injecting all the necessary CSS into the page

GitHub

GitHub - tbrockman/parcel-resolver-inlinefunc: Parcel resolver for ...

Parcel resolver for compiling and inlining functions as IIFEs - tbrockman/parcel-resolver-inlinefunc

Gaming

Programming

Injecting Content Script UI on Extension Click (and disabling popup)