12306抢票秘籍：Chrome插件自动化抢票，省时省力，轻松回家过年！

时间：2025-01-11 00:23 分类：C++教程

年底了，为了回家过年，抢票成为了每个人的首要任务。12306网站虽然提供了“按预填信息购票”的功能，但实际操作中却隐藏着许多不便。很多时候，我们满怀期待地打开页面，却发现“按预填信息购票”按钮根本看不到，只有等到倒计时结束才能看到。更让人头疼的是，即使看到了按钮，点击后也会弹出购票信息确认窗口，需要我们再次点击“提交订单”按钮。这样的操作，无疑大大降低了抢票效率。

作为程序员的我，深感抢票的重要性。于是，我决定研究一个Google Chrome插件，实现一键自动化抢票，节省我们的宝贵时间。毕竟，在这场没有硝烟的战争中，哪怕节约哪怕1毫秒，都可能让我们在众多竞争者中脱颖而出。

实现一个Chrome插件

首先，我们需要明确插件的需求。我们的目标是自动监听页面上的按钮控件，当出现“按预填信息购票”按钮时，自动触发点击；当出现“提交订单”按钮时，自动触发点击。

接下来，我们开始编写插件的代码。首先，创建一个包含以下文件的目录结构：

12306 pre-filled buy/
├── icons/
│   ├── icon128.png
│   ├── icon16.png
│   └── icon48.png
├── manifest.json
├── popup.html
└── popup.js

编写manifest.json

manifest.json文件是插件的配置文件，用于定义插件的基本信息和权限。

{
  "manifest_version": 3,
  "name": "12306 按预填信息购票",
  "version": "1.0",
  "description": "12306 按预填信息购票",
  "permissions": [
    "activeTab",
    "alarms",
    "scripting"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

编写popup.html

popup.html文件是插件的弹出界面，用于显示插件的操作按钮。

<!DOCTYPE html>
<html>
<head>
  <title>12306 按预填信息购票</title>
  <style>
    body {
      width: 200px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f1f1f1;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <button id="goHome">I Must Go Home</button>
  <script src="popup.js"></script>
</body>
</html>

编写popup.js

popup.js文件是插件的主要逻辑，用于实现自动点击按钮的功能。

document.getElementById('goHome').addEventListener('click', function() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var tabId = tabs[0].id;
    chrome.scripting.executeScript({
      target: {tabId: tabId},
      func: buttonlistener
    }, function() {
      console.log('button listener enabled in tab:', tabId);
    });
  });
});

function buttonlistener() {
  console.log('listening start...');
  const intervalId0 = setInterval(() => {
    const targetButtonSelector = 'a.buy-ticket-button[style*="display: inline-block;"]';
    const targetButton = document.querySelector(targetButtonSelector);
    if (targetButton && window.getComputedStyle(targetButton).display !== 'none') {
      targetButton.click();
      console.log('yushou, clicking...');
      clearInterval(intervalId0);
    } else {
      console.log('Not found the yushou button, waiting...');
    }
  }, 3);

  const intervalId = setInterval(() => {
    const submitButton = document.querySelector('a[href="javascript:;"][class="btn btn-primary ok"]');
    if (submitButton) {
      submitButton.click();
      console.log('Found the submit button, clicking...');
      clearInterval(intervalId);
    } else {
      console.log('Not found the submit button, waiting...');
    }
  }, 5);
}

加载扩展

打开Chrome浏览器，进入chrome://extensions/，打开右上角的“开发者模式”，点击“加载已解压的扩展程序”按钮，选择你的12306 pre-filled buy文件夹。经过以上步骤后，应该就能在Chrome工具栏中看到你的扩展图标。点击图标，然后点击“I Must Go Home”按钮，脚本就会在当前活动页面上执行。

虽然我们开发的插件功能简陋，还有报错信息没有处理，且每隔5毫秒检查一次DOM元素对浏览器性能有一定影响，但足以满足我们的自动化需求。在使用插件之前，需要注意更新主机的系统时间，避免因系统时间慢导致抢票失败；在mac上可以执行命令：sudo ntpdate -u time.apple.com，在倒计时还有两分钟时开启插件功能，避免长时间高频检查DOM元素导致对浏览器性能产生影响。

结语

平时我都是拿来主义，想要什么插件就在Chrome的插件市场或者Tampermonkey里找。但这次，我决定自己动手，虽然过程中遇到了很多坎，功能也很简陋，但最终到达了目标，节约了抢票时间，心里还是美滋滋的。所以把这次经历记录下来，希望对大家有一丢丢帮助。上述所有代码都已经放在了GitHub上，需要的自取哦。

声明：

1、本博客不从事任何主机及服务器租赁业务，不参与任何交易，也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动，信息均摘自网络或来自服务商主动提供；所以对本博客提及的内容不作直接、间接、法定、约定的保证，博客内容也不具备任何参考价值及引导作用，访问者需自行甄别。

2、访问本博客请务必遵守有关互联网的相关法律、规定与规则；不能利用本博客所提及的内容从事任何违法、违规操作；否则造成的一切后果由访问者自行承担。

3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。

4、一旦您访问本博客，即表示您已经知晓并接受了以上声明通告。

本站资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。

12306抢票秘籍：Chrome插件自动化抢票，省时省力，轻松回家过年！

你可能还喜欢这些内容：

热门排行

文章推荐

随机文章