Open Sidebar/Sidepanel in Firefox from Toolbar Icon

[CaioCerano]

I need help figuring out how to open the sidebar/sidepanel in Firefox when interacting with the extension icon in the toolbar.

Currently, I can open the sidebar when I first run the command, but I want it to open every time I click the extension icon in the Firefox toolbar. I managed to achieve this in Chrome, but for Firefox, I believe there’s something else I need to do beyond configuring the background.ts file.

Can anyone guide me on how to implement this functionality in Firefox?

Thanks in advance!

[aiktb]

browser.browserAction.onClicked.addListener(() => {
    browser.sidebarAction.toggle();
});

note: browserAction is deprecated in MV3

[CaioCerano]

Thank you! I actually tried something similar, but I think I messed up somewhere. Here's my implementation for Firefox and Chrome in case anyone's curious.

import { defineBackground } from 'wxt/sandbox'

export default defineBackground(() => {
	const isFirefox = () => {
		return typeof browser !== 'undefined' && navigator.userAgent.includes('Firefox')
	}

	if (isFirefox()) {
		// Firefox-specific implementation
		browser.browserAction.onClicked.addListener(() => {
			browser.sidebarAction.toggle()
		})
	} else {
		// Chrome-specific implementation
		// @ts-ignore
		browser.sidePanel
			.setPanelBehavior({ openPanelOnActionClick: true })
			.catch((error: Error) => {
				console.error('Error setting side panel behavior:', error)
			})
	}
})

[aiktb]

Thank you! I actually tried something similar, but I think I messed up somewhere. Here's my implementation for Firefox and Chrome in case anyone's curious.

import { defineBackground } from 'wxt/sandbox'

export default defineBackground(() => {
	const isFirefox = () => {
		return typeof browser !== 'undefined' && navigator.userAgent.includes('Firefox')
	}

	if (isFirefox()) {
		// Firefox-specific implementation
		browser.browserAction.onClicked.addListener(() => {
			browser.sidebarAction.toggle()
		})
	} else {
		// Chrome-specific implementation
		// @ts-ignore
		browser.sidePanel
			.setPanelBehavior({ openPanelOnActionClick: true })
			.catch((error: Error) => {
				console.error('Error setting side panel behavior:', error)
			})
	}
})

Recommend replacing isFirefox() with import.meta.env.FIREFOX

[CaioCerano]

Thank you again, @aiktb! It was really helpful.