news 2026/8/21 23:03:11

一键整页截图 Chrome 扩展:3 分钟把长网页存成一张完整长图

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
一键整页截图 Chrome 扩展:3 分钟把长网页存成一张完整长图

一键整页截图 Chrome 扩展:3 分钟把长网页存成一张完整长图

【免费下载链接】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

Full Page Screen Capture 是一个免费开源的 Chrome 扩展:点一下,它会自动滚动并把当前页面逐段拍下来,拼成一张完整的整页长图。适合需要存档网页、收集参考、保留页面原样的普通用户,全程不用手动滚动拼接,不需要会写代码。

30 秒上手

整个流程就是"下载、加载、开拍"三件事:

  1. 下载源码:在终端执行下面这条命令,会得到一个项目文件夹。
git clone https://gitcode.com/gh_mirrors/fu/full-page-screen-capture-chrome-extension
  1. 加载到浏览器:地址栏输入chrome://extensions/,打开右上角"开发者模式",点"加载已解压的扩展程序"并选中上一步的文件夹。工具栏出现相机图标,即安装成功。

  2. 拍第一张:打开任意想保存的网页,点相机图标(或直接按Alt+Shift+P)。弹窗里出现进度条,走完就会自动在新标签页打开成品,右键"图片另存为"即可。

功能全解析

一键整页截图是怎么拍的

触发之后,扩展连续做四件事:隐藏滚动条 → 滚到指定位置拍一帧 → 把这帧按坐标贴到大画布上 → 全部拍完,存文件并打开。你只需要盯着进度条看,期间别动鼠标、别切标签页。

进度条走到 100% 即代表拼接完成,弹窗会保持打开直到成品出现。

超长网页自动拆分

Chrome 对单张图片有尺寸上限(主边约 30000 像素)。页面太长时,扩展不会直接失败,而是自动算出要拆几份,在弹窗里提示你,然后每份单独开一个标签页,文件名带-2-3后缀,顺序一眼能分清。

成品命名与交付规则

成品文件名格式为screencapture-域名-时间戳.png,例如screencapture-example-com-1712345678901.png。文件先写入扩展的临时存储区,再在新标签页展示——所以即使你在隐身窗口里拍,结果也会以非隐身窗口打开,照样能保存。

一个容易被忽略的细节:拍摄结束后,页面会自动回到你原来滚动到的位置,并恢复滚动条状态,接着往下读完全不受影响。

谁最该用它

按"页面特征"而不是"你是谁"来分组,更准确:

  • 不能导出的页面:企业系统、在线文档、各种只读视图没有下载按钮,整页截图是最直接的存档手段
  • 太长截不完的页面:论坛长帖、年度报告、时间线页面,手动一屏屏截要折腾半天,成品还全是接缝
  • 必须保留原样的页面:要保留布局、字体、配色做设计参考或问题取证,整页截图比收藏夹直观点得多

原理速览

想象一台文档扫描仪:扫描床只有 A4 那么大,扫一份长合同就得一页一页往里送,机器记下每一页的页码,最后按顺序拼回完整合同。这个扩展干的事一模一样——"视口"就是扫描床,而"记页码、拼顺序"这部分全由代码自动完成。

整个项目只有 5 个核心文件,分工如下:

文件职责
manifest.json扩展声明:权限仅activeTabstorageunlimitedStorage,默认快捷键Alt+Shift+P
popup.html弹窗界面:进度条、拆分提示、错误提示
popup.js总调度:获取当前标签、生成文件名、接收回调并打开成品
api.js拼接引擎:接收各段截图、按坐标绘入画布、写出图片文件
page.js页面操控:测量页面总宽高、逐位滚动、拍完复原现场

进阶技巧

几个官方说明里没细讲、但很实用的点:

  • 快捷键换成顺手组合chrome://extensions/底部有"键盘快捷键"入口,Alt+Shift+P可改成任意组合
  • 等加载完再拍:滚动中才触发加载的动画、图片、懒加载内容会在成品里留白。先等页面完全加载,再按下截图
  • 缩放与模拟设备不影响结果:代码会按devicePixelRatio自动校准坐标,高分屏、页面缩放状态下拼接也不会错位
  • 留意拆分阈值:主边超过 30000 像素、或总像素超过约 2.4 亿就会触发拆分,弹窗会明确报出份数
  • 隐私成本几乎为零activeTab权限只在点击瞬间生效,扩展不常驻后台,拼接全部在浏览器本地完成,图片不会上传

常见问题

Q:某些页面点没反应,是哪里的问题?扩展只能注入普通http/https/file页面。浏览器内部页面(如chrome://开头、商店页面)受安全策略保护,脚本进不去。换一个普通网页即可。

Q:为什么一次拍出来是两张甚至更多图?这是自动拆分机制在工作,说明页面超出了单图尺寸上限。几份图可以按文件名顺序用图片工具再拼,也可以直接分段使用。

Q:成品能直接存到我指定的文件夹吗?不能。成品是临时存储后在新标签页展示的,需要手动右键保存。好在文件名带域名和时间戳,事后按名字批量识别很方便。

Q:如果哪天没人维护了还能用吗?代码是 MIT 协议开源的,核心逻辑就集中在上面那 5 个文件里,几百行就能读完。停更也不影响你直接接手改。

写在最后

一句话概括:它把"滚动、截图、拼接"三步手工活压缩成了一次点击。现在就去 clone 下来加载上,然后打开那个你一直没存下来的长页面,点一下试试。

最后提醒:截图方便,也请尊重内容版权,把图片用于个人学习、研究和正当用途。

【免费下载链接】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

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/21 23:00:16

内景 中世纪哥特式教堂室内

本项目为前几天收费帮学妹做的一个项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 基于Selenium爬虫抖音热点信息系统 二、项目功能 庭院漫游:第一人称视…

作者头像 李华
网站建设 2026/8/21 22:58:17

REDSearcher框架:低成本实现AI智能体长视野复杂搜索任务

1. 项目概述:当搜索任务变得“又长又远” 在AI智能体(Agent)领域,我们常常会遇到一种令人头疼的场景:需要让一个智能体去完成一个“长视野”(Long-Horizon)的复杂搜索任务。这可不是简单的“帮我…

作者头像 李华
网站建设 2026/8/21 22:57:50

BiliLocal:给本地视频加弹幕的完整指南

BiliLocal:给本地视频加弹幕的完整指南 【免费下载链接】BiliLocal add danmaku to local videos 项目地址: https://gitcode.com/gh_mirrors/bi/BiliLocal 把视频文件丢进播放器,画面里空无一字——离线追番,这大概是很多用户最没归属…

作者头像 李华
网站建设 2026/8/21 22:57:49

ARMOR++:基于多域基元与智能体编排的可迁移深度伪造攻击方法

1. 从“矛”与“盾”的军备竞赛说起:为什么我们需要可迁移的深度伪造攻击?在深度伪造检测这个领域,我们正目睹一场典型的“矛”与“盾”的军备竞赛。检测器(盾)不断进化,从最初基于面部光流、眨眼频率的简单…

作者头像 李华