[Chrome Extensions] 拍賣網小幫手 AuctionKira

最近填了不少動畫坑, 其中自己也有個小習慣, 只要看到喜歡的作品, 就會想至少買個動漫週邊表示支持一下, 不如說從高中開始就有瘋狂收集動漫週邊 / PVC模型 / 音樂盒的傾向, 還省吃儉用把生活費壓到最低持續砸在興趣裡, 直到大學後才開始收斂起來, 變成偶爾才會想敗家找東西敗~。

而自己購入動漫周邊的管道通常都是拍賣網, 最早是YAHOO拍賣, 後來則是露天拍賣, 以及專門主打動漫商品的買動漫, 至於蝦皮則是幾乎沒在用, 只有在找不到東西時才會想去看。

再來就是問題重點了, 其實在拍賣網找喜歡的動漫週邊是非常浪費時間的事, 搜尋結果動不動就是30~50頁以上, 重複商品一堆不說, 最噁心的就是有大量非官方授權的商品, 還用大量不相關的關鍵字上架一大堆, 如果是賣家自己製作的同人商品我也蠻喜歡, 看到喜歡的也是會支持。 可是絕大多數還是網路上隨便找些圖就印在日用品上面濫竽充數, 沒有絲毫設計感的東西, 每次找東西都搞得浪費一堆時間 + 心很累, 這也是後來我很少敗家的原因...。

為了解決這個問題, 就決定做個小擴充套件改善敗家體驗了, 這樣以後敗家應該也能省不少時間, 至於荷包會不會更扁就只能靠意志力克服了XD 以下是想到可以做的功能:

1. 關鍵字過濾功能: 

一般搜尋功能只會找符合關鍵字的商品, 如果想進一步過濾不想要的商品, 以露天來說可以加not去除, 不過印象中以前使用有數量限制, 而且有些特殊字元好像會出問題; 至於買動漫則是好像沒這功能, 有這個功能就至少能把一部分大量垃圾上架的商品去除(只要他有既定的關鍵字的話)。

2. 賣家過濾功能:

可以把那種上架一大堆非官方劣質商品+亂加關鍵字提高曝光度的賣家加黑名單, 不過因為露天跟買動漫的圖片模式都沒賣家資訊, 只有清單模式才有, 所以這功能只有清單模式才能用, 偏偏圖片模式又最好用, 真的是有點無奈QQ

3. 去除廣告:

去除露天拍賣強插的廣告, 一開始做這功能其實除了廣告以外, 主要還是大量錯誤的海外商品嚴重破壞我的使用者體驗, 我搜尋高木同學結果冒一堆Takagi工具機商品, 你他媽在開我玩笑嗎!!? 不過後來做好後才發現露天拍賣的進階搜尋可以只搜尋露天本站的商品, 所以這功能最後就決定改成只濾除廣告, 不過濾海外商品了(畢竟網站本身已經有這功能)。

4. 預載頁面:

每次露天拍賣搜尋完, 看到有30~50頁就整個頭很痛, 每次切換頁面又要浪費一些等待時間, 導致每次全部看完都兩三小時過去了, 而買動漫則是不會告訴你有多少商品, 只有你滑鼠滑到下面他lazy loading啟動才會繼續跟server要新商品, 中間也是得浪費時間等待, 雖然說lazy loading是目前主流的作法, 可是當然可以的話我還是希望能一口氣把商品看完, 不要浪費每次那些等待時間。

5. 自動執行:

上面那些功能如果每次看新的一頁都要手動多按一次按鈕也太浪費時間, 可以的話當然希望能支援自動執行, 所以也多做了自動執行的切換開關。

以下是做好的成果:

Github: 

https://github.com/zmcx16/AuctionKira

下載位置: 

https://github.com/zmcx16/AuctionKira/archive/1.0.0.zip

支援網站:

• 買動漫
• 露天拍賣

安裝:

開啟Chrome瀏覽器->選單->設定->擴充功能->載入未封裝項目->選擇AuctionKira/src資料夾

限制 & 注意事項: 

1. 如果開啟自動執行功能卻沒有自動執行, 請按重新整理網頁, 並且之後都用擴充套件提供的面板進行換頁動作, 才能確保自動執行功能正常運作。

2. 過濾賣家功能不支援圖片模式, 只支援清單模式。

--------------- 我是分隔線 ---------------

基本上這玩意主要是做給自己用爽的, 所以也不會考慮上架Chrome商店(前一個上架的擴充套件體驗超糟糕, 修一個小bug卡了一個多月的審核, 就決定以後都打算上架了。), 另外就是其實這套件只有基本功能完成, 並沒有達到可商品化的程度, 再來會稍微說明一些問題點。

1. 如何實作預載頁面:

以買動漫來說, 因為他的js沒有壓縮, 所以可以直接看他code是怎麼載入後面頁面的, 所以只要參考下他的做法在讓程式自己跑就好, 基本上沒太大問題。 但是露天拍賣就不一樣了, 他的js檔是壓縮過的, 看網路封包則是會先打個request取得新一頁的商品id, 在用這些id取得每個商品的資訊, 最後在跑js去組出新商品頁面, 基本上就算不看code, 要自己寫一個組新頁面的程式並不難, 可是卻得花不少功夫, 而且要是網站一改版, 等於我又要重分析一次, 對於後續maintain會十分的難受。

因為這樣, 所以又想了幾個方法, 後來決定用最簡單的方式, 我直接開個新iframe去載入網站後幾頁, 在從iframe的dom取出我要的商品node在插到目前的商品頁就好, 基本上這方法可以直接一體適用所有網站, 雖然iframe基本上已經是漸漸不被使用的技術了, 沒想到用在這裡可以這麼簡單達到想到的功能XD

2. 自動執行功能如何在正確的時機運行

這是做完後才想到的痛點, 原本我想說自動執行這功能我只要等網頁的loaded event trigger後在跑我的進階搜尋功能就好, 可是問題是, 以SPA網頁來說, 各種按鈕的方式不是跳轉網頁, 而是直接打個ajax去跟後端取得資料, 在自己render, 以這種情境來說, 外部的擴充套件會很難去知道什麼時候網頁才會真正的載入完畢, 畢竟你沒辦法把你自己的code插到網站的js裡面, 能做到的就是自己找個額外的checkpoint點, 在設個interval去定時query網站狀態, 這樣code的邏輯就會變得十分的複雜, 並且也不好maintain。

在我前一個擴充套件我就是用上述做法, 所以code本身在等待網站狀態時得檢查數個node狀態, 才能確保網站是真的載入完畢, 而這次我已經不想這樣搞了, 所以想到的替代方法就是:

"每次都重載頁面吧!!!"

如果是沒有開預載頁數功能, 只有搜尋過濾的話, 我一樣是用偵測dom node change的方式去判斷要不要做過濾搜尋, 但如果是打開預載頁數的情況, 因為預載頁數這功能在使用後本來就不可能繼續用原始網站的下一頁功能, 我得自己刻個新UI去做跳頁的動作, 而如果把iframe預載的功能寫在detect dom change上, 那那個效能應該會變很噁心, 所以就決定有開預載頁數的情況就只能用我開的UI跳轉小面板, 這樣每次讀新頁面都會等到頁面載完才跑我的程式, 雖然犧牲了一點小效能, 不過因為可以一口氣載入多頁面, 整體上來說還是十分划算的。

3. 一口氣載入太多預載頁面會造成網頁十分lag

這個其實就是很兩難的問題, 以買動漫來說我一口氣多載個10頁都不會感覺lag, 可是露天的話我只要多載5頁以上, 整個dom就會因為太複雜導致網站反應變慢, 一般來說解決這問題的方法就是用lazy loading一次只載入少數頁面, 可是我就是要解決等待載入的時間才改成一次多載頁面, 所以最後變成我露天拍賣最多只敢多預載3~5頁左右, 有點無奈啊...。

這次的side project大概就先到這告一段落, 以我自己來說算是有完美達到個人需求, 尤其是搜尋結果超過30頁甚至50頁的商品, 有過濾關鍵字跟預載頁面可以省1小時的context switch & 花在垃圾資訊的時間, 感覺有可能會比以前更容易想敗家了XD

另外後續可能看需求在決定要不要加支援蝦皮拍賣, 不過蝦皮我是覺得真的比露天好用太多, 網站廣告少而且換頁反應又超快, 認真說覺得做的效益不大, 可能哪天我又被一堆大量洗商品的煩到才會想做吧~ 至於YAHOO拍賣則是在看看情況, 近幾年以動漫商品來說真的商品量大減, 不知道還有沒有支援的必要...。