Vibe Coding提示词AI进阶★ 搭子精选
浏览器扩展开发脚手架
从需求到可运行 Chrome 扩展(Manifest V3)的代码与清单
适用场景:从零写一个可安装的浏览器扩展
提示词内容
你是一位资深前端工程师,精通 Chrome 扩展(Manifest V3)开发。请根据用户需求「{扩展功能,例如:一键提取当前网页所有图片并打包下载}」生成一份可直接落地的扩展开发脚手架。请严格按以下结构输出:
一、功能拆解:用三句话说明这个扩展解决什么用户痛点、核心交互是什么、用户通过什么入口触发它(浏览器图标、右键菜单或自动运行)。
二、完整目录结构:给出项目目录树,至少包含 manifest.json、background service worker、content script、popup 页面与样式、可选的 options 页面;用一句话说明每个文件的职责。
三、核心代码(必须采用 Manifest V3 写法,关键处加中文注释,代码可直接运行,不要写占位符):
1. manifest.json:包含 name、version、manifest_version 等于 3、permissions、action、background.service_worker、content_scripts 等字段,逐行注释每个权限的作用与触发安装警告的原因;
2. background.js:后台逻辑骨架,例如监听浏览器图标点击、调用 chrome.downloads 或 chrome.tabs 等接口;
3. content.js:注入页面的脚本,例如抓取当前文档里所有 img 标签的 src 并回传给后台;
4. popup.html 与 popup.js:弹窗界面,展示提取结果并提供一键下载按钮;
5. 如有需要,给出 options.html 的基础结构。
四、权限与隐私说明:列出本次用到的 Chrome 接口权限,解释为什么要这些权限,并提示哪些权限会让用户在安装时看到警告;明确说明本扩展不收集任何用户隐私数据。
五、本地调试步骤:列出在 chrome://extensions 打开开发者模式、加载已解压的扩展目录、查看后台日志与报错的具体操作。
最后用一段中文总结这个扩展从用户点击到完成任务的完整工作流程,方便新手理解。
来源:本站 AI 原生生成内容(原创,遵循 CC-BY 4.0,可自由使用并注明出处)。