乐于分享
好东西不私藏

用油猴脚本优化微信公众号PC端阅读体验

用油猴脚本优化微信公众号PC端阅读体验

即使在这个视频时代,我依然是文字深度内容的拥趸——尤其是微信公众号体系下的。

阅读长文章,我是习惯在电脑上,屏幕大,比手机看着舒服。

不过因为我的主力电脑iMac是23寸的5K屏,所以用浏览器打开微信公众号文字,那个字是小得很,大大浪费了硕大屏幕的空间。下图就是浏览器缺省100%显示倍率下,一篇公众号文章在我屏幕上的显示效果。

所以,很长一段时间,我的浏览器,默认缩放倍率是125%,看微信公众号时,甚至要放大至200%。

但有个问题,Edge等浏览器的缩放倍率,是基于网站域名的,所以同样的放大倍率一旦进入微信公众号后台,就没法看了。

如何让放大只针对微信公众号的文章,和大模型讨论了半天,发现曾经最复杂,但是如今在大模型Vibe Coding时代,成了最简单的解决方案——写一段Tampermonkey的脚本。

经历过FireFox鼎盛时代的用户,对于油猴(Greasemonkey)不会陌生,那是当时最出名的浏览器脚本注入工具。

当然伴随Chrome兴起,这类软件的扛把子,就成了Tampermonkey(篡改猴)。

不过我习惯上,还是会将这类脚本,称为“油猴脚本”,本文的标题也是如此。

油猴脚本,本质上就是一个Javascript脚本,通过注入网页来实现各种神奇的工作。

以前,只能在各类网站上下载高手写的脚本,因为我不会Javascript。

但现在有大模型写代码,一切就不难了。

和大模型几轮交互,告诉它我需要做什么,它很快就能给出下面这段代码了。

这段代码,主要做了三件事:

  1. 调整字体大小。我把正文改成了24号,标题改成34号;
  2. 调整微信公众号文章的宽度,拓展到1000px;
  3. 隐藏了页面底部的公众号账号信息(包含浏览器中用不了的点赞、收藏等按钮)。这些模块只在微信内有用,但在浏览器下,会遮挡一行正文,用空格或者PageDown翻页时,会错过被遮挡的一行,造成阅读不连贯,删除后就不妨碍阅读了。
// ==UserScript==// @name         微信公众号大字宽屏版(隐藏悬浮底栏版)// @namespace    http://tampermonkey.net/// @version      1.4// @description  放大微信公众号标题和正文(含span内联样式)、同步撑宽页面、并彻底隐藏遮挡正文的账号互动底栏// @match        https://mp.weixin.qq.com/s*// @grant        none// @run-at       document-end// ==/UserScript==(function() {    'use strict';    // 1. 同步撑宽外层容器,给大字号留出足够的横向空间    const container = document.querySelector('.rich_media_area_primary_inner');    if(container) {        container.style.setProperty('max-width''1000px''important');    }    // 2. 注入全局 CSS,统一碾压标题和正文的所有字号,并隐藏底栏    const style = document.createElement('style');    style.innerHTML = `        /* ======= 隐藏遮挡正文的账号信息/互动底栏 ======= */#js_article_bottom_bar,        .bottom_bar_wrp,        .js_temp_bottom_bar {            display: none !important;            visibility: hidden !important;            height: 0 !important;            opacity: 0 !important;        }        /* ======= 标题部分 ======= */        .rich_media_title {            font-size: 34px !important;            line-height: 1.4 !important;            font-weight: 700 !important;            margin-bottom: 20px !important;        }        .rich_media_title * {            font-size: 34px !important;        }        /* ======= 正文部分 ======= */        .rich_media_content {            font-size: 24px !important;            line-height: 1.8 !important;        }        /* 强行碾压正文内部所有子标签(包含你的 span 等)的内联字号 */        .rich_media_content * {            font-size: 24px !important;            line-height: 1.8 !important;        }    `;    document.head.appendChild(style);})();

下图是启用这个脚本后,同一篇文章在我的浏览器中的显示效果,设置的是100%的缩放比率。由于我的浏览器,日常全局缩放是125%,所以实际字体显示还会再大一点,更适合我这样中老年人的眼睛。