🧩 Plasmo Developers•10mo ago

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?

14 Replies

The DeviantOP•10mo ago

Anyone? I'm so stuck @lab

lab•10mo ago

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

The DeviantOP•10mo ago

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

lab•10mo 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 DeviantOP•10mo 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•10mo ago

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

lab•10mo 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 DeviantOP•10mo 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•10mo ago

@The Deviant has reached level 2. GG!

The DeviantOP•10mo 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•10mo ago

would recommend pinging him one more time 💀

matrix•10mo ago

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

Chrome for Developers

chrome.sidePanel | API | Chrome for Developers

matrix•10mo ago

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

Serhii•10mo ago

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

Gaming

Programming

Sidepanel as main