受够了空格翻页?我写了一个 Chrome 自动滚动插件,让你真正沉浸式阅读

痛点:你一定遇到过这些问题

阅读长文章时,你有没有这样的体验?

1. 空格键翻页,永远翻不到想要的位置

浏览器默认的空格键翻页,一按就是整屏跳过去,经常跳过关键内容。你得来回滚动找刚才读到哪了,阅读节奏完全被打断。

2. 手动滚轮,手指累得够呛

读一篇万字长文,你得不停地滚鼠标滚轮。读技术文档就更夸张了,一边看一边滚,注意力全被分散了。

3. 现有自动滚动插件,不够好用

Chrome 应用商店里也有一些自动滚动插件,但普遍存在这些问题:

  • 速度调节不够精细,要么太快要么太慢
  • 没有方便的快捷键暂停机制,想停下来看某段内容很麻烦
  • 交互逻辑粗糙,滚动中点击页面或者用滚轮都会导致混乱

所以我造了个轮子:Auto Scroll Reader

GitHub 地址:github.com/s2265681/au...

一款轻量级 Chrome 自动滚动插件,让你解放双手,沉浸阅读。

核心特性

1. 匀速丝滑滚动,告别空格跳页

插件采用 setInterval + 像素级滚动的方案,而不是浏览器原生的 scrollBy({ behavior: 'smooth' })。每次只滚动 15.5 个像素,间隔 16 60ms,实现真正的匀速丝滑滚动,阅读体验就像在看一条平稳流动的文字河流。

2. 10 档速度,精细可调

提供 1-10 档速度调节,覆盖从「逐字细读」到「快速浏览」的全部场景:

速度档位 滚动间隔 每次像素 适合场景
1 (最慢) 56ms 1px 逐字精读、代码阅读
3 (默认) 46ms 2px 普通文章阅读
5 36ms 3px 快速浏览
10 (最快) 16ms 5.5px 速览/找内容

你可以通过 Popup 面板的滑块调节,也可以直接用左右方向键实时调速,页面会弹出 Toast 提示当前速度,完全不用打开插件面板。

3. 空格键一键暂停/继续

这是我最满意的设计。按下 Space 键即可暂停/恢复滚动,和阅读场景天然契合:

  • 看到感兴趣的段落?空格暂停,慢慢看
  • 看完了?空格继续,接着滚
  • 输入框内打字时?自动屏蔽,不会误触发

再也不用去找鼠标点按钮了。

4. 智能暂停机制

插件不是"一根筋"地滚动,它能感知用户的操作意图:

  • 鼠标滚轮:滚动中你突然用滚轮,自动暂停,空格可恢复
  • 点击页面:点击空白区域自动暂停(点击链接和按钮不受影响)
  • 触摸滑动:移动端触摸操作同样会暂停

这意味着你随时可以"接管"控制权,不需要刻意去关闭自动滚动。

5. 智能识别滚动容器

很多网站的正文并不在 window 上滚动,而是在某个 div 容器内。插件会自动检测页面中可滚动的容器(匹配 mainarticle[class*="content"][class*="reader"] 等语义化标签),确保在各种页面布局下都能正常工作。

6. 全局开关 + 跨 Tab 同步

Popup 面板提供了一个总开关,关闭后所有页面的自动滚动都会停止,快捷键也不会响应。开关状态通过 chrome.storage.sync 存储,跨 Tab 实时同步

快捷键一览

快捷键 功能
Space 开始 / 暂停滚动
减速
加速

就这三个键,足够了。

技术实现亮点

作为一个开发者,简单聊聊技术细节:

Manifest V3

插件基于 Chrome 最新的 Manifest V3 规范开发,使用 Service Worker 作为 background script,符合 Chrome 未来的扩展标准。

防重复注入

javascript 复制代码
if (window.__autoScrollReader) return;
window.__autoScrollReader = true;

Content Script 通过全局标记防止重复注入,避免多次执行导致多个滚动定时器同时工作。

自动注入已打开的 Tab

安装或更新插件后,会自动给所有已打开的标签页注入 Content Script,无需刷新页面即可使用。

输入框保护

inputtextareaselect 以及 contentEditable 元素中,快捷键不会被拦截,确保正常输入不受影响。

使用方式

安装

  1. 下载项目:前往 GitHub 仓库,点击 Code → Download ZIP 并解压
  2. 打开 Chrome,进入 chrome://extensions/
  3. 开启右上角的 开发者模式
  4. 点击 加载已解压的扩展程序,选择解压后的文件夹
  5. 完成!在工具栏点击插件图标即可使用

使用

  1. 打开任意文章页面
  2. Space 键开始自动滚动(或点击插件面板的「开始滚动」按钮)
  3. 方向键实时调速
  4. 再按 Space 暂停,随时恢复

适用场景

  • 阅读掘金、知乎、Medium 等平台的长文章
  • 浏览技术文档和 API 文档
  • 看小说、新闻、公众号文章
  • 代码 Review 时自动滚动代码
  • 任何需要"解放双手"的阅读场景

写在最后

这个插件的代码非常简洁,总共就四个文件,零依赖,纯原生 JavaScript 实现。如果你也受够了空格键翻页和手动滚轮,不妨试试。

GitHub 地址:github.com/s2265681/au...

欢迎 Star、提 Issue、提 PR,也欢迎在评论区交流你的使用体验!


如果这篇文章对你有帮助,别忘了点个赞 👍

相关推荐
东风破_19 小时前
Docker 基础:为什么需要容器?
前端·后端·nginx
东风破_20 小时前
Docker 实战:使用 Nginx 作为容器入口代理 Node 服务
前端·后端·nginx
你别说话了20 小时前
Vue项目解决跨域
前端·javascript·vue.js
唐青枫21 小时前
http-server:别再双击 index.html,一条命令把目录变成网站
前端·javascript
网安蟹佬霸21 小时前
OSINT开源情报收集实战:从信息搜集到资产测绘(2026最新万字保姆级指南)
前端·网络·安全·web安全·网络安全·开源
a1117761 天前
3D历史建筑展览馆 THreeJS 开源
前端·开源
单线程_011 天前
【源码阅读】Vue3 Tokenizer 词法分析器完整状态机流转深度梳理(3.4+ 新版架构)
前端
PBitW1 天前
PM 丢来 3 个 Excel、12 个功能、4 种情形?用 TRAE Work 30 分钟整理成前端开发文档
前端·trae
风骏时光牛马1 天前
AIAgent高可用架构:弹性容错与故障自愈的落地实践
前端
IT_陈寒1 天前
Vue的响应式什么时候会失灵?这个坑我踩了
前端·人工智能·后端