微信读书全屏扩展:让横屏双页铺满屏幕
给微信读书网页版补上浏览器全屏和网页内沉浸模式,保留原生双页排版、翻页、目录和字号设置。介绍开发缘起、实际效果、安装更新方法与当前适配范围,附 GitHub 开源下载。
微信读书网页版可以横屏双页阅读,但阅读区域四周仍然留着比较明显的空白。即使把浏览器切到全屏,网页内部的宽高限制还在,正文也不一定能充分利用整个屏幕。
我在“得到”电子书上看到了更符合自己习惯的效果:进入全屏后,浏览器栏和工具栏收起来,阅读区域覆盖整个可用空间。于是我想给微信读书也补上这个功能。
现在做出的第一个版本叫「微信读书 · 全屏阅读」。它是一款小型浏览器扩展,只在微信读书阅读页出现。
下载 v0.1.1 安装包 · GitHub 源码 · 项目介绍
两种阅读方式
右上角有两个入口。
全屏阅读会请求浏览器进入全屏,隐藏标签栏、地址栏和网站顶栏,让横屏双页阅读区域铺满视口。
网页沉浸保留浏览器栏,只在当前窗口内扩大阅读区域。需要经常在不同标签页之间切换时,也可以使用这一种。
上图是原生横屏双页模式的实测截图。正文边距和两页之间的间隔继续保留,文字仍由微信读书自己排版。
工具栏会自动隐藏。把鼠标移到顶部、右侧或底部可以呼出;左右方向键继续翻页,目录和字号面板继续可用。按 Esc,或者点击退出按钮,会恢复原来的布局。
扩展只在 weread.qq.com/web/reader/… 阅读页显示。微信读书首页、书架和其他网站不会出现按钮,也没有额外的浏览器工具栏入口。
不需要微信读书源码
这个需求包含两个动作:让浏览器进入全屏,以及让网页内部的阅读区域使用新的空间。
“得到”的阅读器调用了全屏功能,并在进入时收起工具栏。微信读书的问题则多了一层:它的阅读区域存在宽高限制,而且正文使用 Canvas 绘制。
所以,只隐藏浏览器栏还不够;只把外层框拉宽,也不能保证正文同步变化。
扩展先通过 CSS 放开阅读容器的尺寸限制,再调用浏览器标准的 requestFullscreen(),并触发窗口的 resize 事件。微信读书自己的排版流程接到变化后,会重新分页、重绘两个 Canvas。
这保留了原有阅读器的功能,不需要拿到网站源码,也不需要重新开发书籍排版引擎。实现没有拉伸 Canvas、提取正文或调用 Vue 私有对象。标准接口的行为可以参考 MDN 的 requestFullscreen 文档。
安装方法
目前通过 GitHub 发布 ZIP 安装包,尚未上架浏览器扩展商店。
1. 下载上方的 weread-fullscreen-0.1.1.zip 并解压到一个长期保留的位置。
2. 打开 Chrome 的 chrome://extensions/;Edge 对应 edge://extensions/,开启“开发者模式”。
3. 点击“加载已解压的扩展程序”,选择刚解压的 weread-fullscreen-0.1.1 文件夹。
4. 确认这个文件夹第一层就能看到 manifest.json、content.js 和 icons。
5. 刷新微信读书阅读页,先使用微信读书自带的横屏翻页模式,再点击右上角“全屏阅读”。
最初的安装包多套了一层文件夹,实际加载时出现过“清单文件缺失或不可读取”。现在发布包已经修正,打包检查也会验证:解压目录根部有清单,清单引用的脚本和图标都存在。
从 GitHub 下载时,请选择上方明确命名的安装包。GitHub 自动生成的 Source code 包是整个源码仓库;如果使用源码,需要加载里面的 extension 子目录。
已经安装 Tampermonkey 等用户脚本管理器,也可以使用 用户脚本版。两种方式选一种即可。
更新和日常使用
ZIP 安装版不会自动更新。以后下载新版,把文件覆盖到原来加载的扩展目录,在扩展管理页点击“重新加载”,然后再刷新已经打开的微信读书阅读页。
浏览器要求全屏由用户操作触发,所以刷新后不会自动全屏。可以点击页面按钮,也可以使用 Alt+Shift+F 进入全屏、Alt+Shift+I 切换网页内沉浸。如果浏览器拒绝全屏,会提示并保留网页内沉浸模式。
当前支持到哪里
0.1.1 针对微信读书原生横屏双页翻页模式,暂不改造竖向滚动、PDF 阅读器,也没有新增单栏、三栏等排版方式。
运行链路已在 macOS Chromium 环境验证,检查了进入与退出、重新排版、翻页、目录、字号面板和工具隐藏。1200×687 视口下,阅读区域从 962×557 扩大到 1200×687;1920×1080 模拟视口下,从 1538×950 扩大到 1920×1080。
模拟视口不等于真实多显示器测试。Windows、Linux、Edge 的实机,以及 Safari、Firefox 尚未完成验证。支持 Manifest V3 的桌面 Chromium 浏览器可以按上述方式尝试安装,遇到兼容问题可以在 GitHub Issues 留下浏览器版本和复现步骤。
后续功能会围绕实际阅读中的需要继续迭代;当前先把横屏双页的全屏体验做好。
数据与开源
扩展没有后台服务、遥测或第三方 SDK,不申请额外浏览器权限,不保存书籍正文和使用记录。微信读书自身的登录、内容加载和阅读进度同步仍由网站处理。
这是独立开发的非官方工具,与微信读书、腾讯和得到没有隶属或合作关系,不改变书籍访问权限。代码采用 MIT 协议开源,完整说明见 隐私文档 和 更新记录。