从零开始：教你用JavaScript打造自定义“摸鱼点击工具”浏览器扩展

在日常工作中，我们常常需要处理一些重复性的点击操作，比如网页上的表单提交、游戏中的自动点击，或是定时刷新页面。今天，我手把手教你如何开发一个轻量级的浏览器扩展——一个自定义“摸鱼点击工具”。你无需深厚编程基础，只要跟着步骤，就能在Chrome或Edge浏览器中运行属于自己的自动化工具。

注：本教程仅用于学习目的，请勿用于违反公司或平台规定的场景。

第一步：准备工作——安装必要工具

首先，确保你的电脑上安装了Chrome或Edge浏览器。然后，我们需要一个文本编辑器（比如VS Code、Notepad++或记事本）。建议创建新文件夹，命名为“auto-clicker-ext”，用于存放所有文件。

浏览器扩展本质上是一个包含配置文件和代码的文件夹。我们无需打包，开发阶段直接加载即可。

第二步：创建扩展核心配置文件——manifest.json

在“auto-clicker-ext”文件夹中，新建一个名为manifest.json的文件。这个文件告诉浏览器扩展的基本信息：名称、版本、权限等。写入以下内容：

{
  "manifest_version": 3,
  "name": "摸鱼点击器",
  "version": "1.0.0",
  "description": "自定义自动点击工具，支持间隔与目标元素选择",
  "permissions": ["activeTab", "storage"],
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": [""],
      "js": ["content.js"]
    }
  ]
}

注意这里：permissions中的activeTab允许扩展访问当前标签页，storage用于保存设置。 content_scripts中的表示在所有网页上注入content.js脚本。

第三步：设计弹出界面——popup.html

用户点击浏览器工具栏图标后，会弹出一个小窗口，用来控制点击行为。新建popup.html文件，代码如下：

  
  


  
摸鱼点击工具
  间隔(毫秒)：
  点击次数：
  开始点击
  停止
  
就绪
  

界面很简洁：两个输入框分别控制点击间隔和次数，两个按钮控制开始和停止，一个状态提示。

第四步：编写弹出窗口逻辑——popup.js

新建popup.js，负责处理用户与弹出窗口的交互，并发送消息到内容脚本：

let isRunning = false;

document.getElementById('startBtn').addEventListener('click', () => {
  const interval = parseInt(document.getElementById('interval').value);
  const count = parseInt(document.getElementById('count').value);
  if (interval < 100 || count < 1) {
    alert('请设置合理数值');
    return;
  }
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, {
      action: 'start',
      interval: interval,
      count: count
    });
  });
  isRunning = true;
  document.getElementById('startBtn').disabled = true;
  document.getElementById('stopBtn').disabled = false;
  document.getElementById('status').textContent = '运行中...';
});

document.getElementById('stopBtn').addEventListener('click', () => {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, { action: 'stop' });
  });
  isRunning = false;
  document.getElementById('startBtn').disabled = false;
  document.getElementById('stopBtn').disabled = true;
  document.getElementById('status').textContent = '已停止';
});

第五步：实现真正的自动点击——content.js

这是核心文件。当用户点击“开始”按钮，扩展会向当前网页发送消息，这个脚本会监听消息并执行点击操作：

let timerId = null;
let remainingClicks = 0;

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'start') {
    // 清除之前的定时器（如果有）
    if (timerId) clearInterval(timerId);
    
    remainingClicks = request.count;
    const interval = request.interval;
    
    // 立即执行第一次点击
    simulateClick();
    remainingClicks--;
    
    timerId = setInterval(() => {
      if (remainingClicks <= 0) {
        clearInterval(timerId);
        timerId = null;
        console.log('点击完成');
        return;
      }
      simulateClick();
      remainingClicks--;
    }, interval);
    
  } else if (request.action === 'stop') {
    if (timerId) {
      clearInterval(timerId);
      timerId = null;
    }
    remainingClicks = 0;
  }
});

function simulateClick() {
  // 获取鼠标指针位置下的元素（默认点击当前位置）
  // 你也可以修改为通过CSS选择器定位元素，但为了简化，这里用点击当前鼠标位置
  const event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: window.innerWidth / 2,  // 默认点击屏幕中央
    clientY: window.innerHeight / 2
  });
  document.elementFromPoint(window.innerWidth / 2, window.innerHeight / 2).dispatchEvent(event);
}

注意：这里默认点击屏幕中央。如果你想点击特定元素，可以修改simulateClick函数，比如使用document.querySelector('#myButton')来定位。

第六步：加载和测试扩展

在Chrome地址栏输入chrome://extensions/，开启右上角的“开发者模式”。点击“加载已解压的扩展程序”，选择你的“auto-clicker-ext”文件夹。现在，你会看到“摸鱼点击器”出现在工具栏中。

打开任意网页，点击工具栏图标，设置间隔为1000毫秒，点击次数5次，然后点击“开始点击”。你会发现浏览器自动在网页中央位置执行点击操作！可以打开控制台（F12）查看输出日志。

第七步：进阶优化——添加自定义目标选择

默认点击屏幕中央有点粗糙。我们可以增加一个“选择目标”功能，让用户点击网页上的某个元素，然后记录它的CSS选择器。限于篇幅，这里只提供思路：

在popup.html添加一个“拾取元素”按钮；在content.js中监听鼠标移动，当用户点击被拾取的元素时，获取其唯一标识（如id或类名），并保存到chrome.storage中。这样下次点击时，直接定位到该元素。

记得在manifest.json的permissions中加入"storage"，且上述代码中已包含。

常见问题与解决方法

Q：为什么点击没反应？ 检查目标网页是否允许注入脚本（多数网站允许）。同时确认simulateClick中elementFromPoint返回非null。

Q：如何增加右键点击？ 在simulateClick中修改event类型为'contextmenu'，但注意某些事件需要特殊处理。

Q：如何实现次数无限？ 在popup.html中将count输入框设置为空或0，并在content.js中判断如果request.count <= 0则改为无限循环。

结语

通过以上步骤，你成功创建了一个自定义“摸鱼点击工具”的浏览器扩展。从配置文件到界面，再到后台脚本，整个过程体现了浏览器扩展开发的经典模式：manifest配置 > 弹出UI > 后台逻辑 > 内容脚本。这个工具你可以进一步扩展，例如添加热键、保存预设、或支持多元素点击。

如果你遇到任何问题，欢迎查看扩展的官方文档，或在本站的“摸鱼点击工具说明”中寻找灵感。记住，技术本身是中性的，如何使用取决于你的选择。现在，开始动手吧！