用 AI 开发了一个 Github 图片预览浏览器插件！

前言

大家好，我是 Java陈序员。

在 GitHub 上查看 issue、PR、README、评论里的截图时，点击图片会跳到新标签页打开原图。这不仅会打断阅读节奏，而且来回切换标签页体验很差。

在这种情况下，我用 AI 开发了一个浏览器插件，专门用于预览 Github 上的图片！

项目介绍

github-image-preview ------ 一个无需新开标签页、在 GitHub 上点击图片即可原地预览的浏览器插件，支持放大/缩小、拖拽平移、下载原图、多图切换等功能，同时兼容 Chrome、Edge、Firefox.

插件会拦截 GitHub 上的图片点击，改为在当前页面弹出灯箱（lightbox）预览，随点随看、随看随关，让阅读流程不被打断。

功能特性：

🖱️ 原地预览：单击图片弹出灯箱，不再新开标签页
🔍 放大/缩小 ：滚轮、工具栏按钮、键盘 + / -、双击在 1×/2× 间切换
✋ 拖拽平移：放大后可按住鼠标左键拖动查看细节
⬇️ 下载原图：一键保存到本地
↗️ 新标签页打开：按需回到浏览器原生打开方式
⬅️ ➡️ 多图切换：当前页面的图片之间上一张 / 下一张
🏷️ Alt 标题：悬停图片时显示其 Alt 文本作为标题
🌐 多平台：同时支持 Chrome、Edge、Firefox

功能体验

下载安装

下载

安装包下载

最新版本可从 Releases, 解压后按照下方安装步骤以开发者模式加载。

bash 复制代码

https://github.com/chenyl8848/github-image-preview/releases

源码下载

克隆或下载项目源码。

bash 复制代码

git clone 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 一下，谢谢！

bash 复制代码

项目地址：https://github.com/chenyl8848/github-image-preview