From aaf239a2c58dcfe229d2a08f327337fac3c6a839 Mon Sep 17 00:00:00 2001 From: Jonathan Prusik Date: Wed, 18 Mar 2026 12:04:29 -0400 Subject: [PATCH] [PM-33568] Add Claude guidance on injected content script exceptions (#19559) * add Claude guidance on injected content script exceptions * update CODEOWNERS * update CODEOWNERS * remove high-level Claude guidance * update CODEOWNERS * execute PR feedback * include all autofill content files in the rule --- .claude/rules/autofill-content-scripts.md | 35 +++++++++++++++++++++++ apps/browser/CLAUDE.md | 1 + 2 files changed, 36 insertions(+) create mode 100644 .claude/rules/autofill-content-scripts.md diff --git a/.claude/rules/autofill-content-scripts.md b/.claude/rules/autofill-content-scripts.md new file mode 100644 index 00000000000..206b51eafa8 --- /dev/null +++ b/.claude/rules/autofill-content-scripts.md @@ -0,0 +1,35 @@ +--- +paths: + - "apps/browser/src/autofill/content/**" +--- + +# Autofill Content Scripts - Critical Rules + +## Angular Exception + +Code in this directory runs as **injected content scripts**, not within the Angular application context. + +- **DO NOT** use Angular patterns (components, services, dependency injection, RxJS Observable Data Services, Signals, `takeUntilDestroyed()`, `async` pipe, etc.) +- **DO NOT** import Angular modules or dependencies +- The Angular Architecture Patterns defined in the repo-root CLAUDE.md do not apply here + +## Lit Components + +- Components in `content/components/` use [Lit](https://lit.dev/), not Angular +- Lit components should consume shared concepts (constants, values) from the component library when possible, without introducing Angular or other dependency entanglements + +## Browser API Usage + +- Content scripts cannot import the `BrowserApi` abstraction required elsewhere in the browser extension +- Direct use of `chrome.*` / `browser.*` APIs (e.g., `chrome.runtime.sendMessage`) is expected here +- This is an exception to the `BrowserApi` rule in the parent `apps/browser/CLAUDE.md` + +## Cross-Browser Compatibility + +- Ensure injected code is compatible across browser clients, particularly Firefox, Chrome, and Safari +- Use polyfills and vendor-specific implementations where needed + +## Memory Management + +- Ensure proper teardown of listeners, observers, and other concerns that might linger in memory +- Content scripts do not benefit from Angular's lifecycle hooks — cleanup must be handled manually diff --git a/apps/browser/CLAUDE.md b/apps/browser/CLAUDE.md index a718f5bfd7c..c66f2155cf7 100644 --- a/apps/browser/CLAUDE.md +++ b/apps/browser/CLAUDE.md @@ -3,6 +3,7 @@ - **NEVER** use `chrome.*` or `browser.*` APIs directly in business logic - Always use `BrowserApi` abstraction: `/apps/browser/src/platform/browser/browser-api.ts` - Required for cross-browser compatibility (Chrome/Firefox/Safari/Opera) + - Exception: injected content scripts (see `.claude/rules/autofill-content-scripts.md`) - **ALWAYS** use `BrowserApi.addListener()` for event listeners in popup context - Safari requires manual cleanup to prevent memory leaks