上班摸鱼看掘金，老板突然出现在身后...

那是一个平静的下午。

我正在掘金上摸鱼写文章，代码编辑器在另一个屏幕上装模作样地躺着。

突然，一个熟悉的声音从身后传来：

"小明，在干嘛呢？"

心跳瞬间飙到 180，肾上腺素狂飙。我的手指以肌肉记忆般的速度按下了 Alt+Q。

0.1 秒后------

屏幕上的掘金文章瞬间蒸发，取而代之的是一个朴实无华的百度首页。

我淡定转身，面不改色： "老板，正准备查个技术问题！"

老板满意地点点头，拍了拍我的肩膀："不错，要多钻研。" 然后转身离开。

我长舒一口气，心率逐渐平复。再次按下 Alt+Q------掘金文章完美归位。

这不是科幻片，也不是魔术。

这是我上周刚撸出来的 浏览器伪装插件 ------ 一个真正的"职场求生神器"。

今天，我就把这个拯救了无数程序员的插件制作过程，毫无保留地分享给你。

先看效果：按下 `Alt+Q`显示百度界面，再次按下 `Alt+Q`回到原来页面

需求分析

核心功能

一键切换：按快捷键（Alt+Q）0.1秒瞬间切换
完美伪装：标题、图标、页面内容三位一体
无缝恢复：再按一次，一切如初
兼容性强：支持99%的网站（包括掘金、知乎、B站...）

立即使用

5分钟搞定安装：复制代码 → 创建文件 → 加载扩展 → 开始使用！

📦 获取完整代码 👉 GitHub 仓库地址如果对你有帮助，欢迎 Star ⭐ 支持！

实现过程

第一步：创建插件结构

bash 复制代码

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": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "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": "切换伪装"
    }
  }
}

第三步：处理快捷键（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' });
  }
});

第四步：核心伪装逻辑（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 = `
    <div style="
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
      margin: 0;
      color: #333;
    ">
      <div style="text-align: center; max-width: 600px; padding: 40px;">
        <h1 style="
          font-size: 120px;
          margin: 0;
          color: #ddd;
          font-weight: 700;
        ">404</h1>
        
        <h2 style="
          font-size: 24px;
          margin: 20px 0;
          color: #666;
          font-weight: 400;
        ">页面未找到</h2>
        
        <p style="
          font-size: 16px;
          color: #999;
          line-height: 1.6;
          margin: 20px 0;
        ">
          抱歉，您访问的页面不存在或已被删除。
        </p>
        
        <div style="margin-top: 30px;">
          <a href="${config.url}" style="
            display: inline-block;
            padding: 12px 30px;
            background: #1a73e8;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
            transition: background 0.3s;
          " onmouseover="this.style.background='#1557b0'" 
             onmouseout="this.style.background='#1a73e8'">
            返回首页
          </a>
        </div>
      </div>
    </div>
  `;

  iframe.style.display = 'none';
  document.body.appendChild(fallback);
}

第五步rules.json

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"]
    }
  }
]

安装使用

安装：开发者模式加载

打开 Chrome 浏览器
访问 chrome://extensions/
开启「开发者模式」
点击「加载已解压的扩展程序」
选择disguise-extension文件夹

用法

访问任意网站（如掘金）
按 Alt+Q
页面瞬间变成百度首页
再按 Alt+Q 恢复

自定义伪装网站

修改 disguise.js 中的配置：

arduino 复制代码

const config = {
  url: 'https://www.baidu.com/',     // 伪装的网站
  title: '百度一下',                  // 标签页标题
};

重要提醒： 此插件仅供学习交流，请勿在工作时间摸鱼！🤣

如果觉得对您有帮助，欢迎点赞 👍 收藏 ⭐ 关注 🔔 支持一下！

上班摸鱼看掘金，老板突然出现在身后...

先看效果：按下 Alt+Q显示百度界面， 再次按下 Alt+Q回到原来页面

需求分析

核心功能

立即使用

📦 获取完整代码 👉 GitHub 仓库地址 如果对你有帮助，欢迎 Star ⭐ 支持！

实现过程

第一步：创建插件结构

第二步：配置 manifest.json

第三步：处理快捷键（background.js）

第四步：核心伪装逻辑（disguise.js）

第五步rules.json

安装使用

安装：开发者模式加载

用法

自定义伪装网站

先看效果：按下 `Alt+Q`显示百度界面，再次按下 `Alt+Q`回到原来页面

📦 获取完整代码 👉 GitHub 仓库地址如果对你有帮助，欢迎 Star ⭐ 支持！