Pulsar消息积压治理与背压机制实战
2026/10/27 2:53:14
前言
大家好，我是Java陈序员。
在 GitHub 上查看 issue、PR、README、评论里的截图时，点击图片会跳到新标签页打开原图。这不仅会打断阅读节奏，而且来回切换标签页体验很差。
在这种情况下，我用 AI 开发了一个浏览器插件，专门用于预览 Github 上的图片！
项目介绍
github-image-preview—— 一个无需新开标签页、在 GitHub 上点击图片即可原地预览的浏览器插件，支持放大/缩小、拖拽平移、下载原图、多图切换等功能，同时兼容 Chrome、Edge、Firefox.
插件会拦截 GitHub 上的图片点击，改为在当前页面弹出灯箱（lightbox）预览，随点随看、随看随关，让阅读流程不被打断。
功能特性：
- 🖱️原地预览：单击图片弹出灯箱，不再新开标签页
- 🔍放大/缩小：滚轮、工具栏按钮、键盘
+/-、双击在 1×/2× 间切换 - ✋拖拽平移：放大后可按住鼠标左键拖动查看细节
- ⬇️下载原图：一键保存到本地
- ↗️新标签页打开：按需回到浏览器原生打开方式
- ⬅️ ➡️多图切换：当前页面的图片之间上一张 / 下一张
- 🏷️Alt 标题：悬停图片时显示其 Alt 文本作为标题
- 🌐多平台：同时支持 Chrome、Edge、Firefox
功能体验
下载安装
下载
- 安装包下载
最新版本可从Releases, 解压后按照下方安装步骤以开发者模式加载。
https://github.com/chenyl8848/github-image-preview/releases- 源码下载
克隆或下载项目源码。
gitclone https://github.com/chenyl8848/github-image-preview.git安装
- Chrome / Edge（或其他 Chromium 内核浏览器）
- 打开
chrome://extensions（Edge 为edge://extensions） - 打开右上角「开发者模式」开关
- 点击「加载已解压的扩展程序」，选择项目根目录
- 打开任意含图片的 GitHub 页面，单击图片即可预览
- Firefox
- 打开
about:debugging#/runtime/this-firefox - 点击「临时载入附加组件」，选择项目根目录下的
manifest.json - 打开任意含图片的 GitHub 页面，单击图片即可预览
Firefox 仅支持「临时载入」，重启浏览器后需重新加载；如需永久安装，需用 Firefox Developer Edition / Nightly 关闭签名校验。
使用方法
在 GitHub 页面上单击图片即可弹出预览，灯箱打开后：
| 操作 | 方式 |
|---|---|
| 关闭 | Esc/ 点击背景 / 点击右上角 × |
| 上一张 / 下一张 | ←/→或左右箭头按钮 |
| 放大 / 缩小 | +/-、鼠标滚轮、工具栏「放大 / 缩小」按钮 |
| 复位到原始尺寸 | 0或工具栏「1:1」按钮 |
| 1× / 2× 切换 | 双击图片 |
| 拖拽平移（放大后） | 按住鼠标左键拖动 |
| 下载原图 | 工具栏「下载」按钮 |
| 新标签页打开 | 工具栏「新标签页打开」按钮 |
按住
Ctrl/Cmd/Shift/Alt（或使用右键、中键）点击图片时，仍按浏览器默认行为在新标签页打开，不受插件影响。
下载原图通过
fetch拉取图片，若遇跨域受限会自动降级为新标签页打开。
本地开发
目录结构
github-image-preview/ ├── manifest.json # Manifest V3 配置 ├── content.js # 核心逻辑：点击拦截 + 图片识别 + 灯箱交互 ├── content.css # 灯箱样式 ├── icons/ # 插件图标（16 / 48 / 128） ├── tools/gen_icons.py # 图标生成脚本（仅依赖标准库） ├── .gitignore # 忽略打包产物与编辑器目录 ├── LICENSE # MIT 协议 └── README.md工作原理
- 在
document上以捕获阶段监听点击事件（事件委托），不依赖页面结构，GitHub 的 SPA 动态渲染内容也能实时生效。 - 命中「链接指向图片」的
<a>标签时，preventDefault()阻止新标签页打开，改为显示自绘灯箱；同时识别 GitHub 的页面路由（/blob/、/tree/、/blame/），避免误伤普通页面链接。 - 灯箱 DOM 仅创建一次并复用；多图导航在每次打开时重新收集当前页面的可预览图片。
权限说明
本插件申请的权限及用途：
github.com：在 GitHub 页面上注入脚本，拦截图片点击以弹出预览。*.githubusercontent.com：「下载原图」时拉取托管在 GitHub CDN 上的图片资源。
插件不收集、不上传任何用户数据，全部逻辑在本地浏览器内运行。
常见自定义
- GitHub Enterprise（自定义域名）：在
manifest.json的content_scripts.matches中追加你的域名，例如https://github.yourcompany.com/*。 - 替换图标：将
icons/下的 PNG 替换为你的图标（保持 16 / 48 / 128 尺寸），或修改tools/gen_icons.py后重新生成。
最后
开发这个插件纯粹是为了方便在浏览 Github 时，能拥有更好地阅读体验。由于没有开发浏览器插件的相关经验，整个插件完全是由 AI 实现。插件可能还存在一些问题和 Bug, 欢迎提交 Issue 与 Pull Request.
如果你觉得这个插件还不错的话，帮忙 Star 一下，谢谢！
项目地址：https://github.com/chenyl8848/github-image-preview