Implement Chrome Extension Side Panel (Chrome) Turnkey

Popup windows of Chrome extensions close when clicking outside them — this is critical for tools requiring constant access. Side Panel API solves this problem by providing a persistent side panel. Users of extensions for notes, monitoring, or devtools often lose data when accidentally closing Popup. Side Panel remains open, preserving state when switching tabs. We implement such panels turnkey in 3–9 days. We will evaluate your project — contact us. Our experience with Chrome API is over 5 years, we guarantee post-launch support. Get a consultation on integration.

According to Side Panel API, the panel can be configured individually for each tab. In one project, we replaced Popup with Side Panel for a CRM extension. Users stopped losing active orders when switching tabs, and time spent working with the extension increased by 40%.

How Side Panel solves the context loss problem?

Popup lives only while the tab is active and the user hasn't clicked outside the window. Side Panel remains open when switching tabs and even when working in another window. This is critical for DevTools-like extensions, monitoring, notes, and chats. Switching between tabs does not require reloading the panel — data is preserved in memory.

Differences between Side Panel and Popup

How to configure Side Panel for different tabs?

The panel can be different for each tab or common for all. This is set via chrome.sidePanel.setOptions with the tabId parameter. For example, for GitHub we display a panel with tasks, for Figma — with comments, for others — disable it. Resource savings: the panel does not load on unnecessary sites.

Manifest V3 setup

{ "manifest_version": 3, "name": "My Side Panel Extension", "version": "1.0.0", "permissions": ["storage", "tabs", "activeTab", "scripting", "sidePanel"], "background": { "service_worker": "background.js" }, "action": { "default_icon": "icons/icon48.png", "default_title": "Open panel" }, "side_panel": { "default_path": "panel/panel.html" } } 

Opening panel and per-tab logic (complete background.js)

// background.js — combined Service Worker // Open on icon click chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).catch(console.error); // Per-tab panels (different for GitHub and Figma) chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => { if (info.status !== 'complete') return; if (tab.url?.includes('github.com')) { await chrome.sidePanel.setOptions({ tabId, path: 'panel/github-panel.html', enabled: true }); } else if (tab.url?.includes('figma.com')) { await chrome.sidePanel.setOptions({ tabId, path: 'panel/design-panel.html', enabled: true }); } else { await chrome.sidePanel.setOptions({ tabId, enabled: false }); } }); // Persistent connection to Side Panel via Port const sidePanelPorts = new Map(); chrome.runtime.onConnect.addListener((port) => { if (port.name !== 'side-panel') return; chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => { sidePanelPorts.set(tab.id, port); port.onDisconnect.addListener(() => sidePanelPorts.delete(tab.id)); }); }); // Forward messages from content script to panel chrome.runtime.onMessage.addListener((msg, sender) => { if (msg.type === 'SELECTION_CHANGED') { const port = sidePanelPorts.get(sender.tab?.id); port?.postMessage({ type: 'SELECTION_CHANGED', text: msg.text }); } }); // Track tab switches chrome.tabs.onActivated.addListener(async ({ tabId }) => { const tab = await chrome.tabs.get(tabId); const port = sidePanelPorts.get(tabId); port?.postMessage({ type: 'PAGE_CHANGED', url: tab.url, title: tab.title }); }); chrome.tabs.onUpdated.addListener((tabId, info, tab) => { if (info.status !== 'complete') return; const port = sidePanelPorts.get(tabId); port?.postMessage({ type: 'PAGE_CHANGED', url: tab.url, title: tab.title }); }); 

React application in Side Panel

The structure of panel/panel.html is similar to Popup, but has more space. We use React to build the interface — this allows reusing components and simplifies maintenance.

// panel/App.tsx import { useEffect, useState, useRef } from 'react'; import browser from 'webextension-polyfill'; export function SidePanel() { const [notes, setNotes] = useState<string[]>([]); const [currentUrl, setCurrentUrl] = useState(''); const portRef = useRef<browser.Runtime.Port | null>(null); useEffect(() => { portRef.current = browser.runtime.connect({ name: 'side-panel' }); portRef.current.onMessage.addListener((msg) => { if (msg.type === 'PAGE_CHANGED') { setCurrentUrl(msg.url); loadNotesForUrl(msg.url); } if (msg.type === 'SELECTION_CHANGED') { handleNewSelection(msg.text); } }); browser.tabs.query({ active: true, currentWindow: true }).then(([tab]) => { if (tab.url) { setCurrentUrl(tab.url); loadNotesForUrl(tab.url); } }); return () => portRef.current?.disconnect(); }, []); async function loadNotesForUrl(url: string) { const domain = new URL(url).hostname; const { notes } = await browser.storage.local.get(`notes_${domain}`); setNotes(notes ?? []); } async function addNote(text: string) { const domain = new URL(currentUrl).hostname; const updated = [...notes, text]; setNotes(updated); await browser.storage.local.set({ [`notes_${domain}`]: updated }); } return ( <div className="side-panel"> <header className="side-panel__header"> <h2>Notes</h2> <span className="side-panel__url">{new URL(currentUrl).hostname}</span> </header> <div className="side-panel__notes"> {notes.map((note, i) => ( <div key={i} className="note">{note}</div> ))} </div> <NoteInput onAdd={addNote} /> </div> ); } 

Communication with Content Script via Port

Side Panel lives long — it's convenient to use persistent connections instead of one-off sendMessage. Content script tracks text selection and sends it to background, which forwards to the panel.

// content.js — tracks text selection document.addEventListener('mouseup', () => { const selection = window.getSelection()?.toString().trim(); if (selection && selection.length > 3) { chrome.runtime.sendMessage({ type: 'SELECTION_CHANGED', text: selection }); } }); 

Why choose React for Side Panel?

React allows breaking the interface into components, easily managing state, and reusing logic. Combined with Port API, we get a reactive panel that instantly responds to user actions on the page. For example, when text is selected on the page, the panel immediately displays it — delay under 50 ms. Side Panel consumes less memory than background pages and does not affect LCP. We optimize loading: bundle splitting, tree-shake, minification of React components. Panel open time is under 200 ms.

Comparison: React vs vanilla JS for Side Panel

How to add Side Panel to your extension

1. Add sidePanel permission in manifest.json.
2. Create an HTML file for the panel (e.g., panel.html).
3. In the service worker, call chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).
4. Configure per-tab logic via chrome.sidePanel.setOptions.
5. Set up React and configure Port API for communication with content.

What is included in the work?

• Architecture and configuration of Manifest V3
• Implementation of Side Panel with React (or other framework)
• Per-tab logic setup (different panels for different sites)
• Integration with Content Script via Port API
• Data storage in chrome.storage
• Testing and optimization (Core Web Vitals, LCP, CLS)

Timeline

Basic Side Panel with React, persistent connection to background, tab synchronization, and data storage — 3–5 business days. Panel with real-time page content interaction, history, and search — 6–9 days. The cost is calculated individually.

We will evaluate your project — contact us. We guarantee post-launch support and bug fixes within 30 days. Get a consultation on integrating Side Panel into your extension.