在快节奏的职场环境中，偶尔需要处理一些私事或休息片刻，但总担心被同事或管理者发现。通过技术手段，我们可以构建一个“摸鱼工具”，在浏览器中快速隐藏非工作页面并切换回安全界面。本文将以一个简单的浏览器扩展为例，教你如何从零开始开发一个这样的工具。无需复杂框架，只需基础HTML、CSS和JavaScript知识。

开发前，确保你已安装Chrome或Edge浏览器（支持扩展开发）。所需文件包括：

• 一个文件夹（命名为“hide-extension”）
• 文本编辑器（如VS Code、Notepad++）
• 基本编程基础（HTML、JS、JSON）

核心功能：用户按快捷键（如Ctrl+Shift+H）时，当前页面立即显示默认安全界面（如工作文档模板），并隐藏所有非工作标签页。再次按相同键可恢复原页面状态。

首先，在“hide-extension”文件夹内创建manifest.json。这是扩展的配置文件，定义权限和脚本。

{
  "manifest_version": 3,
  "name": "超级隐藏摸鱼工具",
  "version": "1.0",
  "description": "一键隐藏非工作页面，显示安全内容",
  "permissions": ["tabs", "storage"],
  "background": {
    "service_worker": "background.js"
  },
  "commands": {
    "toggle-hide": {
      "suggested_key": {
        "default": "Ctrl+Shift+H",
        "mac": "Command+Shift+H"
      },
      "description": "切换隐藏模式"
    }
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

关键点解读：commands字段声明快捷键；background指定后台脚本处理核心逻辑；storage权限用于保存隐藏状态。

创建background.js文件，负责监听快捷键事件和管理标签页状态。

let isHidden = false;
let savedTabs = [];

chrome.commands.onCommand.addListener((command) => {
  if (command === "toggle-hide") {
    if (!isHidden) {
      // 隐藏所有非工作标签页
      chrome.tabs.query({}, (tabs) => {
        savedTabs = tabs.filter(tab => !tab.url.includes("chrome://"));
        chrome.tabs.create({ url: "about:blank" }, (blankTab) => {
          chrome.storage.local.set({ "hideTabId": blankTab.id });
        });
        savedTabs.forEach(tab => {
          chrome.tabs.update(tab.id, { active: false, highlighted: false });
        });
      });
      isHidden = true;
    } else {
      // 恢复所有标签页
      chrome.storage.local.get("hideTabId", (data) => {
        if (data.hideTabId) {
          chrome.tabs.remove(data.hideTabId);
        }
      });
      savedTabs.forEach(tab => {
        chrome.tabs.update(tab.id, { active: false, highlighted: true });
      });
      savedTabs = [];
      isHidden = false;
    }
  }
});

代码说明： 当用户按下快捷键，脚本会查询所有标签页，排除浏览器内部页面，然后创建一个空白标签作为“保护壳”。隐藏模式开启时，工作标签被标记为不活跃；恢复时，删除保护壳标签并让所有原标签重新可见。

一些用户偏好通过点击扩展图标来触发，而非依赖快捷键。创建popup.html和popup.js实现界面交互。

  
摸鱼工具
  一键隐藏
  恢复显示
  

// popup.js
document.getElementById('hideBtn').addEventListener('click', () => {
  chrome.runtime.sendMessage({ command: "toggle-hide", action: "hide" });
});
document.getElementById('restoreBtn').addEventListener('click', () => {
  chrome.runtime.sendMessage({ command: "toggle-hide", action: "restore" });
});

后台脚本需更新以支持消息监听，添加以下代码到background.js：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.command === "toggle-hide") {
    chrome.commands.onCommand.dispatch("toggle-hide");
  }
});

为了更逼真，我们可以让安全界面显示一个办公软件模板。创建secure.html作为默认页面。

  


  

    
每周工作报告
    
时间：2025年4月5日
    

      
项目
进度
      
客户需求调研
80%
      
代码审查
已完成
    
  

将background.js中的chrome.tabs.create({ url: "about:blank" })改为chrome.tabs.create({ url: chrome.runtime.getURL("secure.html") })。

1. 在Chrome浏览器地址栏输入chrome://extensions，开启“开发者模式”。
2. 点击“加载已解压的扩展”，选择“hide-extension”文件夹。
3. 此时浏览器工具栏会出现扩展图标，按下快捷键Ctrl+Shift+H测试。
- 所有非浏览器页面应消失，仅显示空白的安全界面。
- 再次按快捷键，所有页面恢复，安全界面关闭。

优化建议： 你可以调整commands中的快捷键（如改为Ctrl+Shift+F），或给安全界面添加动态时间戳、随机工作内容，增强真实性。例如，在secure.html中加入JavaScript定时更新日期。

此扩展完全离线运行，不会上传任何数据，确保隐私安全。但请留意，过度使用可能违反公司政策。开发本工具的目的在于学习浏览器扩展技术，而非滥用职场信任。当你掌握核心原理后，可进一步改造为任务管理器、快速笔记等合法工具。

这个“摸鱼工具”本质上是一个标签页管理助手。你可以添加更多高级功能：
- 白名单模式：只隐藏特定URL（如社交媒体站点的标签）。
- 定时自动隐藏：设置倒计时后自动进入隐藏状态，避免忘记操作。
- 图标状态：扩展图标在隐藏时变为红色，醒目提醒当前模式。

通过上述步骤，你不仅学会了浏览器扩展的基本结构，还掌握了标签页API和事件监听的使用。这为开发更复杂的生产力工具打下基础。现在，动手试试吧，让技术和绅士礼仪并存！