Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add RadOrigin-LLC/RAD-Claude-Skills --skill chrome-ext-best-practicesgit clone --depth 1 https://github.com/RadOrigin-LLC/RAD-Claude-SkillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/radorigin-llc/rad-claude-skills/chrome-ext-best-practices)<a href="https://agentmods.dev/skills/radorigin-llc/rad-claude-skills/chrome-ext-best-practices"><img src="https://agentmods.dev/badge/skills/radorigin-llc/rad-claude-skills/chrome-ext-best-practices/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/radorigin-llc/rad-claude-skills/chrome-ext-best-practices"><img src="https://agentmods.dev/badge/skills/radorigin-llc/rad-claude-skills/chrome-ext-best-practices.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00118 | $0.01141 |
| Opus 5 | $0.00059 | $0.00571 |
| Sonnet 5 | $0.00024 | $0.00228 |
| Haiku 4.5 | $0.00012 | $0.00114 |
Grade A, and why
chrome-ext-best-practices scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 100 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Chrome Extension Best Practices
MV3 Chrome extensions operate across multiple isolated contexts with no shared memory. The architecture must respect these boundaries while maintaining clean code organization. WXT is the recommended framework — it provides file-based routing, automatic manifest generation, and Vite-powered builds.
Core Mental Model
Every extension context (service worker, content script, popup, side panel) is a separate process. Communication happens exclusively through async message passing with JSON-serializable data. The service worker is ephemeral — it wakes to handle events and terminates after ~30 seconds of inactivity.
WXT Project Structure
my-extension/
├── src/
│ ├── entrypoints/ # Isolated contexts (file-based routing)
│ │ ├── background.ts # Service worker
│ │ ├── popup/ # Popup UI (index.html + App.tsx)
│ │ ├── sidepanel/ # Side panel UI
│ │ ├── options/ # Options page
│ │ └── content.ts # Content script (or *.content.ts)
│ ├── components/ # Shared React components
│ ├── hooks/ # Custom React hooks
│ ├── utils/ # Shared utilities
│ │ ├── messaging.ts # Protocol Map definitions
│ │ └── storage.ts # Storage wrappers
│ └── assets/ # CSS, images, SVGs
├── public/ # Static files (copied to output)
├── wxt.config.ts # WXT configuration
├── tsconfig.json
└── package.json
Enable srcDir: 'src' in wxt.config.ts to keep configuration files at root and source in src/.
Context Selection Guide
| Context | When to Use | Lifecycle | DOM Access | Chrome APIs |
|---|---|---|---|---|
| Service Worker | Event handling, orchestration, network interception, alarms | Ephemeral (~30s idle) | None | All |
| Content Script | Read/modify web pages, inject UI | Tied to web page | Host page DOM | Limited |
| Popup | Quick interactions, toggles, settings | Transient (dies on blur) | Own document | All |
| Side Panel | Persistent tools, multi-step flows | Persists until closed | Own document | All |
| Offscreen Document | DOM tasks from background (DOMParser, clipboard, audio) | Reason-based | Own document | chrome.runtime only |
| Options Page | Extension settings dashboard | Standard page | Own document | All |
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 11d ago First seen · 100 lines · 118 tokens per session scan A c19c83c5e296
chrome-ext-best-practices is a skill published in the GitHub repository RadOrigin-LLC/RAD-Claude-Skills (5 stars, last pushed 24d ago), licensed Apache-2.0. It adds 118 tokens to every session and 1,141 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
audio-video
Load this skill whenever the project contains audio or video content, media players, podcasts, video embeds, or any / elements. Under no circumstances publish audio or video without captions, transcripts, and audio descriptions where required. Absolutely always apply WCAG 1.2 criteria for time-based media.
light-dark-mode
Load this skill whenever the project supports light/dark mode, colour theme switching, high-contrast mode, or responds to prefers-color-scheme. Under no circumstances hard-code colours that break in alternative themes. Absolutely always test colour contrast in both light and dark themes, and respect user OS-level…
maps
Load this skill whenever the project contains static or interactive maps, embedded map widgets (Google Maps, Leaflet, Mapbox, OpenStreetMap), or any geographic visualizations. Under no circumstances embed a map without a text-based alternative conveying the same information. Absolutely always ensure map controls are…
svg
Load this skill whenever the project contains SVG graphics — inline SVGs, external SVG files, SVG icons, SVG illustrations, or SVG-based data visualizations. Under no circumstances use SVG without proper accessible titles, descriptions, and ARIA roles where required. Absolutely always add and to meaningful SVGs and…
aria-live-regions
Load this skill whenever the project contains dynamic content updates, status messages, alerts, notifications, loading indicators, or any use of aria-live, role="status", role="alert", or role="log". Under no circumstances add or modify live-region markup without applying these rules. Prioritize correct politeness…
forms
Load this skill whenever the project contains forms, inputs, selects, checkboxes, radio buttons, text areas, or any validation flow. Under no circumstances create a form without visible labels, error identification, and keyboard accessibility. Absolutely always associate every input with a label and provide clear…