Token导航 LogoToken导航TokenDH.com
图像处理操作浏览器clawhub未标认证来源可访问clear审计通过

gemini-browser-imageGemini 浏览器图像

Agent Skill

用于辅助图像生成、图片编辑、视觉素材处理或图像模型工作流。它适合让 Agent 根据文本生成图片、处理背景、整理视觉提示词或调用相关图像工具。使用时需要确认输入图片、版权来源、输出格式和模型限制;涉及人物、品牌、商品或公开展示素材时,应额外核对授权、真实性和内容合规边界。

总安装

1,656

周安装

67

GitHub Stars

公开资料未说明

下载量

520
OpenClaw

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

GitHub

来源数

2

许可证

MIT-0

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:gemini-browser-image(Gemini 浏览器图像)
来源仓库:https://github.com/jiao1yin2he3/gemini-browser-image
安装命令:
openclaw skills install gemini-browser-image
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 OpenClaw 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

ClawHubOpenClaw
openclaw skills install gemini-browser-image

简介

gemini-browser-image 利用用户 Chrome 会话调用 Gemini Web UI 生成图像。

  • 适用于文章封面、插图或社交媒体视觉素材的快速创建。
  • 安装后需登录有效 Chrome 账号,并遵循平台使用条款。
  • 涉及品牌或人物素材时,应额外审核授权与真实性边界。
  • 适用宿主包括 OpenClaw,接入前应确认版本、权限和运行环境要求。

SKILL.md

name
gemini-browser-image
description
Generate images with the user's own Chrome session and Gemini web UI. Use for article covers, illustrations, and social media visuals when the user explicitly asks for image generation or article images. Requires an already-authorized Gemini account and user-controlled browser session; does not handle credentials, bypass access controls, or solve CAPTCHAs.

Gemini Browser Image

Safety boundaries

  • Use only with the user's own browser profile and Gemini account.
  • Do not bypass login, paywalls, CAPTCHAs, rate limits, or access controls.
  • Do not extract, store, print, or publish cookies, tokens, browser profile data, or account secrets.
  • If Gemini blocks a prompt or generation fails, revise the prompt or ask the user; do not attempt evasion.
  • Download only the image assets generated for the current user-requested task.

概述

通过 Chrome 浏览器 + Gemini AI 生成图片并下载。使用 mcporter 调用 chrome-devtools-mcp 控制浏览器,模拟人工操作完成图片生成。

核心流程:启动 Chrome → 打开 Gemini → 输入提示词 → 等待生成 → 点击下载 → 复制到目标目录


前置条件

1. Chrome 必须在运行(带远程调试端口)

# 检查 Chrome 是否已运行
netstat -ano | Select-String "9222"

# 如果没有运行,启动 Chrome
Start-Process "C:\Program Files\Google\Chrome\Application\chrome.exe" -ArgumentList "--remote-debugging-port=9222","--user-data-dir=<your-chrome-user-data-dir>"

2. chrome-devtools-mcp 必须在运行

# 检查 MCP 服务器状态
mcporter list

# 应该看到:chrome-devtools (29 tools, x.xs) ✔ Listed 1 server (1 healthy)

# 如果没有运行,启动 MCP 服务器
cmd /c "cd /d <your-npm-global-dir> && npx chrome-devtools-mcp@latest --autoConnect --experimentalStructuredContent --experimental-page-id-routing"

自动重连:MCP 服务器会自动连接到已运行的 Chrome,无需手动配对。


完整工作流程

Step 1: 导航到 Gemini

mcporter call chrome-devtools.navigate_page type="url" url="https://gemini.google.com"

Step 2: 获取页面快照,找到输入框

mcporter call chrome-devtools.take_snapshot verbose=true

从快照中找到:

  • 输入框:textbox "Enter a prompt for Gemini" → 记下其 UID(如 uid=3_187
  • 图片生成按钮:button "🖼️ Create image" → 如果有的话

Step 3: 输入提示词

mcporter call chrome-devtools.fill uid="<输入框UID>" value="你的英文提示词"

提示词技巧

  • 尽量用英文描述,效果更好
  • 包含风格关键词:photorealistic, 3D render, vector illustration, watercolor 等
  • 说明用途:food photography, hero image, social media post 等
  • 添加质量修饰:high quality, detailed, 4K, cinematic lighting 等

Step 4: 提交生成

mcporter call chrome-devtools.press_key key="Enter"

Step 5: 等待图片生成

图片生成需要 20-60 秒,期间可以定期检查状态:

# 等待 30 秒
Start-Sleep -Seconds 30

# 获取快照查看状态
mcporter call chrome-devtools.take_snapshot verbose=false

成功标志:看到 "Download full size image" 按钮出现。

失败标志:看到 "Redo" 按钮或错误信息。

Step 6: 点击下载按钮

mcporter call chrome-devtools.click uid="<下载按钮UID>"

从快照中找到:button "Download full size image" → UID(如 uid=6_6

Step 7: 确认文件已下载

Get-ChildItem $env:USERPROFILE\Downloads -File | Sort-Object LastWriteTime -Descending | Select-Object -First 5 | Format-Table Name, Length, LastWriteTime -AutoSize

应该看到 Gemini_Generated_Image_*.png 文件(通常 1-3MB)。

Step 8: 复制到目标目录

$newFile = Get-ChildItem $env:USERPROFILE\Downloads -File | Sort-Object LastWriteTime -Descending | Select-Object -First 1
Copy-Item $newFile.FullName "<目标路径\图片名.png>"

常用 mcporter 命令参考

操作命令
列出页面mcporter call chrome-devtools.list_pages
打开网址mcporter call chrome-devtools.navigate_page type="url" url="..."
获取快照mcporter call chrome-devtools.take_snapshot verbose=true
填写输入框mcporter call chrome-devtools.fill uid="X_Y" value="..."
点击元素mcporter call chrome-devtools.click uid="X_Y"
按键盘mcporter call chrome-devtools.press_key key="Enter"
执行JSmcporter call chrome-devtools.evaluate_script function="() => ..."
截图mcporter call chrome-devtools.take_screenshot format="png"
等待Start-Sleep -Seconds X

图片提示词模板

封面图(2.35:1,900x383)

Professional hero image for article about [主题], modern design, clean layout, [风格: minimalist/corporate/vibrant], high quality, 4K

文章配图(16:9,800x450)

Illustrated [主题] concept, [风格: flat/realistic/abstract], clean design suitable for blog post, soft lighting, high quality

社交媒体图片

Social media post design about [主题], [平台] format, eye-catching, modern graphic design, vibrant colors, professional quality

食物/产品图

Professional [food/product] photography, [具体描述], studio lighting, appetizing, high resolution, commercial quality

完整示例

生成一张小龙虾图片:

# Step 1: 打开 Gemini
mcporter call chrome-devtools.navigate_page type="url" url="https://gemini.google.com"

# Step 2: 获取快照
mcporter call chrome-devtools.take_snapshot verbose=true
# 找到输入框 uid=3_187

# Step 3: 输入提示词
mcporter call chrome-devtools.fill uid="3_187" value="Generate a realistic photo of a plate of delicious Sichuan spicy crayfish (小龙虾), with bright red shells, garlic and scallions garnish, atmospheric lighting, food photography style, appetizing and mouth-watering"

# Step 4: 提交
mcporter call chrome-devtools.press_key key="Enter"

# Step 5: 等待30秒后检查
Start-Sleep -Seconds 30
mcporter call chrome-devtools.take_snapshot verbose=false

# Step 6: 找到下载按钮 UID(如 6_6)并点击
mcporter call chrome-devtools.click uid="6_6"

# Step 7: 检查下载
Get-ChildItem $env:USERPROFILE\Downloads -File | Sort-Object LastWriteTime -Descending | Select-Object -First 3

# Step 8: 复制到工作目录
$newFile = Get-ChildItem $env:USERPROFILE\Downloads -File | Sort-Object LastWriteTime -Descending | Select-Object -First 1
Copy-Item $newFile.FullName "<output-dir>\\crayfish.png"

多标签并行生成流程(推荐)

当需要生成多张图片时(如文章配图5张),使用此流程可以大幅节省时间。

核心思路:流水线式操作——填完提示词就切走,生成和准备并行。

操作步骤

准备工作:清理旧标签

# 查看当前所有标签
mcporter call chrome-devtools.list_pages

# 关闭多余标签(除了正在用的,关闭其他)
mcporter call chrome-devtools.close_page pageId="2"
# 重复直到只剩1个标签

流水线填入(快速连续操作)

标签1:填提示词1 → 发送 → 开标签2

# 获取输入框UID(假设 uid=6_192)
mcporter call chrome-devtools.take_snapshot verbose=false
mcporter call chrome-devtools.fill uid="6_192" value="[提示词1]"
mcporter call chrome-devtools.press_key key="Enter"
# 立即开新标签
mcporter call chrome-devtools.new_page url="https://gemini.google.com" background=false

标签2:填提示词2 → 发送 → 开标签3

# 等几秒让新标签加载完成
Start-Sleep -Seconds 2
# 获取输入框UID
mcporter call chrome-devtools.take_snapshot verbose=false
# 填写提示词2(输入框 UID 变了,如 uid=21_19)
mcporter call chrome-devtools.fill uid="21_19" value="[提示词2]"
mcporter call chrome-devtools.press_key key="Enter"
mcporter call chrome-devtools.new_page url="https://gemini.google.com" background=false

标签3-5:重复上述步骤

等待所有生成完成

# 等45-50秒(足够生成时间)
Start-Sleep -Seconds 50

依次下载

# 切换到标签1,下载图片
mcporter call chrome-devtools.select_page pageId="1" bringToFront=true
mcporter call chrome-devtools.take_snapshot verbose=false
# 找到 "Download full size image" 按钮的 UID(如 uid=23_14)
mcporter call chrome-devtools.click uid="23_14"

# 切换到标签2,下载
mcporter call chrome-devtools.select_page pageId="2" bringToFront=true
mcporter call chrome-devtools.take_snapshot verbose=false
# 找下载按钮并点击

# 依次完成所有标签...

确认下载

Get-ChildItem $env:USERPROFILE\Downloads -File | Where-Object { $_.Name -like "Gemini_Generated_Image_*" } | Sort-Object LastWriteTime -Descending | Select-Object -First 5

时间对比

方案5张图耗时
串行(一张一张来)5 × 45秒 ≈ 6分钟
并行多标签(本方案)45秒 + 操作时间 ≈ 2-3分钟

关键发现

  1. 生成是并行的:不管标签是否在最前面,只要有提交就会生成
  2. 每个新标签的输入框 UID 都会变:必须每次 take_snapshot 获取,不能复用
  3. 标签号 ≠ 快照里的 page IDlist_pages 显示的序号和快照内容不完全对应,要靠 You said 标题区分
  4. 每个 You said 下都有独立的下载按钮:一个标签内可能有多张图(如果之前有残留)

注意事项

  1. 新标签必须等页面完全加载new_page 后等 2 秒再 take_snapshot
  2. 边生成边开标签:填完当前提示词就切走开新标签,不用等生成完
  3. 下载时找准 You said 标题:确认下载的是哪张图

故障排除

问题解决方法
chrome-devtools not found运行 npx chrome-devtools-mcp@latest --autoConnect
Chrome 没有监听 9222重启 Chrome 加 --remote-debugging-port=9222 参数
点击下载没反应等更长时间,用快照确认下载按钮存在
下载的文件是空的重新点击下载按钮,或刷新页面重试
提示词不执行确认输入框已获得焦点,可先点击输入框再 fill

适合场景

01

OpenClaw 用户查找和安装 Skill 时

02

用户想查找某类 Agent Skill 时

03

需要根据任务场景推荐可安装能力包时

04

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明,方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用;具体调用方式请以来源页面和 README 为准。

平台分布

OpenClaw

70.69%
按下载量换算368

安全审计

VirusTotal

通过

ClawScan

通过

Static analysis

通过

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力,使用时可能读取或操作网页内容,需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源,正式发布前建议补源仓库或其他目录站核验。

来源信息

继续浏览同类 Skills