![]()
一个刚入行的开发者,第一次公开发布项目就敢叫板Tampermonkey。不是狂妄,是他真把开发时间从45分钟砍到了3分钟。
Page Proxy的创造者算过一笔账:过去写一段用户脚本,15分钟写代码,30到60分钟花在调试和打磨上。真正折磨人的不是编程,是来回切换窗口、复制CSS选择器、刷新页面查控制台的机械劳动。
他决定把这套流程塞进一个浏览器扩展里。
从"能用就行"到"再快一点"
用户脚本(userscript)是个老东西。装个Tampermonkey或Greasemonkey,写几行JavaScript,就能强行修改任何网页的行为。去广告、改布局、自动化操作,技术社区玩了十几年。
但工具本身几乎没进化过。开发者还在用二十年前的调试方式:console.log打印变量,F5刷新页面,眼睛在代码编辑器、浏览器控制台、Elements面板之间来回跳。
Page Proxy的创造者「想集成代码生成和选择器生成,让开发速度接近DevTools的体验」。这是他设计之初的核心目标。
具体怎么做?他在扩展里塞了一个可视化元素选择器。点击网页任意元素,自动生成CSS选择器代码,直接插进脚本里。不需要手动复制,不需要担心拼写错误。
更狠的是预设API。他整理了自己脚本里的重复模式:键盘事件监听、模拟按键触发、DOM操作封装,全部做成开箱即用的函数。
比如这段曾经要手写七八行的代码:
document.addEventListener("keydown", ev => { if (!ev.altKey) return; if (ev.code === "KeyV") { runFunction(); } });
现在变成调用一个内置方法。参数填进去,逻辑自动生成。
走弯路的教训:为什么不做成网页应用
项目早期有个危险的想法。创造者「原本想做成网页应用,主要是为了独特」。技术上完全可行,用iframe嵌套目标网站,旁边放代码编辑器,听起来很酷。
现实很快打脸。CSP(内容安全策略,Content Security Policy)拦截了一大半网站。Cookie无法持久化,登录状态一刷新就丢,任何需要账号的内容都进不去。
他承认:「独特不等于好。」
转向浏览器扩展是更务实的选择。Chrome和Firefox的侧边栏API让工具常驻在浏览器边缘,像DevTools一样随叫随到,又不需要离开当前页面。
这个决策直接决定了产品的可用性边界。网页应用方案 would've been dead on arrival( would've 一推出就死),而扩展形态能真正介入用户的日常工作流。
设计洁癖:拒绝蓝紫渐变
技术选型之外,视觉设计也花了心思。创造者自学Figma,「一直想自己设计UI,这次终于实现了」。
他特意避开了AI生成网站最常见的蓝紫渐变配色,用Realtime Colors工具选了一套橙绿组合。理由很简单:看腻了。
这个细节暴露了他的产品嗅觉。用户脚本工具的受众是开发者,而开发者对「AI味」设计有本能的抵触。橙绿配色在工具类产品里足够少见,反而成了记忆点。
早期设计草图和最终产品已经差异很大。他放出了一张「一小时随手画的流程图」,功能清单密密麻麻:元素选择器、代码生成器、脚本管理器、实时预览……
核心逻辑没变:把分散在多个窗口的操作,压缩到一个界面里完成。
第一次发布,第一次验证
这是创造者的首个公开发布项目。他在技术社区发帖求反馈,语气谨慎:「请试用并给出反馈,非常感谢。」
没有融资故事,没有增长黑客策略,只有一个开发者解决自己痛点的朴素记录。但数据已经说明问题——如果他的效率提升比例具有普遍性,这个工具可能撬动一个被忽视多年的细分市场。
Tampermonkey的Chrome商店页面显示超过1000万用户。Greasemonkey、Violentmonkey等替代品各有百万级安装量。但这些工具的管理界面十几年没变过,脚本编辑仍然是纯文本框。
Page Proxy的赌注是:可视化辅助不会让硬核开发者反感,反而能降低脚本编写的心理门槛。毕竟,能用3分钟搞定的事,没人愿意花45分钟。
项目目前支持Chrome和Firefox,功能集中在侧边栏的元素抓取和代码片段生成。创造者没有透露后续路线图,但那张早期流程图里未实现的功能——脚本版本管理、社区分享、自动化测试——留下了足够的想象空间。
你会为了省下的40分钟,换一个脚本管理器吗?
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.