前言大家好我是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://extensionsEdge 为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