起因

最近準備換手機，作為路癡喜歡小米8的雙頻gps功能，就決定搶一部。結果搶是搶不到的，從黃牛那里買也是不可能的。那就發揮一下程序員的優勢，寫個瀏覽器插件來搶吧。

瀏覽器插件，通常用于在別人的網站上運行我們自己的代碼，做一些固定的操作，寫瀏覽器插件，先要明確2點：
1.我們的目的是什么。要達成什么。
2.網站的操作流程是什么。

分析與準備

我們要快人一步。從選擇我們想要的型號，配置，到下單都要比別人快。代碼的反應速度是比人快的，這是程序的優勢，我們可以第一時間去點相關的按鈕。不用移動鼠標，讓代碼幫我們點，不斷地點。然后后續操作，一直到訂單生成。完全不用自己動手操作。

分析了天貓，京東和小米商城。決定在小米商城上面搶。一來是因為它是小米自己的平臺，二來也是因為它沒有驗證碼，代碼寫起來比較簡單。

熟悉搶購流程。首先找了一些搶購小米的視頻來看。然后對比了一下米8的購買頁面和小米商城其它一些現貨出售的購買頁面。
發現流程與dom結構基本上是一樣的。購買流程也差不多的。

小米商城搶購的基本流程如下：

• 商品詳情頁。倒計時，時間到了出現加入購物車按鈕。
• 加入購物車成功頁。一個成功提示的頁面。可以點擊跳轉到購物車頁面。
• 購物車頁。核對產品，有確定按鈕可進入下一個頁面。
• 訂單確認頁。選擇地址，收貨時間等信息，然后確定生成訂單。

第4個頁面點確定，訂單生成成功，我們的小米就算是搶到了！

經過觀察發現從第一個頁面到第四個頁面，都是可以讓代碼全自動完成的。也就是說如果順利的話，在1s內跳轉過4個頁面到生成訂單是完全可能的。

代碼邏輯：

• 商品詳情頁。
  等待手機顏色，手機配置異步加載出來。然后代碼click想要購買的顏色，配置。
  配置信息選擇好之后，不斷點擊 加入購物車 處的按鈕。搶購時間一到，就能成功發請求到后臺。正式搶購的時候可能會有排隊彈窗。
  但是我們還在不停地點擊。所以可能會發多次請求到后臺。
  在代碼的幫助下，我們很大概率能順利加入購物車。并且加入購物車的可能不只一臺。
• 加入購物車成功頁。
  檢測到包含“去購物車結算”幾個字的鏈接的話就點擊它。或直接跳轉到購物車頁面。
• 購物車頁面。
  由于商城的限制，小米8其實只能搶一臺。但是我們加入購物車的可能不只一臺。這個時候直接點確認就不會成功，會彈出錯誤提示。所以在我們點擊進入下一個頁面的按鈕之前，要先把本頁多余的商品，和多的數量去掉。\
  多的商品，點刪除按鈕，會二次確認。點減少數量的按鈕，也是異步操作。所以如果進行了上面兩個減少操作，我們需要一個大概200ms的延遲之后再去點擊這個頁面的確認按鈕。
  另外，實際的搶購流程，即使走到購物車這一步，也很大概率是搶不到的。提交的時候會發請求檢測后臺庫存，如果買完了，頁面上也會有反應，比如確認按鈕點不了了。
  這個時候，我們不能放棄。一是因為系統這么繁忙的情況下給的數據不一定是對的。二是，有些人可能搶到沒有及時付款，后臺就又有貨了。
  所以一旦檢測到“商品已經失效或者暫時售罄”的提示。立馬刷新購物車頁面。這樣很大概率能進入到第4個頁面去。
  事實上我寫這個插件，也是遇到進入購物車但是沒有貨的情況下臨時加上去檢測和刷新操作。最終能一次成功，這個臨時修改是關鍵。
• 訂單確認頁
  到了訂單確認頁。用代碼點擊收貨地址。然后點擊這個頁面的確認按鈕。 也可能遇到提示“商品已經失效或者暫時售罄”。這個時間立馬跳轉到購物車頁面，重復上一步。
  不過這個頁面有時候 會彈出一個alert提示，阻斷腳本運行。點確定，就可能顯示訂單成功。這個時候就可以付款了。

找一個現貨商品測試，腳本。一進頁面就開始，瞬間跑完流程下好單。大體流程無誤。

其它準備工作：

• windows系統時間同步。
• 小米商城賬號處于登錄狀態。
• 提前把收貨地址填上。到時候才可以直接選。

核心代碼：

//1.核對時間。與互聯網時間同步。 //2.處于登錄狀態。var app = {timer: '',init: function() {this.setTimer();},setTimer: function() {this.timer && clearTimeout(this.timer);try {//這里就沒有做具體哪個頁面的判斷了。暫時不會相互影響。//詳情頁面做的事this.detailFn();//中間頁，進入購物車this.goCart();//購物車頁面this.cartFn();//提交訂單頁面。this.orderFn();} catch (e) {// 還沒加載出來}this.timer = setTimeout(this.setTimer.bind(this), 30);},//商品頁面做的事情//在選項加載出來之后選擇然后不斷點擊加入購物車。detailFn() {//關閉可能的彈窗$(".modal-body .btn.btn-primary:visible").each(function(index, el) {el.click();});$("#J_miAlertConfirm")[0] && $("#J_miAlertConfirm")[0].click();//版本 128gvar levelDom = $(".J_step.pro-choose[data-index=0] ul>li").eq(1)[0];//顏色 白色var colorDom = $(".J_step.pro-choose[data-index=1] ul>li").eq(1)[0];//保險。不選保險了。非必要項。碎屏險可以補買的。// var safeDom = $(".J_service.pro-choose[data-index=0] ul>li").eq(1)[0];//當這幾個都加載出來的時候才執行點擊加入。避免購物車頁面出現多項商品。if (levelDom && colorDom ) {levelDom.click();colorDom.click();// if (!$(safeDom).hasClass('active')) {// safeDom.click();// }//點擊加入購物車$("#J_buyBtnBox a")[0] && $("#J_buyBtnBox a")[0].click();}},//跳轉到購物車頁面goCart() {if ($(".J_actBox a:contains('去購物車結算')")[0]) {$(".J_actBox a:contains('去購物車結算')")[0].click();//觀察到卡了一s在這里，所以加上這一句，上面那句其實就沒有用了。location.href = 'https://static.mi.com/cart/';//跑一個錯誤，中斷線程。不再生成定時器。throw new Error('abc');}},//購物車頁//第一個頁面可能發了多次加入購物車的請求。 所以在這個頁面要把多余的項以及數量刪除。cartFn() {//阻止彈窗,避免阻斷流程window.alert = function(){}//購物車中有大于1件商品，刪除$("#J_cartListBody .item-box:gt(0)").find(".J_delGoods").each(function(index, el) {el.click();//確認刪除按鈕$("#J_alertOk")[0] && $("#J_alertOk")[0].click();});//確認刪除按鈕$("#J_alertOk")[0] && $("#J_alertOk")[0].click();var interval = 0;//將每一條的數量減少到1。$(".J_minus").each(function(index, el) {//數量不為1就減少。//不能用這個while。因為input中的值是異步減少的。if ($(el).next('input').val() != 1) {interval = 200;el.click();el.click();el.click();el.click();}});//去結算。因為上面的數量減少操作是異步的。所以這里設置一個延時，讓上面的操作生效之后再進行這個操作。setTimeout(function() {$("#J_goCheckout")[0] && $("#J_goCheckout")[0].click();}, interval);//到了購物車頁面甚至下訂單的頁面依然可能會出現售罄的情況。這個時候不要放棄，重新刷新購物車頁面繼續進行操作。還是有可能刷到的。if ($('h3:contains(抱歉，以下商品已經失效或者暫時售罄):visible').length > 0||$('a:contains(到貨提醒):visible').length > 0||$("dt:contains(選中的商品已經全部失效或者暫時售罄):visible").length>0||$("#J_goCheckout").hasClass('btn-disabled')) {//避免請求太過頻繁。setTimeout(function() {location.href = 'https://static.mi.com/cart/';}, 500)}},//選地址，下單頁面orderFn() {if (document.querySelector('.J_addressItem')) {document.querySelector('.J_addressItem').click();document.querySelector("#J_checkoutToPay") && document.querySelector("#J_checkoutToPay").click();}$("button:contains(確定):visible").click();$(".modal-backdrop:visible").remove();} }app.init();

成功用瀏覽器插件搶到小米8白色128g版。上午10點搶到，下午2點多就收到了。手機非常滿意。

另外，這種搶購網站前端是不是應該做一些防重復點擊的驗證。搶購的時候 服務器的壓力也小一些。

插件地址：https://github.com/liusaint/ls-blog/tree/master/code/mi

總結

以上是生活随笔為你收集整理的使用chrome浏览器插件抢小米8的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。