--- theme: fancy --- > **实战推荐：** > > * [不仅免费，还开源？这个 AI Mock 神器我必须曝光它](https://juejin.cn/post/7578793960627486746) > 那是一个平静的下午。 > > 我正在掘金上摸鱼写文章，代码编辑器在另一个屏幕上装模作样地躺着。 > > 突然，一个熟悉的声音从身后传来： > > **"小明，在干嘛呢？"** > > 心跳瞬间飙到 180，肾上腺素狂飙。我的手指以肌肉记忆般的速度按下了 `Alt+Q`。 > > 0.1 秒后—— > > 屏幕上的掘金文章瞬间蒸发，取而代之的是一个朴实无华的百度首页。 > > 我淡定转身，面不改色： **"老板，正准备查个技术问题！"** > > 老板满意地点点头，拍了拍我的肩膀："不错，要多钻研。" 然后转身离开。 > > 我长舒一口气，心率逐渐平复。再次按下 `Alt+Q`——掘金文章完美归位。 > > 这不是科幻片，也不是魔术。 > > 这是我上周刚撸出来的 **浏览器伪装插件** —— 一个真正的"职场求生神器"。 > > 今天，我就把这个插件制作过程，毫无保留地分享给你。 ### 先看效果：按下 `Alt+Q`显示百度界面，再次按下 `Alt+Q`回到原来页面 ![摸鱼插件效果.gif](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2bc44c58392841c2b1e534894122e532~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiN5LiA5qC355qE5bCR5bm0Xw==:q75.awebp?rk3s=f64ab15b&x-expires=1768289264&x-signature=vZkFTlthPlI4V8a7IDF5uBb2Obc%3D) ## 需求分析 ### 核心功能 * **一键切换**：按快捷键（Alt+Q）0.1秒瞬间切换 * **完美伪装**：标题、图标、页面内容三位一体 * **无缝恢复**：再按一次，一切如初 * **兼容性强**：支持99%的网站（包括掘金、知乎、B站...） ## 立即使用 **5分钟搞定安装**：复制代码 → 创建文件 → 加载扩展 → 开始使用！ #### 📦 获取完整代码 👉 [GitHub: https://github.com/Teernage/disguise-extension/tree/main](https://github.com/Teernage/disguise-extension/tree/main) **如果对你有帮助，欢迎 Star ⭐ 支持！** ## 实现过程 ### 第一步：创建插件结构 disguise-extension/ ├── manifest.json # 插件配置文件 ├── background.js # 后台脚本 ├── disguise.js # 核心逻辑 └── rules.json # 网络请求规则 ### 第二步：配置 manifest.json ```json { "manifest_version": 3, "name": "网站伪装器", "version": "1.0", "permissions": ["activeTab", "scripting", "declarativeNetRequest"], "host_permissions": [""], "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": [""], "js": ["disguise.js"] } ], "declarative_net_request": { "rule_resources": [ { "id": "remove_frame_headers", "enabled": true, "path": "rules.json" } ] }, "commands": { "toggle": { "suggested_key": { "default": "Alt+Q" }, "description": "切换伪装" } } } ``` **关键配置说明：** * `permissions`：申请必要权限 * `content_scripts`：在所有网页注入脚本 * `declarativeNetRequest`：修改 HTTP 响应头 * `commands`：注册快捷键 ### 第三步：处理快捷键（background.js） ```js // 监听快捷键 chrome.commands.onCommand.addListener(async (command) => { if (command === 'toggle') { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true, }); chrome.tabs.sendMessage(tab.id, { action: 'toggle' }); } }); ``` **工作流程：** ```js 用户按 Alt+Q ↓ background.js 监听到快捷键 ↓ 发送消息到当前标签页 ↓ disguise.js 接收消息并执行切换 ``` #### 💡 深入理解脚本通信机制看到这里，你可能好奇：**background.js 和 disguise.js之间是如何通信的？为什么能跨页面传递消息？** 如果你想深入了解它们之间真实的运行上下文与消息链路，强烈推荐阅读： 👉 [大部分人都错了！这才是 Chrome 插件多脚本通信的正确姿势](https://juejin.cn/post/7573521516324732955) 这篇文章用原理+示例拆解了常见误区与正确做法，能帮你更透彻地理解本插件的通信机制。 ### 第四步：核心伪装逻辑（disguise.js） ```js const config = { url: 'https://www.baidu.com/', title: '百度一下', }; let isDisguised = false; let originalTitle = document.title; let originalIcon = null; // 接收快捷键消息 chrome.runtime.onMessage.addListener((msg) => { if (msg.action === 'toggle') { toggle(); } }); function toggle() { isDisguised = !isDisguised; let iframe = document.getElementById('work-iframe'); if (isDisguised) { // 保存原始图标 const iconLink = document.querySelector('link[rel*="icon"]'); if (iconLink) originalIcon = iconLink.href; // 修改标题和图标 document.title = config.title; changeFavicon(`${config.url}/favicon.ico`); // 创建或显示 iframe if (!iframe) { iframe = document.createElement('iframe'); iframe.id = 'work-iframe'; iframe.src = config.url; // 设置iframe样式 Object.assign(iframe.style, { position: 'fixed', top: '0', left: '0', width: '100vw', height: '100vh', zIndex: '2147483647', border: 'none', background: 'white', }); // 添加加载错误处理 iframe.onerror = () => { console.warn('iframe 加载失败，可能被跨域阻止'); showFallbackMessage(iframe); }; document.body.appendChild(iframe); } iframe.style.display = 'block'; } else if (iframe) { // 恢复原始标题和图标 document.title = originalTitle; if (originalIcon) { changeFavicon(originalIcon); } else { // 如果没有原始图标，移除当前图标 const currentIcon = document.querySelector('link[rel*="icon"]'); if (currentIcon) currentIcon.remove(); } iframe.style.display = 'none'; } } function changeFavicon(iconUrl) { // 移除所有现有的图标链接 const existingIcons = document.querySelectorAll('link[rel*="icon"]'); existingIcons.forEach((icon) => icon.remove()); // 创建新的图标链接 const link = document.createElement('link'); link.rel = 'icon'; link.type = 'image/x-icon'; link.href = iconUrl; document.head.appendChild(link); } // 当 iframe 被阻止时显示 404 页面 function showFallbackMessage(iframe) { const fallback = document.createElement('div'); fallback.id = 'fallback-message'; fallback.innerHTML = `

404

页面未找到

抱歉，您访问的页面不存在或已被删除。

返回首页

`; iframe.style.display = 'none'; document.body.appendChild(fallback); } ``` ### 第五步rules.json 很多网站（如百度）设置了 `X-Frame-Options` 响应头，禁止被 iframe 嵌入。我们需要通过 `declarativeNetRequest` 移除这些限制： ```json [ { "id": 1, "priority": 1, "action": { "type": "modifyHeaders", "responseHeaders": [ { "header": "X-Frame-Options", "operation": "remove" }, { "header": "Content-Security-Policy", "operation": "remove" } ] }, "condition": { "urlFilter": "*", "resourceTypes": ["sub_frame"] } } ] ``` **作用：** * 移除 `X-Frame-Options` 响应头 * 移除 `Content-Security-Policy` 响应头 * 允许任何网站被 iframe 嵌入 ## 技术细节 ### 1. 为什么用 iframe？ **方案对比：** | 方案 | 优点 | 缺点 | | ------------- | ---------- | ---------- | | **修改 DOM** | 简单 | 无法完美还原复杂网站 | | **截图替换** | 真实 | 无法交互 | | **iframe 嵌入** | 完美伪装 + 可交互 | 可能被跨域阻止 | **最终选择：** iframe + 跨域绕过 ### 2. 如何处理跨域限制？ #### 问题：很多网站设置了 `X-Frame-Options: DENY`，禁止被 iframe 嵌入。 #### 解决方案：使用 Chrome Extension 的 `declarativeNetRequest` API，在响应到达浏览器前移除这些响应头。 ```js { "action": { "type": "modifyHeaders", "responseHeaders": [ { "header": "X-Frame-Options", "operation": "remove" }] } } ``` **原理：** ```js 服务器返回响应 ↓ X-Frame-Options: DENY ↓ 插件拦截并移除响应头 ↓ 浏览器接收到无限制的响应 ↓ iframe 成功加载 ✅ ``` ## 安装使用 ### 安装：开发者模式加载 1. 打开 Chrome 浏览器 2. 访问 `chrome://extensions/` 3. 开启「开发者模式」 4. 点击「加载已解压的扩展程序」 5. 选择`disguise-extension`文件夹 ![安装摸鱼插件.gif](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f2d16a6105cc4cac9c8249239656e5b8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiN5LiA5qC355qE5bCR5bm0Xw==:q75.awebp?rk3s=f64ab15b&x-expires=1768289264&x-signature=aHSw0dUPediEylTgc6yqFc%2BCKLU%3D) ### 用法 1. **访问任意网站**（如掘金） 2. **按 Alt+Q** 3. **页面瞬间变成百度首页** 4. **再按 Alt+Q 恢复** ### 自定义伪装网站修改 `disguise.js` 中的配置： const config = { url: 'https://www.baidu.com/', // 伪装的网站 title: '百度一下', // 标签页标题 }; > **重要提醒：** 此插件仅供学习交流，请勿在工作时间摸鱼！🤣 > > 如果觉得对您有帮助，欢迎点赞 👍 收藏 ⭐ 关注 🔔 支持一下！ > > * [Vue3 后台分页写腻了？我用 1 个 Hook 删掉 90% 重复代码（附源码）](https://juejin.cn/post/7549096640340426802) > > * [⚡ 一个Vue自定义指令搞定丝滑拖拽列表，告别复杂组件封装 > ](https://juejin.cn/post/7511332054941188147) > > * [🔥 这才是 Vue 驱动的 Chrome 插件工程化正确打开方式](https://juejin.cn/post/7543806966926802971) > > * [ 老板问我：AI真能一键画广州旅游路线图？我用 MCP 现场开图](https://juejin.cn/post/7566299971643424819) > > * [【前端效率工具】：告别右键另存，不到 50 行代码一键批量下载网页图片](https://juejin.cn/post/7559124639323242506) > > * [ 女朋友炸了：刚打开的网页怎么又没了？我反手甩出一键恢复按钮！](https://juejin.cn/post/7561612065707065390) > > * [ 你家孩子又偷玩网页游戏? 试试这个防沉迷工具](https://juejin.cn/post/7562859113246343178) > > * [ 她说想要浪漫，我把浏览器鼠标换成了柴犬，点一下就有烟花（附源码）](https://juejin.cn/post/7563830723057647643) > > * [ 女朋友被链接折磨疯了，我写了个工具一键解救](https://juejin.cn/post/7566677296801071155)