feat(chrome-extension): add i18n foundation

[Sunnnnch]

Summary

• add Chrome extension locale catalogs with English as the default and Simplified Chinese support
• localize manifest metadata through Chrome i18n and provide a typed runtime helper with an English fallback
• keep thrown and logged runtime errors stable while localizing the offscreen document justification
• replace copy-dependent E2E selectors with stable test IDs

Review context

This is the first focused split from #2008, which changed 426 files and exceeded the automated review limit. It addresses the four inline review comments without coupling tests or runtime diagnostics to translated copy. Follow-up PRs can migrate the remaining Chrome extension UI in smaller, reviewable groups.

Validation

• Biome check on all touched files
• Chrome extension TypeScript check
• 14 unit tests passed
• main, content bootstrap, and content overlay production builds passed
• close-panel Playwright scenario passed with the new stable selector
• two existing screen-capture Playwright scenarios time out while waiting on the capture API in headless Chromium before reaching the changed assertions

Greptile Summary

This PR establishes the i18n foundation for the Chrome extension: it adds English and Simplified Chinese locale catalogs, updates manifest.json to use __MSG_*__ placeholders, and introduces a typed msg() helper that wraps chrome.i18n.getMessage with an English JSON fallback. It also decouples two E2E selectors from copy by adding stable data-testid attributes to the close button and recording-error element.

• msg() in i18n.ts correctly guards against an undefined chrome global and falls back to the English catalog, with unit tests covering locale key alignment, locale resolution, and both fallback paths.
• The manifest i18n wiring and locale catalogs follow Chrome's documented conventions; the default_locale: \"en\" setting is correct.
• E2E selector changes are a clean improvement: data-testid attributes survive copy changes, and the existing aria-label on the close button is preserved for accessibility.

Confidence Score: 4/5

Safe to merge; changes are additive and well-tested with no impact on existing runtime paths beyond the offscreen justification string

The msg() helper's English fallback branch discards caller-supplied substitution arguments when Chrome returns an empty string. No current messages use placeholders, so nothing breaks today, but the helper would silently mis-render any future message that does.

apps/chrome-extension/src/shared/i18n.ts — the English fallback branch ignores the substitutions argument

Important Files Changed

Filename	Overview
apps/chrome-extension/src/shared/i18n.ts	New i18n helper that wraps chrome.i18n.getMessage with an English JSON fallback; logic is sound but the English fallback silently drops substitution arguments when the Chrome API returns an empty string
apps/chrome-extension/src/shared/i18n.test.ts	Good unit tests covering locale key alignment, locale resolution, and both fallback paths; no issues found
apps/chrome-extension/public/_locales/en/messages.json	New English locale catalog with all 5 keys correctly defined; no issues
apps/chrome-extension/public/_locales/zh_CN/messages.json	New Simplified Chinese locale catalog with keys aligned to English; translations look correct
apps/chrome-extension/public/manifest.json	Updated to use MSG*_ i18n placeholders and added default_locale; no issues
apps/chrome-extension/src/background/service-worker.ts	Changed offscreen document justification to use msg() helper; minimal and correct change
apps/chrome-extension/src/popup/components/recorder-header.tsx	Adds data-testid to close button while retaining the aria-label for accessibility; clean change
apps/chrome-extension/src/popup/main.tsx	Adds data-testid to the recording-error div; straightforward and correct
apps/chrome-extension/e2e/overlay-ui.spec.ts	E2E selectors migrated from text/aria-label to stable data-testid attributes; improvement in test robustness

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/shared/i18n.ts:11
When `chrome` is available but `getMessage` returns `""` (e.g., key missing in a locale), the function falls back to the English message string — but the caller-supplied `substitutions` are silently discarded. This means any future message that uses `$1`/`$2` placeholders would render raw placeholder syntax in the fallback path instead of the substituted value. In the Chrome extension context this is unlikely (English is the default locale, so the API should always resolve), but a non-extension caller (test or Node script) using `msg("someKey", someValue)` would always get unsubstituted English text back.

```suggestion
	if (localizedMessage) return localizedMessage;

	const fallback = englishMessages[key].message;
	if (!substitutions) return fallback;
	const subs = Array.isArray(substitutions) ? substitutions : [substitutions];
	return fallback.replace(/\$(\d+)/g, (_, i) => subs[Number(i) - 1] ?? "");
```

_{Reviews (1): Last reviewed commit: "feat(chrome-extension): add localization..." | Re-trigger Greptile}

Greptile also left 1 inline comment on this PR.

[tembo]

window.chrome can exist outside an extension context (but without i18n), so typeof chrome === "undefined" alone can still blow up here. I’d guard i18n.getMessage as well, and maybe add a test for that case.

Suggested change

	: chrome.i18n.getMessage(key, substitutions);
	typeof chrome === "undefined" || typeof (chrome as any).i18n?.getMessage !== "function"
	? ""
	: chrome.i18n.getMessage(key, substitutions);

[greptile-apps]

When chrome is available but getMessage returns "" (e.g., key missing in a locale), the function falls back to the English message string — but the caller-supplied substitutions are silently discarded. This means any future message that uses $1/$2 placeholders would render raw placeholder syntax in the fallback path instead of the substituted value. In the Chrome extension context this is unlikely (English is the default locale, so the API should always resolve), but a non-extension caller (test or Node script) using msg("someKey", someValue) would always get unsubstituted English text back.

Suggested change

	return localizedMessage || englishMessages[key].message;
	if (localizedMessage) return localizedMessage;
	const fallback = englishMessages[key].message;
	if (!substitutions) return fallback;
	const subs = Array.isArray(substitutions) ? substitutions : [substitutions];
	return fallback.replace(/\$(\d+)/g, (_, i) => subs[Number(i) - 1] ?? "");

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/chrome-extension/src/shared/i18n.ts
Line: 11

Comment:
When `chrome` is available but `getMessage` returns `""` (e.g., key missing in a locale), the function falls back to the English message string — but the caller-supplied `substitutions` are silently discarded. This means any future message that uses `$1`/`$2` placeholders would render raw placeholder syntax in the fallback path instead of the substituted value. In the Chrome extension context this is unlikely (English is the default locale, so the API should always resolve), but a non-extension caller (test or Node script) using `msg("someKey", someValue)` would always get unsubstituted English text back.

```suggestion
	if (localizedMessage) return localizedMessage;

	const fallback = englishMessages[key].message;
	if (!substitutions) return fallback;
	const subs = Array.isArray(substitutions) ? substitutions : [substitutions];
	return fallback.replace(/\$(\d+)/g, (_, i) => subs[Number(i) - 1] ?? "");
```

How can I resolve this? If you propose a fix, please make it concise.

[tembo]

MessageKey likely won’t be a literal key union from the JSON import (often just string), so a bad key could make englishMessages[key].message throw. Consider tightening the key type to string and guarding the fallback lookup.

Suggested change

	export type MessageKey = keyof typeof englishMessages;
	export type MessageKey = keyof typeof englishMessages & string;
	export const msg = (key: MessageKey, substitutions?: string | string[]) => {
	const localizedMessage =
	typeof chrome === "undefined"
	? ""
	: chrome.i18n.getMessage(key, substitutions);
	return localizedMessage || englishMessages[key]?.message || key;
	};