search

PlasmoHQ / docs

📘 Documentation site
https://docs.plasmo.com
12 stars 50 forks source link

[Doc Update] Open the Side Panel when extension name or pinned icon is clicked #126

Open ADTC opened 2 months ago

ADTC commented 2 months ago

I have a Plasmo project which only has sidepanel.tsx and doesn't have popup.tsx. If I click on the extension icon (either pinned or from Extensions menu), nothing happens. I have to right-click the icon or open the overflow menu and choose "Open Side Panel" option to see the side panel.

Is there any way to open the side panel when the pinned extension icon is clicked or the extension name is clicked in the Extension menu instead of doing nothing?

ADTC commented 2 months ago

I have the answer to this, so the issue is no longer "How do I do this?" but now it is "I know how. Please tell everyone else by adding it to the docs."

You have to have a background service worker, which is either background.ts or background/index.ts (or the equivalent .js file), which contains the following code:

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

This will ensure the pinned icon or extension name will open the side panel when clicked. If it's clicked again, the side panel is closed, and you can click it again to open the side panel again. Behavior is as expected.