playbooks

home / skills / shipshitdev / library / plasmo-extension-architect

plasmo-extension-architect skill

/bundles/workspace/skills/plasmo-extension-architect

This skill helps you architect Plasmo MV3 extensions by organizing messaging, storage, and UI across background, content, and popup surfaces.

npx playbooks add skill shipshitdev/library --skill plasmo-extension-architect

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
989 B
---
name: plasmo-extension-architect
description: Architect Chrome MV3 extensions using Plasmo, including messaging, storage, and UI surfaces.
---

# Plasmo Extension Architect

You design Plasmo-based extensions with MV3 service workers, content scripts, and UI surfaces.

## When to Use

- Building a Plasmo extension
- Adding content scripts or messaging
- Designing popup, options, or side panel UI

## Core Patterns

- Keep service worker stateless; persist in storage.
- Use explicit message types and typed payloads.
- Gate content script injection and make it idempotent.
- Keep UI small and fast; use storage sync for prefs.

## Typical Surfaces

- `background.ts`
- `content-script.ts`
- `popup.tsx`
- `options.tsx`

## Security

- Minimize host permissions.
- Validate messages.
- Avoid storing secrets in the DOM.

## Build and Dev

- Use `plasmo dev` for local development.
- Keep manifest permissions aligned with features.
- Validate MV3 constraints for long-running tasks.

Overview

This skill helps you architect Chrome MV3 extensions using the Plasmo framework, focusing on service workers, content scripts, and UI surfaces. It provides clear patterns for messaging, storage, injection, and security so your extension stays robust and maintainable. Designed for developers who want practical, production-ready structure and tradeoffs.

How this skill works

The skill inspects extension surface needs and suggests concrete file roles (service worker, content script, popup, options) and messaging patterns. It enforces stateless service workers with persisted data in storage, typed message payloads, and idempotent content script injection. It also aligns permissions and MV3 constraints with features to avoid runtime errors.

When to use it

  • Starting a new Plasmo MV3 extension project
  • Adding content scripts or cross-surface messaging
  • Designing lightweight popup, options, or side-panel UIs
  • Migrating background pages to MV3 service workers
  • Auditing permissions and storage use for security

Best practices

  • Keep service worker logic stateless; persist state in chrome.storage or IndexedDB
  • Use explicit message types and typed payloads to avoid runtime mismatches
  • Gate content script injection and make initialization idempotent
  • Minimize host permissions and request optional permissions at runtime
  • Keep UI components small and fast; sync preferences via storage rather than DOM

Example use cases

  • Implement a background sync worker that persists work state in storage and communicates via typed messages
  • Inject a content script only on matched pages and ensure it re-runs safely after navigation
  • Build a compact popup UI that reads/writes preferences through storage sync and sends commands to the service worker
  • Create an options page for advanced settings that validates and persists user choices securely
  • Add a side panel that communicates with content scripts using a defined message protocol

FAQ

How do I handle long-running tasks in MV3?

Split work into small units persisted in storage and schedule work using alarms or background events; avoid relying on continuous service worker runtime.

How should I validate messages between surfaces?

Use explicit message type fields and runtime checks for payload shape. Prefer TypeScript interfaces or runtime guards to reject unexpected data.