插件实现1206网站“按预填信息”自动抢票

2025-07-29 15:42:40

插件实现1206网站“按预填信息”自动抢票抢票那些事年底了，为了回老家过年，大部分同学都需要抢票，1206提供了"按预填信息购票"的功能，先把购票信息填好，到点直接抢票，但是这个功能有点蛋疼，到点开票之前，页面上根本就看不到"按预填信息购票"按钮，只有页面的倒计时结束，用户才能看到这个按钮，检查源代码可以发现，开发人员把这个按钮给隐藏了。代码语言：ht

插件实现1206网站“按预填信息”自动抢票

抢票那些事

年底了，为了回老家过年，大部分同学都需要抢票，1206提供了"按预填信息购票"的功能，先把购票信息填好，到点直接抢票，但是这个功能有点蛋疼，到点开票之前，页面上根本就看不到"按预填信息购票"按钮，只有页面的倒计时结束，用户才能看到这个按钮，检查源代码可以发现，开发人员把这个按钮给隐藏了。

代码语言：html复制

<div class="ticket-btn" style="user-select: text;">
    <a href="javascript:;" class="btn btn-hollow btn-sm w120 buy-ticket-button" data-index="0" data-seatno=""
        style="display: none; user-select: text;">按预填信息购票</a>
    <span class="txt-lighter qishou-text" style="user-select: text;">1月9日09点
        起售</span>
</div>

作为程序员的我，心里暗爽，“这不是小场面～”，把style="display: none; user-select: text;"改成style="display: inline-block; user-select: text;"不就行。说干就干，可是当我改成“display: inline-block”之后，发现立马又被改回了“display: none”，我猜应该是有一个脚本在维护这一块的隐藏。

当我以为等着页面上的倒计时结束，“按预填信息购票”按钮出现后，立马点击一下就能开始抢票，然而并不是，当时的我心中真的是一万匹**马在崩腾。点击“按预填信息购票”按钮后，竟然还会弹出购票信息确认窗口，需要我们再次点击“提交订单”按钮。

购票信息确认

好家伙，这还抢个der，无奈抢票时间就这样一点点被浪费，最终喜提的“已售罄”三个大字像是在屏幕前嘲笑我：“你个菜鸡，没有抢到票吧”。

这我哪能忍！所以决定研究一下怎么搞一个google chrome插件，实现一键自动化，节省两次点击按钮的时间，毕竟抢票的时间是很宝贵的，哪怕节约哪怕1毫秒，可能我们就已经排在很多人前面了。

实现一个chrome插件

凭借着以前学过的一点点前端知识和几个小弟(文心一言、豆包、chatGPT)，从没有搞过chrome插件开发的我，似乎有那么一点点出生牛犊不怕虎的意思，这就开始干了。

明确需求

首先根据场景，明确一下我们的需求。希望达到的效果是，通过chrome插件，自动监听页面上的按钮控件，一是当出现“按预填信息购票”按钮时，自动触发点击；二是当出现“提交订单”按钮时，自动触发点击。

功能实现

秉承着面向小弟编程的原则，经过一通通高手之间“对话”，再加上验证调试，最终达到了效果。下面记录一下实现过程，具体的原理就不讲了，因为我也不懂哈哈。

模式1206的页面

写一个页面，模拟1206页面上的从“1月9日09点起售”到“按预填信息购票”按钮出现的过程，再模拟当用户点击“按预填信息购票”按钮时，弹出“购票信息确认”窗口，显示“提交订单”按钮。代码放在github仓库里，这里就不贴了

编写插件

1、创建 Chrome 扩展目录结构

首先，创建一个包含以下文件的目录结构：

代码语言：shell复制

├── 1206 pre-filled buy
│   ├── ic //插件图标
│   │   ├── icon128.png
│   │   ├── icon16.png
│   │   └── icon48.png
│   ├── manifest.json //配置文件
│   ├── popup.html //弹出界面
│   └── popup.js

2、编写manifest.json

代码语言：json复制

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

、编写popup.html

代码语言：html复制

<!DOCTYPE html>
<html>
<head>
  <title>1206 按预填信息购票</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>

4、编写popup.js

代码语言：javascript代码运行次数：0运行复制

document.getElementById('goHome').addEventListener('click', function() {
  // 首先获取当前活动标签页的ID
  query({active: true, currentWindow: true}, function(tabs) {
    var tabId = tabs[0].id;
    
    // 使用获取到的tabId来执行脚本
    chrome.({
      target: {tabId: tabId},
      func: buttonlistener
    }, function() {
      cole.log('button listener enabled in tab:', tabId);
    });
  });
});

function buttonlistener() {
  cole.log('listening start...');
  ct intervalId0 = setInterval(() => {
    ct targetButtonSelector = 'a.buy-ticket-button[style*="display: inline-block;"]';
    ct targetButton = document.querySelector(targetButtonSelector);
    if (targetButton && window.getComputedStyle(targetButton).display !== 'none') {
      ();
      cole.log('yushou, clicking...');
      clearInterval(intervalId0); // 停止检查
    }else{
      cole.log('ot found the yushou button, waiting...');
    }
  }, ); // 每隔毫秒检查一次


  ct intervalId = setInterval(() => {
    ct submitButton = document.querySelector('a[href="javascript:;"][class="btn btn-primary ok"]');
    if (submitButton) {
      ();
      cole.log('Found the submit button, clicking...');
      clearInterval(intervalId); // 停止检查
    }else{
      cole.log('ot found the submit button, waiting...');
    }
  }, 5); // 每隔5毫秒检查一次

}

5、加载扩展

打开Chrome浏览器，进入 chrome://extensi/。
打开右上角的“开发者模式”
点击“加载已解压的扩展程序”按钮，选择你的1206 pre-filled buy文件夹。

经过以上步骤后，应该就能在Chrome工具栏中看到你的扩展图标。点击图标，然后点击“I Must Go Home”按钮，脚本就会在当前活动页面上执行，可以打开浏览器控制台看日志。

演示使用

利用我们前面写的模拟页面，来演示一下插件的使用：

显然，我们开发的这个插件非常的简陋，还有报错信息没有处理，另外每隔5毫秒检查一次DOM元素对浏览器性能有一定影响，不过足以满足我们的自动化需求。

另外，在使用插件之前，我们需要注意几点：

更新主机的系统时间，1206上面的倒计时貌似是根据系统时间来的，如果你的系统时间慢了，结果可想而知 mac上可以执行命令：sudo ntpdate -u time.apple
在倒计时还有两分钟的时候开启我们这个插件功能，避免长时间高频检查DOM元素导致对浏览器性能产生影响

结束语

平时我都是拿来主义，想要什么插件就在chrome的插件市场或者tampermonkey里，大部分都是能到的。第一次硬着头皮自己捣鼓了一个，虽然过程中遇到了好几个坎，功能也很简陋，但最终到达了目标，节约了抢票时间，心里还是美滋滋的。所以把这次经历记录下来，希望对大家有一丢丢帮助。

上述所有代码都已经放在了github，需要的自取哦。

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1186247.html

本站网友陌生的性	29分钟前发表
"version"
本站网友美国白宫	14分钟前发表
可能我们就已经排在很多人前面了
本站网友吃黑木耳有什么好处	28分钟前发表
创建 Chrome 扩展目录结构首先
本站网友阳虚体质	24分钟前发表
'
本站网友皱纹怎么减少	23分钟前发表
豆包
本站网友食品安全管理员培训	22分钟前发表
"48"
本站网友 115网址导航	7分钟前发表
true
本站网友放纸鸢	17分钟前发表
心里还是美滋滋的
本站网友偏头痛的症状	10分钟前发表
"description"
本站网友 f22p	3分钟前发表
"48"
本站网友天津达沃斯论坛	24分钟前发表
text;">1月9日09点起售</span> </div>作为程序员的我
本站网友辽宁大雪	24分钟前发表
flex; justify-content
本站网友火影忍者大结局	12分钟前发表
选择你的1206 pre-filled buy文件夹
本站网友踯躅不前	3分钟前发表
tabId}
本站网友中山脱裤门	8分钟前发表
text;"> <a href="javascript
本站网友面部塑形	21分钟前发表
没有抢到票吧”
本站网友中国银行总行	6分钟前发表
这还抢个der
本站网友中堂海陆汇	15分钟前发表
这我哪能忍！所以决定研究一下怎么搞一个google chrome插件
本站网友磨房论坛	26分钟前发表
不过足以满足我们的自动化需求

插件实现1206网站“按预填信息”自动抢票