AI摸鱼工具 摸鱼工具网

一步到位：手把手教你用脚本实现摸鱼检测工具（适用前端开发者）

时间： 作者： 阅读：53
在现代办公环境中，如何平衡工作效率与短暂休息，成为许多“打工人”关注的焦点。而浏览器扩展形式的小工具，能够在不破坏工作流程的前提下，提供隐蔽、实用的功能。本文以“摸鱼点击工具”为灵感，面向前端开发者，通过详细的步骤式教学，教你从零搭建一个轻量级的摸鱼检测浏览器扩展。整个教程不需要复杂的后端服务，仅依靠浏览器API和纯前端技术。 准备工作： 在开始之前，请确保你的电脑上安装了最新版的Chrome或

在现代办公环境中，如何平衡工作效率与短暂休息，成为许多“打工人”关注的焦点。而浏览器扩展形式的小工具，能够在不破坏工作流程的前提下，提供隐蔽、实用的功能。本文以“摸鱼点击工具”为灵感，面向前端开发者，通过详细的步骤式教学，教你从零搭建一个轻量级的摸鱼检测浏览器扩展。整个教程不需要复杂的后端服务，仅依靠浏览器API和纯前端技术。

准备工作：

在开始之前，请确保你的电脑上安装了最新版的Chrome或Edge浏览器（它们共享Chromium内核，扩展机制相同）。你还需要一个文本编辑器（如VS Code、Sublime Text或记事本），以及基本的HTML/CSS/JavaScript知识。

步骤1：创建项目目录与基础文件

首先，在你的电脑上一个合适位置（如桌面或项目文件夹）创建一个新的文件夹，命名为moyu-detector。然后，在该文件夹内新建以下文件：

  • manifest.json（扩展的配置文件）
  • popup.html（点击扩展图标后弹出的页面）
  • popup.js（popup页面的脚本）
  • background.js（后台持续运行的服务脚本）
  • icon.png（一个简单的图标文件，可以用16x16像素的PNG替代）

现在，我们先制作最重要的manifest.json文件，它告诉浏览器扩展的名称、权限和资源。

{
  "manifest_version": 3,
  "name": "摸鱼检测工具",
  "version": "1.0",
  "description": "智能检测并提醒用户是否进入“摸鱼”状态，帮助合理安排休息。",
  "permissions": ["tabs", "storage", "alarms"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon.png"
  }
}

说明：这里我们声明了tabs（访问标签页）、storage（存储数据）和alarms（定时器）权限。这是实现检测核心功能的关键。

步骤2：编写后台脚本（background.js）

后台脚本是扩展的“大脑”。它会在浏览器后台持续运行。我们要实现：每隔一段时间（例如10分钟）检查用户当前打开的标签页，如果发现用户长时间停留在某个非工作网站（如视频、游戏页面），则记录一次“摸鱼事件”。

// background.js  - 核心逻辑
const MOYU_INTERVAL_MINUTES = 10; // 检测间隔（分钟）
const SUSPICIOUS_DOMAINS = ['youtube.com', 'bilibili.com', 'reddit.com', 'xiaohongshu.com']; // 示例可疑域名列表

let moyuCount = 0;

// 启动定时任务
chrome.runtime.onInstalled.addListener(() => {
  chrome.alarms.create('moyuCheck', { periodInMinutes: MOYU_INTERVAL_MINUTES });
});

// 每次定时触发时，检查当前活动标签
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'moyuCheck') {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      if (tabs.length > 0) {
        const url = new URL(tabs[0].url);
        const hostname = url.hostname;
        const isSuspicious = SUSPICIOUS_DOMAINS.some(domain => hostname.includes(domain));
        if (isSuspicious) {
          moyuCount++;
          chrome.storage.local.set({ moyuCount: moyuCount });
        }
      }
    });
  }
});

这段代码会每10分钟执行一次检测，如果用户正在浏览“摸鱼”网站，计数增加。当然，你也可以自定义域名列表，或者增加时间阈值（比如只在工作日的特定时间段检测）。

步骤3：构建弹窗界面（popup.html & popup.js）

当用户点击浏览器工具栏的扩展图标时，会显示一个小弹窗。我们设计一个极简的界面：显示当前的摸鱼次数，以及一个“重置计数”按钮。更重要的是，我们可以加入一个“隐藏”功能——点击某个区域或按钮，弹窗会立即关闭，防止被同事看到。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 200px;
      padding: 15px;
      font-family: Arial, sans-serif;
    }
    .count-display {
      font-size: 28px;
      text-align: center;
      margin-bottom: 10px;
    }
    .button-group {
      display: flex;
      justify-content: space-between;
    }
    button {
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      padding: 5px 10px;
      cursor: pointer;
    }
    .hidden-exit {
      position: absolute;
      bottom: 5px;
      right: 5px;
      font-size: 12px;
      color: #ccc;
      cursor: default;
    }
  </style>
</head>
<body>
  <div id="status">摸鱼检测中...</div>
  <div class="count-display" id="moyuCount">0</div>
  <div class="button-group">
    <button id="resetBtn">重置计数</button>
    <button id="closeBtn">快速关闭</button>
  </div>
  <div class="hidden-exit" id="hiddenExit">摸鱼点击工具 v1.0</div>
  <script src="popup.js"></script>
</body>
</html>

弹窗脚本（popup.js）负责从后台读取计数并显示。同时，我们要实现“快速关闭”功能，实际上只是关闭弹窗，不会通知任何第三方，纯粹为了快速隐藏。

// popup.js
chrome.storage.local.get(['moyuCount'], (result) => {
  const count = result.moyuCount || 0;
  document.getElementById('moyuCount').innerText = count;
  if (count > 0) {
    document.getElementById('status').innerText = "检测到摸鱼事件";
  } else {
    document.getElementById('status').innerText = "未检测到摸鱼";
  }
});

document.getElementById('resetBtn').addEventListener('click', () => {
  chrome.storage.local.set({ moyuCount: 0 }, () => {
    document.getElementById('moyuCount').innerText = '0';
    document.getElementById('status').innerText = "已重置";
  });
});

document.getElementById('closeBtn').addEventListener('click', () => {
  window.close(); // 仅在弹窗上下文中有效
});

注意：window.close()在Chrome扩展的popup中会关闭整个弹窗，非常隐蔽。这就是“一键隐身”效果的原理。

步骤4：加载测试扩展

在Chrome地址栏输入chrome://extensions/，打开扩展管理页面。开启右上角的“开发者模式”。然后点击“加载已解压的扩展程序”，选择刚才创建的moyu-detector文件夹即可。你会看到一个新的图标出现在工具栏上，点击它就能看到摸鱼计数器了。

步骤5：进阶功能与自定义

如果你希望让这个工具更智能，可以加入以下特性：

  • 时间间隔可调：在popup.html中添加一个下拉菜单，用户可以选择5分钟、10分钟、30分钟等不同的检测间隔。你需要通过chrome.alarms.clear()和chrome.alarms.create()动态修改。
  • 白名单机制：除了黑名单，还可以添加一个白名单（例如公司内部系统），确保这些网站不被视为摸鱼。
  • 可视化历史记录：利用chrome.storage存储多日数据，并在popup中用柱状图或趋势线展示。
  • 提醒功能：当连续检测到多次摸鱼时，使用chrome.notifications.create()发送一条通知，提示用户“该休息一下了”。

下面是一个添加通知的示例代码（放入background.js中）：

if (moyuCount >= 3) {
  chrome.notifications.create({
    type: 'basic',
    iconUrl: 'icon.png',
    title: '摸鱼预警',
    message: '你已经摸鱼' + moyuCount + '次了，或许需要起来活动一下。'
  });
}

安全与隐私提示：

本教程中的摸鱼检测工具只运行在你的本地浏览器中。所有数据（如摸鱼计数）仅存储在本地chrome.storage.local中，不会上传到任何服务器。如果你想分享功能，或集成团队版，可以考虑加入本地数据导出为JSON的功能，而不是直接联网。这样既保护隐私，又保留了工具实用性。

常见问题排查：

1. 扩展图标不显示：请检查manifest.json中的default_icon路径是否正确；另外，在扩展管理页面确保该扩展已启用。

2. 计数器不更新：检查background.js中的alarms是否创建成功；可以手动在扩展管理页面的Service Worker中打开控制台查看日志（右键点击背景页链接）。

3. popup弹窗空白：查看popup.js代码中是否有语法错误，在popup页面右键选择“检查”可以打开开发者工具调试。

结语：

通过以上五步，你成功创建了一个具备摸鱼检测、计数、隐藏等功能的浏览器扩展。这个工具不仅实用，更重要的是它完全开源、可定制，并且安全。你还可以进一步拓展它，比如结合番茄工作法，在摸鱼后自动切换为工作状态提醒。如果你尝试更深的定制，别忘记参考MDN的扩展文档。现在，为你自己的浏览器添加这个小助手吧，让工作与休息更加有序。

免责声明：本文内容来源于公开资料、用户提交或站内整理，仅供学习与参考，不构成任何投资、医疗、法律或专业建议。请结合实际情况自行判断，相关风险由使用者自行承担。
上一篇
下一篇

相关文章