|
改个网页上的网页字,居然要装一个几十兆的修改软件,这事本身就挺离谱的工具。前阵子帮朋友调一个落地页的网页文案,对方发来截图,修改说标题字号太小、工具按钮颜色偏暗、网页底下那行免责声明最好删掉。修改我打开浏览器开发者工具,工具右键检查元素,网页三分钟改完,修改截图发回去。工具朋友愣了半天,网页问用的修改什么插件。我说没插件,工具浏览器自带的。 很多人不知道,按 F12 或者右键“检查”,就能直接编辑当前页面的 HTML 和 CSS。改完刷新就还原,不会动到服务器上的文件。这个功能本来是给开发者调试用的,但拿来应付临时的文案预览、排版对比,比装一堆“网页修改器”实在得多。Chrome、Edge、Firefox 都支持,连 Safari 也有,只是入口藏得深一点。 当然,开发者工具只适合自己看。你要把改好的页面发给别人,或者保存下来,就得换工具。我常用的组合是 Tampermonkey 加一段自己写的脚本。Tampermonkey 是个浏览器扩展,装好之后可以往任意网页里注入 JavaScript。比如某个后台系统的表格列宽固定死了,看着难受,写三行代码把 table-layout 改成 auto,刷新即生效,永久保存。这比每次手动改强太多。 要是改的东西不涉及逻辑,纯粹是样式,Stylus 更省事。它只管 CSS,你给某个域名写规则,它自动应用。我拿它干过一件事:把某阅读网站的正文字体从宋体换成思源黑体,行高从 1.5 调到 1.8,背景色改成 #f5f0e8。写一次,以后每次打开都是这个效果。Stylus 的规则是存在本地的,不依赖网络,也不怕网站改版——改版了大不了再调一次。 说到改版,有个坑得提一下。用浏览器扩展改页面,本质上是在原页面加载完之后再动手。如果网站本身是动态渲染的,比如 React 或 Vue 写的单页应用,你的修改可能被后续的 DOM 更新冲掉。解决办法是用 MutationObserver 监听节点变化,或者在脚本里加延时。Tampermonkey 的 @run-at document-idle 有时候也不够,得配合 setInterval 轮询。这事没有银弹,得看具体页面怎么写的。 还有一类需求是批量改。比如公司内网有几十个页面,每个都要把页脚的年份从 2023 改成 2024。手动一个个改不现实。这种场景适合用 Greasemonkey 的 @match 通配符,写一条规则覆盖整个域名,脚本里遍历所有 footer 元素,替换文本内容。一次编写,全站生效。我见过有人拿这个思路给内部 Wiki 加暗色模式,效果比官方主题还好。 工具本身不复杂,复杂的是判断什么时候该用哪个。临时看一眼,开发者工具足够。长期生效,Tampermonkey 或 Stylus。要跟别人共享修改结果,直接存成 HTML 文件发过去最稳妥。别为了改一行字去装一个带界面的“网页修改大师”,那东西往往还捆绑广告。浏览器自带的、开源的、自己写几行代码的,反而更可靠。 最后说个真事。有个做运营的同事,每天要复制某个后台的数据到 Excel,格式乱得一塌糊涂。我帮她写了个 Tampermonkey 脚本,在页面上加一个“复制为表格”的按钮,点一下就把数据整理成 TSV 格式进剪贴板。她用了半年,直到系统升级换了前端框架,脚本失效。她又来找我,我说这次得用 MutationObserver 重写。她叹了口气,说能不能直接让开发改。我说能,但你得排期。她想了想,说那你还是写吧。 |