chrome-extension-development

Build Chrome extensions with Manifest V3 architecture and testing workflows.

1|Updated Dec 30, 2025
One-click install
npx skills add https://github.com/SecurityRonin/ronin-marketplace --skill chrome-extension-development
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chrome-extension-development
Source: https://github.com/SecurityRonin/ronin-marketplace/tree/main/plugins/development-skills/skills/chrome-extension-development
Command: npx skills add https://github.com/SecurityRonin/ronin-marketplace --skill chrome-extension-development

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Chrome extension development is complex under Manifest V3, requiring careful architecture, security considerations, and modern APIs. This skill provides guidelines and patterns to build, test, and maintain MV3 extensions reliably.

Core Features & Use Cases

  • Project structure & build: recommended source/public layout with MV3 compliant config, background/service worker, side panel, content scripts, and MV3 configuration best practices.
  • Messaging, storage & sidepanel patterns: robust patterns for inter-page communication, storage usage, and a persistent UI component.
  • SPA navigation handling & testing: strategies to detect SPA URL changes and ensure UI stays in sync across navigation, with testing setups using Vitest.

Quick Start

Create a new MV3 extension skeleton, configure Vite/rollup build, implement background, content, and side panel scripts as described.

Frequently Asked Questions about chrome-extension-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a Chrome extension using Manifest V3?

Building a Chrome extension with Manifest V3 requires configuring a service worker for the background, defining proper host permissions, and structuring content scripts and side panels. This approach ensures a secure, maintainable architecture compliant with modern MV3 standards.

What is the best way to handle messaging between content scripts and service workers in MV3?

The best way to handle messaging in MV3 is using robust inter-page communication patterns that connect your content scripts, service workers, and side panels. This ensures reliable data passing and synchronized UI updates across extension components.

How do I keep my Chrome extension side panel in sync during SPA navigation?

To keep your side panel in sync during SPA navigation, implement strategies to detect SPA URL changes. This ensures your extension's UI stays updated and accurately reflects the current page state without requiring a full page reload.

Can I use Vitest to test Chrome extensions built with Manifest V3?

Yes, you can use Vitest to test Chrome extensions built with Manifest V3. Setting up testing environments with Vitest allows you to validate end-to-end workflows, messaging logic, and content script behavior across common extension use cases.

Does Manifest V3 require a service worker instead of background pages?

Yes, Manifest V3 requires a service worker instead of persistent background pages. This architectural shift improves security and performance by allowing the browser to terminate the background script when idle, necessitating isolated UI patterns and robust messaging.

How do I configure Vite or Rollup for an MV3 extension project?

Configuring Vite or Rollup for an MV3 extension involves setting up a recommended source and public layout that outputs MV3 compliant configuration. This build structure correctly bundles your background service worker, content scripts, and side panel assets.