Chrome Extension · Manifest V3 · AI Vision

ImageToPrompt

AI 图片反推提示词工具

右键任意图片,一键调用 GPT-4o / Claude 3.5 / Gemini Vision 分析并生成优化提示词,支持同步至 GitHub 仓库归档。

🖱️

右键集成

原生上下文菜单,无缝嵌入浏览器工作流

🤖

多模型支持

GPT-4o-mini · Claude 3.5 · Gemini 1.5 Pro

📋

一键复制

生成即复制,支持 Markdown 格式化展示

🐙

GitHub 同步

提示词自动归档到指定 GitHub 仓库

项目结构

imagetoprompt/
imagetoprompt/
├── manifest.json          # MV3 配置文件
├── background/
│   └── service_worker.js  # 右键菜单 & AI 调用
├── content/
│   └── content_script.js  # 页面注入 & 图片获取
├── popup/
│   ├── popup.html         # 侧边弹出层
│   └── popup.js           # 交互逻辑
├── options/
│   ├── options.html       # 用户配置页
│   └── options.js         # 配置读写逻辑
├── utils/
│   ├── api.js             # AI API 封装
│   └── github.js          # GitHub API 封装
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

数据流架构

🖱️
用户右键图片
触发 contextMenu 事件
⚙️
Background Service Worker
拦截事件,抓取图片 URL
🤖
AI Vision API
GPT-4o / Claude / Gemini 分析
📤
Popup / GitHub
展示结果 & 可选同步归档

完整源代码

manifest.json

🚀 部署安装指南

1

下载项目文件

  1. 点击页面顶部「下载全部」按钮,获取 ZIP 文件
  2. 解压到本地文件夹,例如 ~/imagetoprompt/
  3. 确保目录结构与上方文件树一致
⚠️ 可在网上搜索免费图标生成器,创建 16×16、48×48、128×128 的 PNG 图标放入 icons/ 目录
2

开启 Chrome 开发者模式

  1. 打开 Chrome 浏览器,地址栏输入:chrome://extensions
  2. 点击右上角「开发者模式」开关,使其变为蓝色启用状态
  3. 点击左上角「加载已解压的扩展程序」按钮
  4. 选择刚才解压的 imagetoprompt/ 文件夹
  5. 扩展图标出现在工具栏即代表安装成功 🎉
3

配置 AI API Key

🔑 OpenAI (GPT-4o-mini)
  1. ① 访问 platform.openai.com/api-keys
  2. ② 点击「Create new secret key」
  3. ③ 复制以 sk- 开头的 Key
🔑 Anthropic (Claude 3.5)
  1. ① 访问 console.anthropic.com/settings/keys
  2. ② 点击「Create Key」,复制 Key
🔑 Google (Gemini)
  1. ① 访问 aistudio.google.com/app/apikey
  2. ② 点击「Create API key」,复制 Key
4

配置 GitHub Token(可选)

  1. 登录 GitHub,访问 Settings → Developer settings → Personal access tokens
  2. 点击「Generate new token (classic)」
  3. Note 填写 ImageToPrompt,勾选 repo 权限
  4. 点击「Generate token」,立即复制(只显示一次!)
  5. 在 GitHub 创建一个新仓库,如 my-prompts
5

填写扩展配置 & 开始使用

点击浏览器工具栏中的扩展图标,或右键图标选择「选项」,进入配置页面
选择 AI 模型(推荐 GPT-4o-mini,价格低且效果好),粘贴对应 API Key,点击「保存配置」
(可选)填入 GitHub Token 和仓库路径(格式:用户名/仓库名),保存后即可使用同步功能
在任意网页上,对任意图片点击右键,选择「🔍 AI 反推提示词」
等待 AI 分析(约 5-15 秒),弹出窗口展示生成的提示词
点击「一键复制」直接使用,或点击「保存到 GitHub」将提示词永久归档

❓ 常见问题

右键菜单没有出现「AI 反推提示词」?
确保点击的是图片元素(<img> 标签),部分网站使用 CSS 背景图无法识别,可尝试新标签页打开图片后操作。
API 调用报错 401?
API Key 填写错误或已过期,请重新生成并在选项页更新,注意不要有多余的空格。
GitHub 保存失败?
检查 Token 是否有 repo 权限,仓库路径格式为 username/repo-name,且该仓库必须已存在(可以是空仓库)。
私有图片无法分析?
AI 模型需要通过 URL 访问图片,若图片需要登录才能访问则无法处理。解决方案:将图片另存为本地后上传至可公开访问的图床。