Plasmo + Next.js 15 Prompt Suite: Boost Browser Extension Development Efficiency

September 13, 2025 by esx_ai

While developing browser extensions, I’ve found that integrating large language models into the workflow can significantly boost productivity. Particularly when combining the Plasmo framework (specialized for browser extension development) with Next.js 15 (bringing React 19 and App Router features), well-crafted prompts enable AI to quickly generate project scaffolds, component code, test cases, CI configurations, and even security audit suggestions.

Here’s a collection of prompts I’ve tested in real projects. You can use them directly or adapt them to your specific needs—hopefully they’ll be helpful for fellow browser extension developers.

General Prerequisites

From my experience, it’s crucial to clearly define the development environment and constraints upfront to ensure AI-generated code aligns with our tech stack requirements:


You are an expert frontend engineer.
Use Plasmo framework (for Chrome extension MV3 build) combined with Next.js 15 (App Router, React 19, TypeScript).
The browser extension must follow Plasmo's architecture (popup, content script, background, plasmo.config.ts), while UI pages and components should follow Next.js 15 conventions.
Ensure TypeScript, TailwindCSS, and shadcn/ui are used for styling.

Core Development Scenario Prompts

1. Project Scaffold Generation

This prompt quickly sets up a minimal project structure containing both Plasmo extension and Next.js 15 application directories.


Generate a minimal Plasmo + Next.js 15 project scaffold with TypeScript:
- Plasmo structure: plasmo.config.ts, src/pages/popup.tsx, src/content.tsx, src/background.ts
- Next.js 15 integration: app/ directory with App Router (React 19), page.tsx for landing UI
- Shared components in src/components using shadcn/ui
- TailwindCSS setup for styling
Provide all required files with full content.

A common scenario: building a popup interface with local storage and message interaction—I frequently use this for rapid basic functionality setup.


Implement a popup UI (React 19 + Next.js 15 component style) using Plasmo:
- Popup lists items stored in chrome.storage.local
- Add/Remove/Sync buttons with Tailwind + shadcn/ui
- On Sync, send message to background.ts and show response
Provide code for src/pages/popup.tsx, background.ts, and helper storage utils.

3. Content Script & Data Display

Extremely practical—this prompt helps extract data from web pages and display it in Next.js pages, something I use often for data scraping extensions.


Write a Plasmo content script in TypeScript:
- Inject into https://*.example.com/*
- Extract all article titles and first paragraphs
- Respond to {type: "EXTRACT"} messages with the data
Additionally, create a Next.js 15 page (/app/extracted/page.tsx) that displays the extracted content in a styled list.

4. Background Scheduled Tasks

Scheduled tasks are common in extension development. This prompt helps quickly implement background task execution with frontend status visualization.


Create a Plasmo MV3 background service worker:
- Runs a job every 15 minutes using chrome.alarms
- Caches results in memory + chrome.storage
- Exposes message interface {type: "FETCH_DATA", url}
- Include retry logic
Also add a Next.js 15 /app/dashboard/page.tsx to visualize sync status with Tailwind charts.

5. Manifest Configuration & Permission Optimization

Permission security is critical for browser extensions. This prompt generates minimal manifest configurations to prevent permission abuse.


Produce a minimal manifest.json (Plasmo config format) for an extension that:
- Reads text from example.com
- Syncs to https://api.myapp.com
Request only required permissions.
Also provide a short checklist (3–5 items) for securing Plasmo + Next.js 15 extensions.

Engineering & Quality Assurance

6. Unit Test Coverage

Testing is often overlooked, but this prompt quickly generates comprehensive test cases for storage modules to ensure code quality.


Generate Jest unit tests for a Plasmo + Next.js 15 storage helper (chrome.storage.local wrapper).
Include test files + jest.config with support for TypeScript + React 19.
Use chrome.storage mock.

7. CI/CD Automation Pipeline

Automated deployment saves significant time. I’ve validated this GitHub Actions workflow in actual projects.


Write a GitHub Actions workflow for Plasmo + Next.js 15 project:
- pnpm install
- pnpm build (Plasmo build + Next.js build)
- Zip extension build folder
- Upload artifact
Assume Chrome Web Store secrets configured separately.

8. Security Audit & Analysis

Security auditing is essential. I use this prompt before every release to identify potential security vulnerabilities.


Act as a security auditor for Plasmo + Next.js 15 code.
Analyze pasted TypeScript code for:
- Excessive permissions
- Token leakage
- Insecure storage
- CSP issues
List numbered issues with file:line references and patch suggestions.

9. Chinese Documentation Localization

Document localization is user-friendly for Chinese audiences. This prompt helps convert English technical documentation into fluent Chinese content.


Translate the following English README into fluent Chinese (suitable for official account publication).
Keep technical accuracy, smooth Chinese context, logical structure.
Ignore code blocks and images.

Conclusion

This prompt collection has been gradually refined through real project experience, enabling rapid generation of code that complies with Plasmo architecture standards while fully utilizing Next.js 15 features. It covers the complete development lifecycle: from project setup and UI development to backend logic, testing, deployment, and security auditing.

If you’re also developing browser extensions, give these prompts a try—they function like experienced development assistants, helping you quickly iterate on requirements, significantly reduce development time, and maintain code quality. I’d love to hear about your experiences and insights too!