今天就不廢話了，繼續回到coding

首先，我們還是先建立好一個乾淨的專案，暫定有以下資料

而 store/train.json 裡則是放著今天整理好的靜態資料

{
  "train-list": [
    {
      "id": "0900",
      "name": "基隆"
    },
    {
      "id": "0930",
      "name": "七堵"
    },
    {
      "id": "0980",
      "name": "南港"
    },
    {
      "id": "0990",
      "name": "松山"
    },
    {
      "id": "1000",
      "name": "臺北"
    },
    {
      "id": "1010",
      "name": "萬華"
    }...
  ]
}

註:目前先做一個簡單版本，所以只會有一些常用的大站，等以後如果有時間再補上齊全的功能

而我們今天就來測試內容腳本，看有沒有辦法真的只用DOM操作就能完成查詢功能，
老樣子,先到manifest寫好格式

然後回到內容腳本，直接對網址做解析(其實也可以在manifest就match各別載入js，這樣用起來更簡潔，
但目前程式量不大所以還是先放一個檔案，偷懶一點就好

content_script/searchTrain.js

switch(location.pathname){
    case '/tra-tip-web/tip/tip001/tip112/gobytime':
        runTrainByTime()
        break;
    case '/tra-tip-web/tip/tip001/tip112/gobystation':
        runTrainByStation()
        break;
    case '/tra-tip-web/tip/tip001/tip112/gobytrainno':
        runTrainByTrainno()
}

然後我們用F12解析了台鐵網站的dom元素，並且填入我們要填的資料

content_script/searchTrain.js

function runTrainByTime() {
    //起站
    document.getElementById('startStation').value = '3300-臺中'
    //迄站
    document.getElementById('endStation').value = '3470-斗六'
    //轉乘條件 點選 => 接受轉乘
    document.querySelector('.zone.form-horizontal #option2').click()
    //日期
    document.getElementById('rideDate').value = '2019/10/01'
    //開始時間
    document.getElementById('startTime').value = '06:00'
    //結束時間
    document.getElementById('endTime').value = '23:00'
    //查詢出發時間/抵達時間
    document.getElementById('startOrEndTime1').click()
    //車種
    document.getElementById('trainTypeList1').click()
    //送出
    // document.querySelector('input[type="submit"]').click()
}

function runTrainByStation() {
    //日期
    document.getElementById('rideDate').value = '2019/10/01'
    //車站
    document.getElementById('station').value = '3300-臺中'
    //送出
    document.querySelector('input[type="submit"]').click()
}

function runTrainByTrainno() {
    //日期
    document.getElementById('rideDate').value = '2019/10/01'
    document.getElementById('trainNo').value = '1111'
    //送出
    document.querySelector('input[type="submit"]').click()
}

於是開啟到依時刻查詢頁面後就會自動載入並且自動搜尋拉~

接下來的兩個頁面也是這樣

所以我們就可以專心來設計浮動UI頁面與後台腳本囉，等到最後再把資料傳回來這裡進行操作即可～