拓冰网站定制 
上班摸鱼最怕什么老板突然出现在身后。 于是我用一段bookmarklet书签小工具实现了一个老板键在任何网页上点一下屏幕瞬间全屏变成代码编辑器 / 数据表格 / 在线会议 / 工作文档老板走后再点一下或按Esc一切原样回来。 不需要安装浏览器扩展、不需要后端、纯原生 HTML/CSS/JS单文件即可运行。在线体验地址点开即用建议用电脑浏览器https://dochost.co/d/v7ki5ghd开源仓库MIT欢迎 Star / Forkhttps://dochost.co/d/v7ki5ghd下面把核心实现拆开讲清楚文末附完整源码地址。一、先看效果平时它是一个摸鱼看板有下班倒计时还会实时计算今天打工已经赚到多少钱每秒进账多少。按下触发键默认反引号也可以点页面上的按钮整个屏幕立刻被一个全屏遮罩盖住变成一个以假乱真的代码编辑器左侧有资源管理器、顶部有标签页、代码带语法高亮、还有闪烁的光标。伪装状态下按1 / 2 / 3 / 4可以在代码、表格、会议、文档四种界面之间快速切换按Esc或再点一次书签即可恢复。连浏览器标签页的标题都会一起伪装比如变成季度工作进展汇报 - 文档防止从标签栏露馅。四种伪装界面全部是原创的通用样式没有使用任何真实软件的商标或界面也不含任何真实数据。二、为什么用 bookmarklet而不是浏览器扩展常见的老板键一般做成浏览器扩展但扩展有几个麻烦要打包、要上架审核Chrome、Edge 各自一套安装也麻烦扩展权限大用户天然警惕换台电脑、换个浏览器就不能用。而bookmarklet书签小工具本质上就是一个网址以javascript:开头的书签。把它拖到书签栏后在任何网页点一下浏览器就会在当前页面执行这段 JS。它无需安装、无需审核、跨浏览器通用只在你主动点击时运行不常驻、不后台联网代码完全透明右键编辑书签就能看到全部逻辑。关键问题是怎么把一大段功能塞进一个书签里答案是Function.prototype.toString()。三、核心实现拆解3.1 写一个自包含的伪装函数我把所有伪装逻辑封装进一个函数BOSS_KEY(cfg)。它做的事动态创建一个style注入伪装界面所需的全部 CSS创建一个全屏position:fixed; inset:0; z-index:2147483647的遮罩层根据配置渲染对应界面代码 / 表格 / 会议 / 文档监听keydown按Esc关闭、按1~4切换界面同时伪装document.title。函数骨架大致是这样有删减function BOSS_KEY(cfg){ cfg Object.assign({ disguise:code, title:季度工作进展汇报 - 文档, loop:true }, cfg||{}); var ID__boss_key_overlay__; var oldTitledocument.title, currentcfg.disguise, timers[]; function shutdown(){ // 解除伪装 var odocument.getElementById(ID); if(o)o.remove(); var sdocument.getElementById(ID-style); if(s)s.remove(); document.removeEventListener(keydown, onKey, true); timers.forEach(clearInterval); timers[]; document.titleoldTitle; } if(document.getElementById(ID)){ // 防止重复注入已存在则直接关闭 if(typeof window.__boss_key_shutdownfunction) window.__boss_key_shutdown(); return; } window.__boss_key_shutdownshutdown; // ... 注入 CSS、创建遮罩、根据 current 渲染对应视图 ... function onKey(e){ if(e.keyEscape){ shutdown(); return; } if(cfg.loop [1,2,3,4].indexOf(e.key)0){ timers.forEach(clearInterval); timers[]; currentorder[parseInt(e.key,10)-1]; render(); } } document.addEventListener(keydown, onKey, true); render(); document.titlecfg.title; }几个值得注意的细节用固定的 DOM id__boss_key_overlay__做幂等如果遮罩已经存在再次触发就直接关闭而不是叠两层。关闭时要彻底清理移除遮罩和样式、移除事件监听、清掉所有定时器、还原标题避免在别人的网页里留下垃圾。事件监听用捕获阶段第三个参数true保证按键能被优先拿到。3.2 关键技巧把函数序列化进 javascript: URL书签里没法直接写一大段函数但我们可以在安装页里利用toString()拿到函数的完整源码字符串再拼进javascript:URLfunction makeBookmarklet(cfg){ var src ( BOSS_KEY.toString() )( JSON.stringify(cfg) );; return { url: javascript: encodeURIComponent(src), len: src.length }; }这里发生了三件事BOSS_KEY.toString()返回这个函数的完整源代码文本用(函数源码)(配置)的形式包成立即执行表达式配置通过JSON.stringify内联进去最后encodeURIComponent编码前面加上javascript:前缀就得到了书签的网址。页面上那个绿色的拖我到书签栏按钮它的href就是这样生成的var bm makeBookmarklet(readCfg()); bmLink.href bm.url;用户把按钮拖到书签栏等于把这段javascript:网址存成了书签以后在任何页面点它浏览器就会执行BOSS_KEY(配置)。小提示javascript:书签在页面上下文里运行所以它能操作当前页的 DOM、注入全屏遮罩这也是它比单独开一个伪装网页更强的地方——它是在你正在摸鱼的那个页面原地伪装不会留下多余标签页。3.3 伪装视图用字符串模板拼出以假乱真的界面四种界面本质上都是返回一段 HTML 字符串再塞进遮罩。以代码编辑器为例我准备了一组带语法高亮 class 的代码行渲染时加上行号、侧边栏、标签页和一个闪烁光标var codeLines [ span classtok-c// 季度数据汇总工具/span, span classtok-kfunction/span span classtok-fbuildQuarterReport/span(rows) {, span classtok-kconst/span total rows.span classtok-freduce/span((s,r)sr.value, span classtok-n0/span);, // ... ]; function viewCode(){ var lns codeLines.map(function(l,i){ return div classlnspan classno(i1)/spanspan classcode-linel/span/div; }).join(); return div classcode ... lns ... /div; }光标闪烁纯靠 CSS 动画.cursor{display:inline-block;width:8px;height:16px;background:#9cd0ff;vertical-align:-3px;animation:bkblink 1s steps(1) infinite} keyframes bkblink{50%{opacity:0}}在线会议界面还会每隔 1.8 秒随机高亮一位正在发言的同事并实时更新会议时长让画面是活的meetTimersetInterval(function(){ tiles.forEach(function(t){ t.classList.remove(speak); }); tiles[Math.floor(Math.random()*tiles.length)].classList.add(speak); },1800);3.4 彩蛋实时今日已赚 / 每秒进账摸鱼看板上最有情绪价值的一块是看着自己摸鱼的每一秒还在进账。计算逻辑很简单var JOB_DEF{salary:8000, workDays:21.75, start:09:00, end:18:00}; function tickEarn(){ var st2m(jobCfg.start), et2m(jobCfg.end), worke-s; var daySalaryjobCfg.salary/(jobCfg.workDays||21.75); // 日薪 月薪 / 计薪天数 var ratework0 ? daySalary/(work*60) : 0; // 每秒进账 var minsnow.getHours()*60now.getMinutes()now.getSeconds()/60; var workedMath.max(0,Math.min(work,mins-s)); // 今天已工作分钟数 var earnedworked*60*rate; // 今日已赚 // ...更新页面周末则显示周末休息 } setInterval(tickEarn,1000);月薪、计薪天数、上下班时间都可以在页面上自定义存在localStorage里下次打开还在。以月薪 8000、每月计薪 21.75 天、朝九晚六为例日薪约 367.8 元每秒进账约 0.011 元——摸鱼五分钟大概赚了三块多属于打工人的一点精神胜利。四、在线体验 完整源码在线体验点开即用https://dochost.co/d/v7ki5ghdGitHub 源码MIT Licensehttps://dochost.co/d/v7ki5ghd打开页面后可以直接点立即体验按钮看伪装效果按Esc返回把绿色按钮拖到书签栏就能在任何网页一键使用在设置里改成自己的月薪、上下班时间和喜欢的伪装界面点生成我的老板键即可。五、写在最后这个小工具用到的知识点其实很朴素Function.prototype.toString()序列化、动态注入 CSS/DOM、全屏遮罩、键盘事件、localStorage持久化——但组合起来确实能解决一个痛点也算是 bookmarklet 这种古老技术的一个有趣应用。几点说明项目基于 MIT 协议开源仅供娱乐与学习请合理安排工作、注意休息所有伪装界面均为原创通用样式不含任何真实公司、软件商标或个人数据书签只在本地运行、不联网、不上传任何数据。如果觉得有意思欢迎到 GitHub 给个 Star也欢迎在评论区交流 bookmarklet 的其他玩法 我用一个 bookmarklet 做了个“老板键”：任意网页一键切换成“认真工作”界面（附在线体验+源码）
上班摸鱼最怕什么老板突然出现在身后。 于是我用一段bookmarklet书签小工具实现了一个老板键在任何网页上点一下屏幕瞬间全屏变成代码编辑器 / 数据表格 / 在线会议 / 工作文档老板走后再点一下或按Esc一切原样回来。 不需要安装浏览器扩展、不需要后端、纯原生 HTML/CSS/JS单文件即可运行。在线体验地址点开即用建议用电脑浏览器https://dochost.co/d/v7ki5ghd开源仓库MIT欢迎 Star / Forkhttps://dochost.co/d/v7ki5ghd下面把核心实现拆开讲清楚文末附完整源码地址。一、先看效果平时它是一个摸鱼看板有下班倒计时还会实时计算今天打工已经赚到多少钱每秒进账多少。按下触发键默认反引号也可以点页面上的按钮整个屏幕立刻被一个全屏遮罩盖住变成一个以假乱真的代码编辑器左侧有资源管理器、顶部有标签页、代码带语法高亮、还有闪烁的光标。伪装状态下按1 / 2 / 3 / 4可以在代码、表格、会议、文档四种界面之间快速切换按Esc或再点一次书签即可恢复。连浏览器标签页的标题都会一起伪装比如变成季度工作进展汇报 - 文档防止从标签栏露馅。四种伪装界面全部是原创的通用样式没有使用任何真实软件的商标或界面也不含任何真实数据。二、为什么用 bookmarklet而不是浏览器扩展常见的老板键一般做成浏览器扩展但扩展有几个麻烦要打包、要上架审核Chrome、Edge 各自一套安装也麻烦扩展权限大用户天然警惕换台电脑、换个浏览器就不能用。而bookmarklet书签小工具本质上就是一个网址以javascript:开头的书签。把它拖到书签栏后在任何网页点一下浏览器就会在当前页面执行这段 JS。它无需安装、无需审核、跨浏览器通用只在你主动点击时运行不常驻、不后台联网代码完全透明右键编辑书签就能看到全部逻辑。关键问题是怎么把一大段功能塞进一个书签里答案是Function.prototype.toString()。三、核心实现拆解3.1 写一个自包含的伪装函数我把所有伪装逻辑封装进一个函数BOSS_KEY(cfg)。它做的事动态创建一个style注入伪装界面所需的全部 CSS创建一个全屏position:fixed; inset:0; z-index:2147483647的遮罩层根据配置渲染对应界面代码 / 表格 / 会议 / 文档监听keydown按Esc关闭、按1~4切换界面同时伪装document.title。函数骨架大致是这样有删减function BOSS_KEY(cfg){ cfg Object.assign({ disguise:code, title:季度工作进展汇报 - 文档, loop:true }, cfg||{}); var ID__boss_key_overlay__; var oldTitledocument.title, currentcfg.disguise, timers[]; function shutdown(){ // 解除伪装 var odocument.getElementById(ID); if(o)o.remove(); var sdocument.getElementById(ID-style); if(s)s.remove(); document.removeEventListener(keydown, onKey, true); timers.forEach(clearInterval); timers[]; document.titleoldTitle; } if(document.getElementById(ID)){ // 防止重复注入已存在则直接关闭 if(typeof window.__boss_key_shutdownfunction) window.__boss_key_shutdown(); return; } window.__boss_key_shutdownshutdown; // ... 注入 CSS、创建遮罩、根据 current 渲染对应视图 ... function onKey(e){ if(e.keyEscape){ shutdown(); return; } if(cfg.loop [1,2,3,4].indexOf(e.key)0){ timers.forEach(clearInterval); timers[]; currentorder[parseInt(e.key,10)-1]; render(); } } document.addEventListener(keydown, onKey, true); render(); document.titlecfg.title; }几个值得注意的细节用固定的 DOM id__boss_key_overlay__做幂等如果遮罩已经存在再次触发就直接关闭而不是叠两层。关闭时要彻底清理移除遮罩和样式、移除事件监听、清掉所有定时器、还原标题避免在别人的网页里留下垃圾。事件监听用捕获阶段第三个参数true保证按键能被优先拿到。3.2 关键技巧把函数序列化进 javascript: URL书签里没法直接写一大段函数但我们可以在安装页里利用toString()拿到函数的完整源码字符串再拼进javascript:URLfunction makeBookmarklet(cfg){ var src ( BOSS_KEY.toString() )( JSON.stringify(cfg) );; return { url: javascript: encodeURIComponent(src), len: src.length }; }这里发生了三件事BOSS_KEY.toString()返回这个函数的完整源代码文本用(函数源码)(配置)的形式包成立即执行表达式配置通过JSON.stringify内联进去最后encodeURIComponent编码前面加上javascript:前缀就得到了书签的网址。页面上那个绿色的拖我到书签栏按钮它的href就是这样生成的var bm makeBookmarklet(readCfg()); bmLink.href bm.url;用户把按钮拖到书签栏等于把这段javascript:网址存成了书签以后在任何页面点它浏览器就会执行BOSS_KEY(配置)。小提示javascript:书签在页面上下文里运行所以它能操作当前页的 DOM、注入全屏遮罩这也是它比单独开一个伪装网页更强的地方——它是在你正在摸鱼的那个页面原地伪装不会留下多余标签页。3.3 伪装视图用字符串模板拼出以假乱真的界面四种界面本质上都是返回一段 HTML 字符串再塞进遮罩。以代码编辑器为例我准备了一组带语法高亮 class 的代码行渲染时加上行号、侧边栏、标签页和一个闪烁光标var codeLines [ span classtok-c// 季度数据汇总工具/span, span classtok-kfunction/span span classtok-fbuildQuarterReport/span(rows) {, span classtok-kconst/span total rows.span classtok-freduce/span((s,r)sr.value, span classtok-n0/span);, // ... ]; function viewCode(){ var lns codeLines.map(function(l,i){ return div classlnspan classno(i1)/spanspan classcode-linel/span/div; }).join(); return div classcode ... lns ... /div; }光标闪烁纯靠 CSS 动画.cursor{display:inline-block;width:8px;height:16px;background:#9cd0ff;vertical-align:-3px;animation:bkblink 1s steps(1) infinite} keyframes bkblink{50%{opacity:0}}在线会议界面还会每隔 1.8 秒随机高亮一位正在发言的同事并实时更新会议时长让画面是活的meetTimersetInterval(function(){ tiles.forEach(function(t){ t.classList.remove(speak); }); tiles[Math.floor(Math.random()*tiles.length)].classList.add(speak); },1800);3.4 彩蛋实时今日已赚 / 每秒进账摸鱼看板上最有情绪价值的一块是看着自己摸鱼的每一秒还在进账。计算逻辑很简单var JOB_DEF{salary:8000, workDays:21.75, start:09:00, end:18:00}; function tickEarn(){ var st2m(jobCfg.start), et2m(jobCfg.end), worke-s; var daySalaryjobCfg.salary/(jobCfg.workDays||21.75); // 日薪 月薪 / 计薪天数 var ratework0 ? daySalary/(work*60) : 0; // 每秒进账 var minsnow.getHours()*60now.getMinutes()now.getSeconds()/60; var workedMath.max(0,Math.min(work,mins-s)); // 今天已工作分钟数 var earnedworked*60*rate; // 今日已赚 // ...更新页面周末则显示周末休息 } setInterval(tickEarn,1000);月薪、计薪天数、上下班时间都可以在页面上自定义存在localStorage里下次打开还在。以月薪 8000、每月计薪 21.75 天、朝九晚六为例日薪约 367.8 元每秒进账约 0.011 元——摸鱼五分钟大概赚了三块多属于打工人的一点精神胜利。四、在线体验 完整源码在线体验点开即用https://dochost.co/d/v7ki5ghdGitHub 源码MIT Licensehttps://dochost.co/d/v7ki5ghd打开页面后可以直接点立即体验按钮看伪装效果按Esc返回把绿色按钮拖到书签栏就能在任何网页一键使用在设置里改成自己的月薪、上下班时间和喜欢的伪装界面点生成我的老板键即可。五、写在最后这个小工具用到的知识点其实很朴素Function.prototype.toString()序列化、动态注入 CSS/DOM、全屏遮罩、键盘事件、localStorage持久化——但组合起来确实能解决一个痛点也算是 bookmarklet 这种古老技术的一个有趣应用。几点说明项目基于 MIT 协议开源仅供娱乐与学习请合理安排工作、注意休息所有伪装界面均为原创通用样式不含任何真实公司、软件商标或个人数据书签只在本地运行、不联网、不上传任何数据。如果觉得有意思欢迎到 GitHub 给个 Star也欢迎在评论区交流 bookmarklet 的其他玩法