feat(extension): Firefox runtime — recorder window, storage fallbacks, and overlay injection

apps/chrome-extension/e2e/overlay-ui.spec.ts

@@ -45,7 +45,7 @@ type ChromeGlobal = typeof globalThis & {
 };
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const extensionPath = path.resolve(__dirname, "../dist");
+const extensionPath = path.resolve(__dirname, "../dist/chrome");
 const SETTINGS_KEY = "cap-extension-settings";
 const AUTH_KEY = "cap-extension-auth";
 const BOOTSTRAP_CACHE_KEY = "cap-extension-bootstrap-cache";

apps/chrome-extension/e2e/recording-upload.spec.ts

@@ -55,7 +55,7 @@ type ChromeGlobal = typeof globalThis & {
 };
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const extensionPath = path.resolve(__dirname, "../dist");
+const extensionPath = path.resolve(__dirname, "../dist/chrome");
 const SETTINGS_KEY = "cap-extension-settings";
 const AUTH_KEY = "cap-extension-auth";
 const BOOTSTRAP_CACHE_KEY = "cap-extension-bootstrap-cache";

apps/chrome-extension/e2e/webcam-start.spec.ts

@@ -34,7 +34,7 @@ type ChromeGlobal = typeof globalThis & {
 };
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const extensionPath = path.resolve(__dirname, "../dist");
+const extensionPath = path.resolve(__dirname, "../dist/chrome");
 const SETTINGS_KEY = "cap-extension-settings";
 const AUTH_KEY = "cap-extension-auth";
 const BOOTSTRAP_CACHE_KEY = "cap-extension-bootstrap-cache";

apps/chrome-extension/public/manifest.json → apps/chrome-extension/manifests/manifest.chrome.json

@@ -22,8 +22,7 @@
 		}
 	},
 	"background": {
-		"service_worker": "assets/service-worker.js",
-		"type": "module"
+		"service_worker": "assets/service-worker.js"
 	},
 	"options_page": "options.html",
 	"permissions": [

apps/chrome-extension/manifests/manifest.firefox.json

@@ -0,0 +1,58 @@
+{
+	"manifest_version": 3,
+	"name": "Cap - Screen Recorder & Screen Capture",
+	"short_name": "Cap",
+	"description": "Free, open source screen recorder. Capture your screen, camera & mic in Firefox and share a video link the moment you stop.",
+	"version": "1.0.2",
+	"homepage_url": "https://cap.so",
+	"browser_specific_settings": {
+		"gecko": {
+			"id": "extension@cap.so",
+			"strict_min_version": "128.0",
+			"data_collection_permissions": {
+				"required": ["authenticationInfo", "websiteContent"]
+			}
+		}
+	},
+	"icons": {
+		"16": "icons/icon-16.png",
+		"32": "icons/icon-32.png",
+		"48": "icons/icon-48.png",
+		"128": "icons/icon-128.png"
+	},
+	"action": {
+		"default_title": "Record your screen with Cap",
+		"default_icon": {
+			"16": "icons/icon-16.png",
+			"32": "icons/icon-32.png",
+			"48": "icons/icon-48.png",
+			"128": "icons/icon-128.png"
+		}
+	},
+	"background": {
+		"scripts": ["assets/service-worker.js"]
+	},
+	"options_ui": {
+		"page": "options.html",
+		"open_in_tab": true
+	},
+	"permissions": ["activeTab", "identity", "scripting", "storage"],
+	"host_permissions": ["http://*/*", "https://*/*", "file:///*"],
+	"content_scripts": [
+		{
+			"matches": ["http://*/*", "https://*/*", "file:///*"],
+			"js": ["assets/content-bootstrap.js"],
+			"run_at": "document_idle"
+		}
+	],
+	"web_accessible_resources": [
+		{
+			"resources": ["icons/*", "content/overlay.js", "welcome.html"],
+			"matches": ["http://*/*", "https://*/*", "file:///*"]
+		},
+		{
+			"resources": ["camera-preview.html", "popup.html"],
+			"matches": ["http://*/*", "https://*/*", "file:///*"]
+		}
+	]
+}

apps/chrome-extension/package.json

@@ -4,13 +4,18 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
-		"build": "rm -rf dist && vite build && vite build --config vite.content.config.ts && vite build --config vite.content-overlay.config.ts",
-		"dev": "rm -rf dist && (trap 'kill 0' INT TERM; vite build --watch --config vite.content.config.ts --mode development & vite build --watch --config vite.content-overlay.config.ts --mode development & vite build --watch --mode development & wait)",
+		"build": "pnpm build:chrome && pnpm build:firefox",
+		"build:chrome": "rm -rf dist/chrome && TARGET=chrome vite build --config vite.background.config.ts && TARGET=chrome vite build --config vite.content.config.ts && TARGET=chrome vite build --config vite.content-overlay.config.ts && TARGET=chrome vite build",
+		"build:firefox": "rm -rf dist/firefox && TARGET=firefox vite build --config vite.background.config.ts && TARGET=firefox vite build --config vite.content.config.ts && TARGET=firefox vite build --config vite.content-overlay.config.ts && TARGET=firefox vite build",
+		"dev": "rm -rf dist/chrome && (trap 'kill 0' INT TERM; TARGET=chrome vite build --watch --config vite.background.config.ts --mode development & TARGET=chrome vite build --watch --config vite.content.config.ts --mode development & TARGET=chrome vite build --watch --config vite.content-overlay.config.ts --mode development & TARGET=chrome vite build --watch --mode development & wait)",
+		"dev:firefox": "rm -rf dist/firefox && (trap 'kill 0' INT TERM; TARGET=firefox vite build --watch --config vite.background.config.ts --mode development & TARGET=firefox vite build --watch --config vite.content.config.ts --mode development & TARGET=firefox vite build --watch --config vite.content-overlay.config.ts --mode development & TARGET=firefox vite build --watch --mode development & wait)",
+		"run:firefox": "web-ext run --source-dir dist/firefox",
+		"lint:firefox": "web-ext lint --source-dir dist/firefox",
 		"typecheck": "tsc --noEmit",
 		"test": "vitest run src",
 		"test:e2e:install": "playwright install chromium",
-		"test:e2e": "pnpm build && playwright test",
-		"test:e2e:headed": "pnpm build && playwright test --headed"
+		"test:e2e": "pnpm build:chrome && playwright test",
+		"test:e2e:headed": "pnpm build:chrome && playwright test --headed"
 	},
 	"dependencies": {
 		"@cap/recorder-core": "workspace:*",
@@ -36,6 +41,7 @@
 		"tailwindcss": "^3.4.0",
 		"typescript": "^5.8.3",
 		"vite": "6.3.5",
-		"vitest": "^3.2.0"
+		"vitest": "^3.2.0",
+		"web-ext": "^8.9.0"
 	}
 }

apps/chrome-extension/recorder.html

@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Cap Recorder</title>
+		<style>
+			:root {
+				color-scheme: dark;
+			}
+			body {
+				margin: 0;
+				min-height: 100vh;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+				background: #101012;
+				color: #f4f4f5;
+			}
+			.card {
+				box-sizing: border-box;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				gap: 14px;
+				max-width: 340px;
+				padding: 32px 28px;
+				text-align: center;
+			}
+			.card img {
+				width: 48px;
+				height: 48px;
+			}
+			.card h1 {
+				margin: 0;
+				font-size: 18px;
+				font-weight: 600;
+			}
+			.card p {
+				margin: 0;
+				font-size: 13px;
+				line-height: 1.55;
+				color: #a1a1aa;
+			}
+			#arm-capture-button {
+				margin-top: 6px;
+				height: 44px;
+				padding: 0 28px;
+				border: none;
+				border-radius: 12px;
+				background: #4785ff;
+				color: #fff;
+				font-size: 15px;
+				font-weight: 500;
+				cursor: pointer;
+			}
+			#arm-capture-button:hover {
+				background: #3b74e6;
+			}
+			.hint {
+				font-size: 12px !important;
+				color: #71717a !important;
+			}
+		</style>
+	</head>
+	<body>
+		<!-- Default state: this window quietly hosts capture, upload and device
+		     access. Visible only if the user surfaces it. -->
+		<main class="card" id="idle-state">
+			<img src="/icons/icon-48.png" alt="Cap" />
+			<h1>Cap recording engine</h1>
+			<p>
+				This window powers your recording and uploads. It stays minimized
+				while you record and closes by itself when it is no longer needed.
+			</p>
+		</main>
+		<!-- Shown only on Firefox when a recording starts: the click provides
+		     the user activation getDisplayMedia requires in this window. -->
+		<main class="card" id="arm-capture" hidden>
+			<img src="/icons/icon-48.png" alt="Cap" />
+			<h1>Ready to record?</h1>
+			<p>
+				Firefox asks for one click here, then you'll choose what to share.
+			</p>
+			<button id="arm-capture-button" type="button">
+				Choose what to record
+			</button>
+			<p class="hint">
+				Recording starts after the countdown. This window gets out of the
+				way by itself.
+			</p>
+		</main>
+		<script type="module" src="/src/recorder/recorder.ts"></script>
+	</body>
+</html>