Greasy Fork

Greasy Fork is available in English.

网页图片上传到 CFBed(极简增强版)

右键图片或悬停按钮上传到 CloudFlare ImgBed,支持按网址匹配 uploadFolder。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

作者
eric2017login
日安装量
0
总安装量
1
评分
0 0 0
版本
2.1.0
创建于
2026-04-11
更新于
2026-04-11
大小
22.6 KB
许可证
MIT
适用于
所有网站

网页图片上传到 CloudFlare ImgBed(极简增强版)

一个用于浏览器用户脚本管理器(如 Tampermonkey / Violentmonkey)的轻量级上传工具。
它可以让你在任意网页中,快速将图片上传到 CloudFlare ImgBed(CFBed) ,并自动复制返回链接。


项目简介

本脚本主要面向以下场景:

  • 在网页上看到图片后,希望一键上传到自己的图床
  • 在论坛、博客、笔记系统中,需要快速把网页图片转存到自己的 CFBed 实例
  • 希望按不同网站,自动上传到不同目录
  • 希望兼顾轻量性能易用性

与传统“重 UI 面板型”用户脚本不同,本脚本采用极简交互设计

  • 保留右键菜单上传
  • 新增图片悬停上传按钮
  • 支持按网址自动切换上传目录
  • 不做全页面扫描,不插入大量组件,不维持沉重面板

因此更适合日常长期使用。


适用对象

本脚本适合以下用户:

  • 已部署或可使用 CloudFlare ImgBed 的用户
  • API TokenauthCode 的用户(建议采用 authCode(也就是登录密码或者上传密码))
  • 希望在网页浏览过程中快速上传图片的用户
  • 使用 Chrome / Edge / Firefox 等支持用户脚本扩展的浏览器用户

对接的上传服务说明

本脚本对接的是 CloudFlare ImgBed 的上传接口。
根据官方文档,真正的上传端点是 /upload,请求方式为 POST,请求体类型为 multipart/form-data,上传文件的字段名为 file[cfbed.sanyue.de]

CloudFlare ImgBed 的上传认证支持两种方式:

  1. authCode 作为查询参数传递
  2. API Token 通过 Authorization 请求头传递(支持 Bearer YOUR_API_TOKEN 写法) [cfbed.sanyue.de]

上传接口还支持多个查询参数,例如:

  • uploadChannel
  • channelName
  • uploadFolder
  • uploadNameType
  • returnFormat
  • autoRetry
  • serverCompress[cfbed.sanyue.de]

CloudFlare ImgBed 的功能文档还说明其 API 支持跨域访问,并具备上传认证、域名白名单、IP 黑名单、权限控制等安全能力。


脚本功能特性

1. 右键菜单上传

在任意网页图片上点击右键后,脚本会记录当前图片。
随后可通过用户脚本菜单执行“上传当前选中图片”。

适合喜欢稳定、明确操作流程的用户。


2. 图片悬停上传按钮

当鼠标悬停到尺寸较大的图片上时,脚本会在图片右上角附近显示一个 “上传” 按钮。
点击该按钮即可直接上传当前图片。

这使得脚本兼顾了:

  • 快速点击上传
  • 低性能占用
  • 不打断网页浏览流程

3. 按网址自动使用不同上传目录

脚本支持为不同的网址规则配置不同的 uploadFolder
例如:

  • 在论坛页面上传时进入 forum_uploads
  • 在博客页面上传时进入 blog_images
  • 在文档站页面上传时进入 docs_assets

如果当前页面未命中任何网址规则,则会回退到全局默认 uploadFolder


4. 自动复制返回链接

上传成功后,脚本会自动复制输出结果到剪贴板。
支持以下复制模式:

  • url
  • markdown
  • html

便于你直接粘贴到论坛、Markdown 编辑器或网页源码中。


5. 保持轻量,不做重型扫描

相比传统的重 UI 脚本,本脚本没有使用:

  • 全页面图片持续扫描
  • 大型控制面板
  • 批量结果面板
  • 高频 DOM 监听
  • 对所有图片批量插入按钮

因此对大多数网站的性能影响更低,适合长期启用。


安装说明

前置条件

在使用本脚本前,你需要准备:

  1. 一个可用的 CloudFlare ImgBed 实例
  2. 对应的 API TokenauthCode
  3. 浏览器已安装用户脚本管理器,例如:
    • Tampermonkey
    • Violentmonkey

安装步骤

  1. 安装用户脚本管理器扩展
  2. 新建一个用户脚本
  3. 将本脚本源码粘贴进去
  4. 保存脚本
  5. 刷新网页开始使用

配置说明

脚本内部包含以下主要配置项。

基础配置

baseUrl

CFBed 实例地址,例如:

https://cfbed.sanyue.de

注意:
这里填写的是站点基础地址,脚本会自动向 /upload 发起上传请求。
根据官方文档,真正上传接口是 /upload,不是文档页面。 [cfbed.sanyue.de]


apiToken

CloudFlare ImgBed 的 API Token。
根据官方 API 总览,API Token 需要在后台管理面板生成,并在调用时通过 Authorization 请求头传递。


authCode 建议优先使用

上传认证码(上传密码也就是登录密码(上传界面登录密码))。
根据官方上传文档,authCode 可作为查询参数使用,是 API Token 之外的另一种认证方式。 [cfbed.sanyue.de]


uploadChannel

上传通道。
CloudFlare ImgBed 文档列出的可选值包括:


channelName

指定多通道场景下的具体通道名。
当服务端配置了多个同类上传通道时,可通过该参数选择目标通道。 [cfbed.sanyue.de]


uploadFolder

全局默认上传目录。
例如:

images/forum

如果当前页面命中了站点规则,那么脚本会优先使用站点规则中的 folder,否则使用这里的默认值。


uploadNameType

文件命名方式。
CloudFlare ImgBed 文档支持:


returnFormat

返回链接格式。
官方文档说明可选:

  • default
  • full

其中 full 表示请求返回完整链接格式,更方便前端脚本直接使用。 [cfbed.sanyue.de]


autoRetry

上传失败时是否自动切换通道重试。
该参数是官方上传接口支持的查询参数之一。 [cfbed.sanyue.de]


serverCompress

服务端压缩开关。
官方文档说明该参数主要针对 Telegram 渠道的图片文件。 [cfbed.sanyue.de]


timeoutMs

网络请求超时时间,单位毫秒。
用于下载原图和上传目标图床时的超时控制。


copyMode

复制结果格式,可选:

  • url
  • markdown
  • html

用于控制上传成功后复制到剪贴板的内容格式。


站点规则说明

功能说明

脚本支持针对不同网址自动匹配不同上传目录。

例如你可以配置:

[
  { "pattern": "https://forum.example.com/*", "folder": "forum_uploads" },
  { "pattern": "https://blog.example.com/*", "folder": "blog_images" }
]

规则匹配逻辑

  • 当前页面 URL 与规则的 pattern 匹配时,使用对应 folder
  • 若存在多条规则,按脚本内部遍历顺序优先命中第一条
  • 如果没有任何规则命中,则回退到全局 uploadFolder

通配符说明

规则支持 * 通配符。

例如:

https://forum.example.com/*

表示匹配该站点下所有页面。


悬停上传按钮说明

显示逻辑

当鼠标移入某张图片时,若该图片满足最小尺寸要求,脚本会在图片右上角附近显示一个共享浮动按钮。

为什么采用“单实例按钮”

为了避免性能问题,脚本并不会给每张图片都插入一个按钮。
而是始终只维护 一个共享的浮动按钮

  • 悬停哪张图,就把按钮移动到哪张图附近
  • 移开时延迟隐藏

这样既保留了“点击即上传”的体验,又避免了给整页图片插大量 DOM 的开销。

与右键菜单方式的关系

悬停按钮是新增的快捷方式,不会替代右键菜单上传
你仍然可以继续使用:

  • 右键图片
  • 打开用户脚本菜单
  • 选择“上传当前选中图片”

使用方法

方式一:通过右键菜单上传

  1. 将鼠标移动到目标图片上
  2. 右键该图片
  3. 脚本记录当前图片
  4. 在用户脚本菜单中执行“上传当前选中图片”
  5. 上传成功后自动复制链接

方式二:通过悬停按钮上传

  1. 将鼠标移动到目标图片上
  2. 图片右上角出现“上传”按钮
  3. 点击按钮
  4. 脚本执行上传
  5. 上传成功后自动复制链接

方式三:为当前站点设置目录

脚本菜单中可使用:

  • 为当前站点设置 uploadFolder

使用后可为当前站点快速建立一条规则,例如:

https://当前域名/*

并指定对应目录名。


方式四:批量编辑站点规则

脚本菜单中可使用:

  • 管理站点规则(JSON)

通过 JSON 形式维护所有网址规则,适合高级用户统一管理。


上传流程说明

脚本的大致工作流程如下:

  1. 识别当前选中的网页图片
  2. 读取图片地址
  3. 下载图片内容为 Blob
  4. 根据配置生成目标上传 URL
  5. multipart/form-data 方式上传至 CFBed 的 /upload
  6. 从返回 JSON 中提取图片链接
  7. 格式化输出内容
  8. 复制到剪贴板
  9. 通过 toast 提示上传结果

根据官方文档,上传请求的核心要求是:

  • POST /upload
  • multipart/form-data
  • file 字段
  • 可选携带 authCodeAuthorization[cfbed.sanyue.de]

权限与安全说明

用户脚本权限

脚本通常需要以下权限:

  • GM_xmlhttpRequest
  • GM_getValue
  • GM_setValue
  • GM_setClipboard
  • GM_registerMenuCommand

这些权限分别用于:

  • 跨域下载图片
  • 读取与保存本地配置
  • 复制上传结果
  • 注册用户脚本菜单

服务端权限说明

CloudFlare ImgBed 的接口本身是带权限控制的。
官方文档说明上传需要有效的 API TokenauthCode[cfbed.sanyue.de]

同时,功能文档提到系统可能启用:

  • 域名白名单
  • IP 黑名单
  • 上传认证
  • 权限控制。

因此,如果你在脚本中遇到 403,通常应优先检查:

  1. Token 是否有效
  2. Token 是否具备上传权限
  3. authCode 是否正确
  4. 服务端是否启用了来源限制或白名单策略

安全建议

  • 不要将 apiTokenauthCode 公开分享
  • 如果要发布脚本到公开网站,建议不要把真实 Token 写死在脚本里
  • 推荐由用户在首次使用时自行配置 Token / authCode
  • 如果站点有权限控制需求,建议在服务端限制上传来源或权限范围

返回结果说明

CloudFlare ImgBed 的文档示例响应通常类似:

[
  { "src": "/file/abc123_image.jpg" }
]

脚本会优先尝试解析:

  • [0].src
  • data[0].src
  • src

如果返回的是相对路径,则会自动拼接成完整链接。
如果使用了 returnFormat=full,则服务端通常会返回更适合直接使用的完整链接格式。 [cfbed.sanyue.de]


兼容的图片来源

本脚本支持处理常见的图片来源类型:

1. 普通图片 URL

例如:

https://example.com/image.jpg

2. data: URL

例如页面内嵌的 Base64 图片。

3. blob: URL

例如由页面脚本动态生成的图片资源。

不过需要注意,某些站点对图片本身会有额外保护,例如:

  • 登录态校验
  • 防盗链
  • 特定 Referer 限制
  • 临时签名 URL

如果原图无法被浏览器上下文或用户脚本成功读取,那么上传也会失败。


菜单项说明

当前脚本一般包含如下菜单:

上传当前选中图片

上传最近一次右键或悬停定位到的图片。

设置 CFBed 参数

设置基础上传参数,例如:

  • baseUrl
  • apiToken
  • authCode
  • 默认 uploadFolder
  • copyMode
  • 是否启用悬停按钮

为当前站点设置 uploadFolder

快速为当前网站建立目录规则。

管理站点规则(JSON)

批量编辑网址规则。

查看当前配置

通过 toast 查看当前生效的主要参数。

清除配置

清空本地保存的脚本配置。


常见问题(FAQ)

Q1:为什么上传时报 403?

最常见原因包括:

  • Token 无效
  • Token 没有上传权限
  • authCode 错误
  • 服务端启用了来源限制 / 白名单 / IP 限制

CloudFlare ImgBed 官方文档明确说明上传需要认证,且具备多种安全控制能力。 [cfbed.sanyue.de]


Q2:为什么浏览器脚本不行,但命令行 curl 可以?

这通常说明问题更可能出在:

  • 浏览器环境下的跨域处理
  • Authorization 请求头引发的预检
  • 前端来源策略

而不是上传接口本身完全不可用。

CloudFlare ImgBed 功能文档说明 API 支持跨域访问,但具体实例是否额外叠加 WAF / 白名单 / 来源规则,还要看实际部署配置。


Q3:为什么某些图片没有显示悬停上传按钮?

通常是因为:

  • 图片尺寸太小
  • 不满足最小宽高要求
  • 当前悬停对象并不是标准 <img>
  • 页面结构导致图片不适合显示按钮

Q4:为什么上传成功但返回链接为空?

脚本会尝试从常见结构中解析链接,但不同部署实例的返回格式可能略有差异。
CloudFlare ImgBed 文档中常见返回结构是 src 字段。 [cfbed.sanyue.de]

如果你遇到此问题,可以检查服务端响应内容,确认返回 JSON 结构是否符合预期。


Q5:为什么我的图片无法下载?

可能原因包括:

  • 原网页图片需要登录
  • 图片有防盗链
  • 图片地址是临时授权链接
  • 图片为特殊渲染内容而不是直接图片资源

已知限制

  1. 本脚本主要针对网页中的标准图片资源
  2. 对极端复杂的前端渲染网站,可能仍需额外适配
  3. 某些网站的图片来源本身受限,脚本无法绕过站点权限控制
  4. 若部署实例配置了严格安全策略,需以服务端设置为准
  5. 站点规则当前主要用于自动匹配 uploadFolder,如需更复杂的按站点参数切换,可继续扩展