Chrome全屏截图插件实测：一整条长网页，一键变成一张图

Chrome全屏截图插件实测：一整条长网页，一键变成一张图

【免费下载链接】full-page-screen-capture-chrome-extensionOne-click full page screen captures in Google Chrome项目地址: https://gitcode.com/gh_mirrors/fu/full-page-screen-capture-chrome-extension

Chrome全屏截图插件（Full Page Screen Capture）是一个开源浏览器扩展，核心功能就是把当前网页从头到尾完整截成一张长图，滚动、拼接全部自动完成。这篇文章基于我连续两周的真实使用，把安装方法、内部原理和最容易踩的三个坑一次讲清楚。

一次翻车的"手动拼图"，让我满世界找它

上个月我想把一份 9000 多像素的产品说明页存下来离线看。系统自带的"打印成 PDF"一渲染，表格全散了架；普通截图又只认当前这一屏。于是我开始手动操作：滚一下、截图、粘贴、裁剪，再滚、再截……半小时后，我得到一张接缝歪歪扭扭的"拼布"，中间还因为手抖重复了一段。

那一刻我意识到，我要的不是更熟练的截图技巧，而是一个能自己滚动、自己拼接的工具。带着"Chrome 全屏截图插件"这个关键词，我找到了 Full Page Screen Capture。它把这件事做完了，而且只用了屈指可数的几个文件。

先认识它的"五脏六腑"，再动手装

整个项目核心就五个文件，功能边界非常清晰：

权限方面它非常克制，只申请了三个：activeTab（只在点击那一刻访问当前页）、storage和unlimitedStorage（用来存放长图）。所有处理都在本地完成，没有任何上传动作。

四步装好，顺手记住一个快捷键

安装走的是 Chrome 开发者模式，全程不超过一分钟。先拿到代码：

git clone https://gitcode.com/gh_mirrors/fu/full-page-screen-capture-chrome-extension

然后按这个顺序走：

1. 地址栏输入chrome://extensions/并回车
2. 打开右上角的"开发者模式"开关
3. 点击"加载已解压的扩展程序"，选中刚才克隆下来的文件夹
4. 完成——工具栏出现一个相机图标，点击即可开拍

两个高频操作请记住：点图标等于开始截图；Alt+Shift+P是默认快捷键，手不用离开键盘。想换键的话，去chrome://extensions/shortcuts自定义即可。

它其实是台会自己动的"全景相机"

手机拍全景照片的原理是：你慢慢平移手机，相机连拍十几张，最后在后台无缝拼成一张超宽图。这个插件干的是同一件事，只不过它"平移"的是网页本身。拆开看，整个流程分五步：

1. 量尺寸——page.js会从body和documentElement的scrollHeight、offsetHeight等多个角度测页面总高宽并取最大值，防止某些网页用滚动属性"骗"过它
2. 排行程——以窗口高度为步长切出待截坐标，每段故意重叠 200 像素，用来兜住固定在顶部的导航栏
3. 连拍——滚到每个坐标，等待 150 毫秒让页面稳定，再调用 Chrome 原生的captureVisibleTab拍下当前这一屏
4. 拼图——每张"底片"按坐标画进大画布，api.js里专门处理了缩放和 Retina 屏像素密度差异
5. 收尾——隐藏的滚动条恢复，页面滚回你截图前的位置，成品自动在新标签页打开

还有一层保险：Chrome 单张图片的尺寸上限约 30000×8000 像素，一旦页面超过这个量级，插件会提前提示并自动把图拆成几张分别开标签页，绝不硬撑或悄悄失败。

三个真实场景：谁最该装它

学生党存讲义。论文、网课课件、参考文献列表这类"一长条"页面，过去要么一页页另存 PDF，要么忍痛只留首屏。现在点一下图标，整页进图，图表和公式原样保留，离线照常阅读。

设计师收灵感。看中一个站点的整体布局、配色和字体排印，普通截图只能截到首屏，布局全貌看不全。全屏截图一下把整页"拍扁"，方便并排对比不同站点，复盘自己的设计方案。

打工人留凭证。跟客户确认需求的聊天记录、无法导出的在线表格、订单详情页——这些需要归档的"证据"往往都很长。以前要么手机拍照，要么截完再拼；现在一张长图存档，文件名还自动带着域名和时间戳，找起来非常省事。

它交出的成品，长这样

截完图会看到类似下面的结果：标签页标题直接显示图片尺寸，地址栏是扩展的本地文件系统路径，整页内容一图到底。

图片命名规则是screencapture-域名-时间戳.png，时间戳保证了多次截图不会互相覆盖。拿到成品后，右键"图片另存为"、直接拖到桌面，或者复制粘贴到文档里，都行。对于常规长度页面，从点击到出图基本是秒级完成，进度条会实时告诉你拍到哪了——项目 changelog 里还记录过 0.0.7 版本的一次 10 倍提速，日常使用体感是"刚点完就在加载了"。

装之前想问的六个问题，我替你先试了

顺带纠正一个常见误区：有人觉得"打印成 PDF"能替代全屏截图。实际对比一下——打印会重新排版，表格散架、动态内容丢失；系统截图只有一屏；而全屏截图是所见即所得，页面长什么样，图就是什么样。

现在轮到你按快门了

手动拼图的滋味，体验一次就够受的了。这个项目从 2012 年开源至今仍在维护，MIT 许可，想改想提意见都欢迎。装上它只需四步，但省下的时间远远不止四分钟。

现在就做：克隆仓库、加载进 Chrome、打开一个你平时翻不到底的网页，按一下Alt+Shift+P。三十秒后，那张完整的长图会替你证明，这事真的能一键完成。

【免费下载链接】full-page-screen-capture-chrome-extensionOne-click full page screen captures in Google Chrome项目地址: https://gitcode.com/gh_mirrors/fu/full-page-screen-capture-chrome-extension