Sidepanel example

[Flávio Zanoni]

Hello, I was using the template and needed to use it with the browser sidepanel, but there was no doc and no build step for the sidepanel, so i`ve made the necessary changes in this fork

I did not test it in Firefox due to an issue where it says that I can`t upload due to the ext being MV3.
Are the firefox builds currently working ?

I can open a PR with the changes if you see that it has any value for the project

[Bráulio Oliveira]

thanks for sharing @FlavioZanoni, I'll give it a try with @pvfm

[I Plan Websites]

Looks good!
I assume Sidepanel will slowly replace extension popups.

[Anthony Fu]

Love to see a PR! Thanks

[Flávio Zanoni]

Open ! sorry for the delay, was away for a couple of days.

[Bráulio Oliveira]

One confusing thing about the sidepanel is how it is triggered. We've modified @FlavioZanoni code to remove the manifest's default_panel and default_popup actions as they trigger always either the sidepanel or the popup. Instead we used the following script in the background/main.js:

chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
    const currentTab = tabs[0]
    if (CONDITION) {
      chrome.action.setPopup({ tabId: currentTab.id, popup: "" })
      chrome.sidePanel.setOptions({ tabId: currentTab.id, path: "./dist/sidepanel/index.html" })
      chrome.sidePanel.open({ tabId: currentTab.id })
    } else {
      chrome.action.setPopup({ tabId: currentTab.id, popup: "./dist/popup/index.html" })
      chrome.action.openPopup()
    }
  })
})