Topics

🧩 Plasmo DevelopersThe Deviant

Sidepanel as main

i'm trying to trigger Plasmo SidePanel when user clicks on the extension icon. but i can't get it to work. any solution on ideas? what i need is to open a side panel from right side of the screen taking the full height. how else is it possible?

The Deviant•63d ago

Anyone? I'm so stuck @lab

lab•63d ago

It'd be easier for you to implement a custom "sidepanel" via csui and inject it on clicking the extension icon

The Deviant•63d ago

@lab i tried forking -with-sidepanel but nothing shows up. and i get no error

lab•63d ago

the sidepanel API is not what you think it is - it's the chrome's sidepanel you must click the button to see

The Deviant•63d ago

oh. then would you please tell me a little more about your solution. i dont get it oh, righttt. just saw that. i could spend hours and not realize that. thanks. but i still need to implement the sidepanel. and i dont see how i should do that

YAGPDB.xyz•63d ago

Gave +1 Rep to @lab (current: #1 - 168)

lab•63d ago

see: https://docs.plasmo.com/framework/content-scripts-ui

Plasmo Docs

Content Scripts UI – Plasmo

How to inject your own components into an existing web page with Plasmo's Content Scripts UI features.

The Deviant•63d ago

would you recommend a doc on how i should inject it on clicking the extension icon? i'd be so thankful. i'm quite new to this @lab

Arcane•63d ago

@The Deviant has reached level 2. GG!

The Deviant•63d ago

@lab like this?

export const createSidebar = (property: Property) => {
  const sidebarContainer = document.createElement("div");
  ReactDOM.createRoot(sidebarContainer).render(
    <QueryClientProvider client={queryClient}>
      <Sidebar property={property} />
    </QueryClientProvider>,
  );
  return sidebarContainer;
};

export const createSidebar = (property: Property) => {
  const sidebarContainer = document.createElement("div");
  ReactDOM.createRoot(sidebarContainer).render(
    <QueryClientProvider client={queryClient}>
      <Sidebar property={property} />
    </QueryClientProvider>,
  );
  return sidebarContainer;
};

and call the function on popup.tsx? @lab i need help really :))

matrix•63d ago

would recommend pinging him one more time 💀

matrix•63d ago

https://developer.chrome.com/docs/extensions/reference/api/sidePanel#open-action-icon

Chrome for Developers

chrome.sidePanel | API | Chrome for Developers

matrix•63d ago

and be aware that sidepanels currently only are available in chrome (i believe)

Serhii•59d ago

https://discord.com/channels/946290204443025438/1144145893398937730/1219715199955763231

🧩 Plasmo Developers Join

2.1KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

MUI styles with PlasmoGetInlineAnchorListStyles are added only for last shadow-root. Please tell me how to make it work. // Plasmo import c Typescript ConfusionI am working on a very simple extension that collects some data off the page and stores it locally. Proxy authentication and API calls afterwardHello, guys. I'm starting to give up. I'm developing proxy extension and proxying works okay. But how do you get a privacy policy when uploading to chrome web store?Most generators that I have searched for online require a link to your website to put in, but since await not definedhey! just trying out the basic extension framework using `create plasmo`. had the basics working, bu Logging user errorsAnyone have any suggestions on any libraries or strategies that you use to log errors coming from us No styling for options.tsxI have a basic options page written in TypeScript and styled via Tailwind CSS that displays perfectl Shadcn dosnt seem to work in content script uiI have been trying to get Shadcn to work with CSUI. I followed almost everything from this server as with-message exampleHow can I get with-message example to fully work? Including communication between tabs and content w How to mock storageHey guys, im fairly new with plasmo. currently writing e2e tests with playwright. How can i properly tab page works with pnpm run dev but is blocked when i run pnpm build and pnpm packageWhen I upload my zipfile to plasmo itero, none of my users can access the tab page. however It works support for multiple assetstrying to do a simple toggle icon extension (click extension to toggle icon) but it seems like only Supabase url and anon key exposedI am a newbie exploring Plasmo for supabase authentication. The public url and anon keys are added i Supabase url and anon key exposedI am a newbie exploring Plasmo for supabase authentication. The public url and anon keys are added i Firefox dev server manifest warningsThe ```json { "content_security_policy": { "extension_pages": "script-src 'self' http://localh import url no longer workingHey folks 👋🏻 just upgraded our extension at Attio to the latest version of Plasmo (0.85). It seems Can't figure out how to navigate from my extention to my auth pageI'm trying to test a popup extension I made that has a button that is supposed to navigate to `http:Parallel dev serversI need to both run `plasmo dev --verbose` and `plasmo dev --verbose --target=firefox-mv3`, but when Absolutely! In Plasmo, to send a messageAbsolutely! In Plasmo, to send a message from a side panel to a content script in the main world, yo How to sendToBackground from main worldi've try all of messaging method but background still not receive anything