受够了空格翻页?我写了一个 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,也欢迎在评论区交流你的使用体验!


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

相关推荐
Awu12274 小时前
🍎用 pretext 搞定输入框动态宽度:一个困扰了我三天的 CSS 问题
前端
萑澈4 小时前
我用 Cloudflare 搭了一个 FlashInbox 临时邮箱
前端·next.js
慕斯fuafua4 小时前
CSS——盒模型
前端·css
嗜好ya4 小时前
解决 Vite 项目中 import.meta.env 变量为 undefined 的问题
前端·javascript·vue.js
Mapmost4 小时前
Mapmost专题地图:解锁这场春游“热”
前端
心连欣4 小时前
JS算法入门:图解“冒泡排序”,彻底搞懂双重循环的奥义
前端·javascript
suedar4 小时前
React 16 + TDesign Table 卡死问题深度复盘
前端
浩星5 小时前
「Vue3 + Cesium 最佳实践」完整工程化方案
前端·javascript·vue.js