Plasmo + Next.js 15 Prompt 套件：提升浏览器插件开发效率

2025年9月13日作者 esx_ai

最近在开发浏览器插件时，我发现将大语言模型融入工作流能极大提升效率。特别是结合 Plasmo 框架（专注于浏览器扩展开发）和 Next.js 15（带来了 React 19 和 App Router 等新特性），通过精心设计的 Prompt，可以让 AI 快速生成项目骨架、组件代码、测试用例、CI 配置，甚至安全审查建议。

这里整理了一套我在学习使用 Plasmo 开发插件时用到的 Prompt 套件，大家可以直接使用或根据项目需求进行调整，希望能帮助到正在开发浏览器插件的朋友们。

通用前置条件

在实际使用中我发现，先明确开发环境和约束条件很重要，这样 AI 生成的代码才能符合我们的技术栈要求：


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.

核心开发场景 Prompt

1. 项目骨架生成

这个 Prompt 能快速搭建一个最小化的项目结构，同时包含 Plasmo 扩展和 Next.js 15 应用目录。


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.

这个场景很常见：构建一个带本地存储和消息交互的弹窗界面，我经常用它来快速搭建基础功能。


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. 内容脚本与数据展示

这个 Prompt 特别实用，可以从网页采集数据并在 Next.js 页面中展示，我做数据抓取插件时经常用到。


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. 后台定时任务

定时任务在插件开发中很常见，这个 Prompt 能帮你快速实现后台定时执行任务，并在前端展示执行状态。


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 配置与权限优化

权限安全是浏览器扩展的重中之重，这个 Prompt 能帮你生成最小化的 manifest 配置，避免权限滥用。


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.

工程化与质量保障

6. 单元测试覆盖

测试往往容易被忽略，但这个 Prompt 能帮你快速为存储模块生成完整的测试用例，确保代码质量。


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 自动化流水线

自动化部署能节省大量时间，这个 Prompt 生成的 GitHub Actions 工作流我已经在实际项目中验证过。


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. 安全审查与分析

安全审查很重要，这个 Prompt 能帮你发现代码中的安全隐患，我每次发布前都会用这个检查一遍。


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. 中文文档本地化

文档本地化对中文用户很友好，这个 Prompt 能帮你把英文技术文档转化为流畅的中文内容。


Translate the following English README into fluent Chinese (适合公众号发布).
Keep technical accuracy, smooth Chinese context, logical structure.
Ignore code blocks and images.

总结

这套 Prompt 是我在实际项目中逐步积累和优化的，能够快速生成符合 Plasmo 架构规范且充分利用 Next.js 15 特性的代码。覆盖了从项目搭建、UI 开发、后台逻辑，到测试、部署、安全审查的完整开发流程。

如果你也在开发浏览器插件，不妨试试这些 Prompt，它们就像个经验丰富的开发助手，能帮你快速迭代需求，大大缩短开发时间，同时保证代码质量。有什么好的使用心得，也欢迎一起交流！