前言

這幾天已經大概學習到整個Chrome Extension的開發模式了，所以我們應該要來綜合一下我們學到的技術，

從UI頁面到後台腳本以及內容腳本，我們用一個案例來實際開發，

並且試著把這個專案正式發佈，而剛好最近有一個idea，

就是用Chrome Extension執行搜尋火車時刻表的功能，

預計這個系統會做個幾天，假設需求為下，如果有問題就邊做邊調整需求

目標功能

• 使用UI介面開啟想查看的時刻表與設定搜尋條件
• 使用內容腳本將資料帶入台鐵網站畫面並監控Dom
• 利用後台腳本監控所有服務與管理資料

網站分析

首先，要先分析一下台鐵網站的訂票方式

https://www.railway.gov.tw/tra-tip-web/tip/tip001/tip112/gobytime

利用network查看發現網站是SSR渲染出來的，所以應該就是直接對DOM操作就可以了

然後再發現列表查詢的方式是不同的三個頁面

• https://tip.railway.gov.tw/tra-tip-web/tip/tip001/tip112/gobytime - 依時刻
• https://tip.railway.gov.tw/tra-tip-web/tip/tip001/tip112/gobystation - 依車站
• https://tip.railway.gov.tw/tra-tip-web/tip/tip001/tip112/gobytrainno - 依車次

並且發現input以及select的資料都是用字串傳送過去後台

太好了，就可以直接寫入即可，不用做很多的變化運算

其實這樣的系統真的蠻適合用chrome extension實現的

那我們明天就開始切UI吧！