🧩 Plasmo Developers•17mo ago

How to use plasmo with a side panel?

I was previously using the tabs folder workaround, but it seems that @lab has added proper support for a sidepanel.tsx file (awesome work Louis). I cannot for the life of me figure out how to get this to work even looking at the example. Is there something obvious I'm missing? https://github.com/PlasmoHQ/examples/tree/main/with-sidepanel

GitHub

examples/with-sidepanel at main · PlasmoHQ/examples

🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - PlasmoHQ/examples

9 Replies

Arcane•17mo ago

@gehrig. has reached level 1. GG!

gehrig.OP•17mo ago

To add this was trying to manually achieve this off of using create plasmo and using pnpm create plasmo --with-sidepanel. For each when clicking the extension's icon I expect the side panel to open up and display sidepanel.tsx, but nothing happens. No errors are displayed with --verbose.

lab•17mo ago

@gehrig. can you inpsect the output manifest.json and paste it here? (in the build/*-dev) I tested that on brave and chrome, worked doh

gehrig.OP•17mo ago

Odd. This what you're looking for? I did check and the sidepanel.html is being auto generated and referencing the right js file, too. This was with chrome.

{"icons":{"16":"icon16.plasmo.9f44d99c.png","32":"icon32.plasmo.83dbbbab.png","48":"icon48.plasmo.a78c509e.png","64":"icon64.plasmo.15206795.png","128":"icon128.plasmo.c11f39af.png"},"manifest_version":3,"action":{"default_icon":{"16":"icon16.plasmo.9f44d99c.png","32":"icon32.plasmo.83dbbbab.png","48":"icon48.plasmo.a78c509e.png","64":"icon64.plasmo.15206795.png","128":"icon128.plasmo.c11f39af.png"}},"version":"0.0.1","author":"Plasmo Corp. <[email protected]>","name":"DEV | Deckhand sidepanel","description":"Using side-panel API in an extension","side_panel":{"default_path":"sidepanel.html"},"permissions":["sidePanel"],"host_permissions":["https://*/*"],"background":{"service_worker":"plasmo-default-background.e198ef58.js"},"content_security_policy":{"extension_pages":"script-src 'self' http://localhost;object-src 'self';"},"web_accessible_resources":[{"matches":["<all_urls>"],"resources":["__plasmo_hmr_proxy__"]}]}

{"icons":{"16":"icon16.plasmo.9f44d99c.png","32":"icon32.plasmo.83dbbbab.png","48":"icon48.plasmo.a78c509e.png","64":"icon64.plasmo.15206795.png","128":"icon128.plasmo.c11f39af.png"},"manifest_version":3,"action":{"default_icon":{"16":"icon16.plasmo.9f44d99c.png","32":"icon32.plasmo.83dbbbab.png","48":"icon48.plasmo.a78c509e.png","64":"icon64.plasmo.15206795.png","128":"icon128.plasmo.c11f39af.png"}},"version":"0.0.1","author":"Plasmo Corp. <[email protected]>","name":"DEV | Deckhand sidepanel","description":"Using side-panel API in an extension","side_panel":{"default_path":"sidepanel.html"},"permissions":["sidePanel"],"host_permissions":["https://*/*"],"background":{"service_worker":"plasmo-default-background.e198ef58.js"},"content_security_policy":{"extension_pages":"script-src 'self' http://localhost;object-src 'self';"},"web_accessible_resources":[{"matches":["<all_urls>"],"resources":["__plasmo_hmr_proxy__"]}]}

The Deviant•10mo ago

anyone found a solution?

Arcane•10mo ago

@The Deviant has reached level 1. GG!

The Deviant•10mo ago

i'm having the exact same problem did you get to solve it?

Serhii•10mo ago

Hey folks, As far as I understood you want to open sidepanel on extension icon click. This is the official doc: https://developer.chrome.com/docs/extensions/reference/api/sidePanel Also, I've added following to my background script:

chrome.sidePanel
    .setPanelBehavior({ openPanelOnActionClick: true })
    .catch((error) => console.error(error));

Oh, and important point, you shouldn't have popup.html file, otherwise it won't work

Chrome for Developers

chrome.sidePanel | API | Chrome for Developers

r15i•3mo ago

hey @Serhii , where's located background script?

Gaming

Programming

How to use plasmo with a side panel?