Side Panel Mode: Keep the Technology Stack in View as You Browse

## Why it matters

A toolbar popup is fine for a quick check: click the icon, read the stack, close it. But if you're auditing multiple pages, comparing sites, or tracking tech changes over time, opening and closing a popup for each tab is tedious. Bouncing between the popup and the page also means you lose context.

Side panel mode keeps the analysis permanently visible while you browse. Click the side-panel button, and the detection stays open beside your page. Switch to another tab and it re-scans that tab automatically. You're comparing stacks side-by-side with the pages, and you never lose the view. It's the tool equivalent of printing a report and keeping it on your desk while you work.

For competitive research, site auditing, or just staying curious about the web, a docked panel changes how useful the tool is.

## How it works

Side panel mode uses Chrome's native sidePanel API, which docks a panel beside the page without covering it. Scalpel Stack's popup and side panel share the same JavaScript page and codebase, so every feature works identically in both. The only difference is the layout: the popup is sized for a toolbar icon, fixed at about 360 pixels wide. The side panel expands to fill the available width, usually 300-400 pixels depending on your screen size.

The side panel persists across tab switches. When you click a tab, the panel detects the tab change, runs a fresh scan on the new page, and updates its results in place. No manual refresh needed. The history (if you have detection history enabled) accumulates per tab, so you can glance at what changed.

To open the side panel, click the button in the toolbar (when a side-panel button appears, the popup button is hidden). The panel opens on the right side of the browser. Close it by clicking the button again, or clicking the X in the panel itself.

The side-panel API is built into Chrome 116 and newer. Older Chrome versions don't have the feature, so the side-panel button doesn't appear on those browsers.

## What does not matter

Side panel mode doesn't change detection accuracy or confidence. The same fingerprints, vectors, and confidence scores are used whether you're in popup mode or panel mode. It's a UI choice, not a quality trade-off.

Also, the side panel doesn't interact with other panels or tabs. It's your docked analysis for the current tab. Switching to a different browser window doesn't carry the panel along; each window has its own panel state.

And a side panel doesn't reduce privacy. Scalpel Stack still runs entirely locally, in your browser tab, with no server communication except the optional "Check HTTP headers" button you click. The panel is just another place to see the same local results.

## Code example

When the side panel is open and you switch tabs, here's what happens behind the scenes:

// Scalpel Stack listens for tab changes
chrome.tabs.onActivated.addListener((activeInfo) => {
  // Re-scan the newly active tab
  scanCurrentTab().then((results) => {
    // Update the panel's display in real time
    updatePanelDisplay(results);
  });
});

// The panel uses the same scan engine as the popup
const results = await runDetectionEngine(tabData);

// Results flow to the same UI component tree
// (popup and panel share the same Vue/React instance)
Copy

No special detection logic for side panel: it's the same extension code, same fingerprints, same confidence scoring, just a different viewport.

## How Scalpel shows it

Open Scalpel Stack and look at the toolbar icon. If your Chrome version supports side panels (116+), a button or toggle appears to open the analysis in the side panel. Clicking it docks the panel beside your page. The button then hides, and a close button appears in the panel itself.

Once docked, tab switches trigger automatic rescans. If you have detection history enabled, a "History" control appears in the panel header once a page has been scanned twice in the session, showing the earlier scan's results alongside the current one.

The side panel shares the same help links, settings access, and feature set as the popup. Every ? tooltip links to the glossary, the "Check HTTP headers" button works the same, and the tech report is copy-pasted to your clipboard just like in popup mode.