feat(chrome-extension): open the recorder in Chrome's side panel on non-injectable pages by ManthanNimodiya · Pull Request #2027 · CapSoftware/Cap

ManthanNimodiya · 2026-07-23T17:14:35Z

Follow-up to the "recorder opens in a separate window" confusion from the support thread.

On pages the extension can't inject into (new tab, chrome://, Web Store), the Cap icon now docks the recorder in Chrome's side panel instead of a floating popup window. It survives tab switches, the icon toggles it, and normal websites keep the in-page panel exactly as shipped. The popup window stays as a logged last resort.

Implementation notes: sidePanel.open() must ride the click gesture (any timer voids it), so the decision happens synchronously in the action handler and the fallback delivery path avoids timed retries. The standalone panel reports open/closed to the service worker so teardown reaches it and only one recorder shows at a time.

Also includes two bug fixes found while testing, both reproducible on main (can split into a separate PR):

After every extension update/reload, orphaned content scripts blocked re-injection via a stale global flag, leaving open tabs unable to show Cap UI until refreshed. Injection now takes over the tab, mounts a fresh overlay module, and sweeps stale UI.
A recording that dies without a terminal status left the offscreen doc pinned in a phantom "recording" phase: stop was a no-op and every tab's bar froze until browser restart. Stop now clears zombie phases and the idle-close interval doubles as a watchdog.

Tested manually on Chrome/macOS (side panel open/toggle/persistence, normal sites unchanged incl. the cap.so dashboard flow, recording from the side panel, orphan recovery after reload). Typecheck, unit tests, and builds pass. sidePanel needs Chrome 116 = existing minimum_chrome_version. Firefox has no sidePanel API; the Firefox port handles this separately.

Greptile Summary

This PR moves the standalone Chrome-extension recorder into the side panel and adds recovery for stale content-script and offscreen recording state.

Adds the side-panel permission and standalone panel lifecycle messaging.
Preserves the in-page recorder on injectable tabs and retains the popup-window fallback.
Replaces the stale bootstrap guard with generation-based takeover and overlay cleanup.
Clears zombie capture phases during stop handling and idle watchdog checks.

Confidence Score: 4/5

This PR should not merge until side-panel toggling remains correct across routine MV3 service-worker suspension.

The visible side panel can outlive the service worker that owns its unpersisted open flag, causing the next icon click to reopen rather than close the recorder.

apps/chrome-extension/src/background/service-worker.ts and apps/chrome-extension/src/popup/main.tsx

Important Files Changed

Filename	Overview
apps/chrome-extension/public/manifest.json	Adds the sidePanel permission and maps the standalone recorder page as the default side-panel document.
apps/chrome-extension/src/background/service-worker.ts	Adds side-panel routing and lifecycle tracking, but the in-memory open flag breaks action-button toggling after service-worker restart.
apps/chrome-extension/src/content/bootstrap.ts	Replaces the stale global boolean with generation ownership, fresh module imports, listener detachment, and stale overlay cleanup.
apps/chrome-extension/src/offscreen/recorder.ts	Detects capture phases with no live owner and resets them during stop handling and periodic idle checks.
apps/chrome-extension/src/popup/main.tsx	Reports standalone lifecycle events and handles service-worker close requests, but opened state is reported only when the document loads.
apps/chrome-extension/src/shared/types.ts	Extends service-worker request types with standalone panel opened and closed lifecycle messages.

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
apps/chrome-extension/src/background/service-worker.ts:1903-1906
**Side-panel state is lost**

When Chrome restarts the MV3 service worker while the side panel remains open, `standalonePanelOpen` resets to `false` and the surviving panel does not report itself again, so the next icon click calls `sidePanel.open()` instead of closing the visible recorder.

_{Reviews (1): Last reviewed commit: "fix(chrome-extension): sweep stale overl..." | Re-trigger Greptile}

Greptile also left 1 inline comment on this PR.

… is not injectable

…eardown, and single-recorder rule

…ailures fall back to the side panel

…abs instead of deferring to a dead flag

…the recorder doc can idle-close

…kes over a tab

greptile-apps · 2026-07-23T17:17:21Z

+		if (standalonePanelOpen) {
+			closeStandalonePanel();
+			return;
+		}


Side-panel state is lost

When Chrome restarts the MV3 service worker while the side panel remains open, standalonePanelOpen resets to false and the surviving panel does not report itself again, so the next icon click calls sidePanel.open() instead of closing the visible recorder.

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/chrome-extension/src/background/service-worker.ts Line: 1903-1906 Comment: **Side-panel state is lost** When Chrome restarts the MV3 service worker while the side panel remains open, `standalonePanelOpen` resets to `false` and the surviving panel does not report itself again, so the next icon click calls `sidePanel.open()` instead of closing the visible recorder. How can I resolve this? If you propose a fix, please make it concise.

tembo · 2026-07-23T17:18:33Z

+const closeStandalonePanel = () => {
+	if (!standalonePanelOpen) return;
+	standalonePanelOpen = false;
+	chrome.runtime.sendMessage(
+		{ target: "standalone-panel", type: "close" },
+		() => {
+			void chrome.runtime.lastError;
+		},
+	);


If the service worker gets restarted while the side panel is open, standalonePanelOpen can desync and this early return prevents teardown/toggle from reaching the panel. Might be safer to always send the close message and just keep the flag best-effort.

Suggested change

const closeStandalonePanel = () => {

if (!standalonePanelOpen) return;

standalonePanelOpen = false;

chrome.runtime.sendMessage(

{ target: "standalone-panel", type: "close" },

() => {

void chrome.runtime.lastError;

},

);

const closeStandalonePanel = () => {

standalonePanelOpen = false;

chrome.runtime.sendMessage(

{ target: "standalone-panel", type: "close" },

() => {

void chrome.runtime.lastError;

},

);

};

tembo · 2026-07-23T17:18:37Z

+		if (windowId !== undefined && chrome.sidePanel) {
+			await chrome.sidePanel.open({ windowId });
+			return;
+		}


Minor robustness: if the side panel opens successfully but the standalone page never manages to ping standalone-panel-opened (race/suspension), standalonePanelOpen stays false and toggle/teardown can miss it. Consider setting the flag on successful open() as well.

Suggested change

if (windowId !== undefined && chrome.sidePanel) {

await chrome.sidePanel.open({ windowId });

return;

}

if (windowId !== undefined && chrome.sidePanel) {

await chrome.sidePanel.open({ windowId });

standalonePanelOpen = true;

return;

}

tembo · 2026-07-23T17:18:58Z

+		chrome.sidePanel.open({ windowId: tab.windowId }).then(
+			() => undefined,
+			(error) => {
+				console.warn("sidePanel.open failed, using popup window", error);
+				return openRecorderPanel(tab);
+			},
+		);


Same idea in the click-path: setting the flag on success makes the toggle behavior less dependent on the standalone page sending its lifecycle message.

Suggested change

chrome.sidePanel.open({ windowId: tab.windowId }).then(

() => undefined,

(error) => {

console.warn("sidePanel.open failed, using popup window", error);

return openRecorderPanel(tab);

},

);

chrome.sidePanel.open({ windowId: tab.windowId }).then(

() => {

standalonePanelOpen = true;

},

(error) => {

console.warn("sidePanel.open failed, using popup window", error);

return openRecorderPanel(tab);

},

);

…panel tracking

tembo · 2026-07-23T17:30:37Z

+	if (standalonePanelOpen) {
+		closeStandalonePanel();
+		return;
+	}


One edge case: on a cold-started MV3 worker, refreshStandalonePanelFlag() runs via callback, so this click can hit the standalonePanelOpen check before the flag is rebuilt. That makes the first click after SW restart re-open/focus the already-open panel instead of toggling it closed.

Suggested change

}

if (!standalonePanelOpen) {

try {

standalonePanelOpen = await new Promise<boolean>((resolve) => {

chrome.runtime.getContexts(

{

contextTypes: [

"SIDE_PANEL",

"TAB",

] as chrome.runtime.ContextType[],

documentUrls: [chrome.runtime.getURL(POPUP_URL)],

},

(contexts) => {

if (chrome.runtime.lastError) return resolve(false);

resolve((contexts ?? []).length > 0);

},

);

});

} catch {

// best-effort

}

}

if (standalonePanelOpen) {

closeStandalonePanel();

return;

}

ManthanNimodiya added 6 commits July 22, 2026 12:36

feat(chrome-extension): open recorder in the side panel when the page…

c54ff9c

… is not injectable

fix(chrome-extension): track standalone panel lifecycle for toggle, t…

bbe2040

…eardown, and single-recorder rule

fix(chrome-extension): keep click gesture alive so overlay-delivery f…

5124ff3

…ailures fall back to the side panel

fix(chrome-extension): let re-injected bootstrap take over orphaned t…

b9b1162

…abs instead of deferring to a dead flag

fix(chrome-extension): clear zombie capture status so stop works and …

f663203

…the recorder doc can idle-close

fix(chrome-extension): sweep stale overlay UI when a new bootstrap ta…

849ddf7

…kes over a tab

greptile-apps Bot reviewed Jul 23, 2026

View reviewed changes

tembo Bot reviewed Jul 23, 2026

View reviewed changes

fix(chrome-extension): survive service worker restarts in standalone …

49b60e3

…panel tracking

tembo Bot reviewed Jul 23, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(chrome-extension): open the recorder in Chrome's side panel on non-injectable pages#2027

feat(chrome-extension): open the recorder in Chrome's side panel on non-injectable pages#2027
ManthanNimodiya wants to merge 7 commits into
CapSoftware:mainfrom
ManthanNimodiya:feat/extension-side-panel-fallback

ManthanNimodiya commented Jul 23, 2026 •

edited by greptile-apps Bot

Loading

Uh oh!

greptile-apps Bot Jul 23, 2026

Uh oh!

tembo Bot Jul 23, 2026

Uh oh!

tembo Bot Jul 23, 2026

Uh oh!

tembo Bot Jul 23, 2026

Uh oh!

tembo Bot Jul 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

-	}
+		if (!standalonePanelOpen) {
+			try {
+				standalonePanelOpen = await new Promise<boolean>((resolve) => {
+					chrome.runtime.getContexts(
+						{
+							contextTypes: [
+								"SIDE_PANEL",
+								"TAB",
+							] as chrome.runtime.ContextType[],
+							documentUrls: [chrome.runtime.getURL(POPUP_URL)],
+						},
+						(contexts) => {
+							if (chrome.runtime.lastError) return resolve(false);
+							resolve((contexts ?? []).length > 0);
+						},
+					);
+				});
+			} catch {
+				// best-effort
+			}
+		}
+		if (standalonePanelOpen) {
+			closeStandalonePanel();
+			return;
+		}

Uh oh!

Conversation

ManthanNimodiya commented Jul 23, 2026 • edited by greptile-apps Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 4/5

Important Files Changed

Uh oh!

greptile-apps Bot Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

tembo Bot Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

tembo Bot Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

tembo Bot Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

tembo Bot Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

ManthanNimodiya commented Jul 23, 2026 •

edited by greptile-apps Bot

Loading