Chrome extension 學習手札 08 - 基本實作 - 番茄鐘 part3 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 8

Modern Web

Chrome extension 學習手札系列第 8 篇

Chrome extension 學習手札 08 - 基本實作 - 番茄鐘 part3

11th鐵人賽

崔斯

2019-09-19 23:50:24

839 瀏覽

分享至

本日目標:

完成選項頁面，顯示暫停或開始計時，讓使用者可以自己設定是否要開始計時

首先，我們要讓選項頁面可以跑出來，這時我們有一個API使用

chrome.runtime.openOptionsPage(callback)

接下來要讓選項頁面與後台腳本可以溝通，所以我隨便定了一個傳送的格式

{
    func: 'getTimeInfo'  //後台函式名稱
    data: {}             //任意填空資料
}

並且在後台頁面寫一個長時間連線的端口，並且綁上onMessage事件
bg.js

chrome.runtime.onConnect.addListener(function(port){
    if(port.name === 'pomodoro'){
        port.onMessage.addListener(function(request){
            port.postMessage(pomodoro.onMessage(request))
        })
    }
})

//pomodoro 為 Pomodoro的實作物件，並且擁有onMessage函式

先幫我們的選填頁面做個小畫面

option_page/option.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Pomodoro</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="app">
            <div id="rest" class="area">
                <div class="title">準備好開始工作了嗎！</div>
                <div class="btn">開始工作</div>
            </div>
            <div id="work" class="area">
                <div class="title">請先休息一下吧！</div>
                <div class="btn">開始休息</div>
            </div>
        </div>
        <script src="main.js"></script>
    </body>
</html>

再套上一點點CSS

因為我們要知道目前暫停頁面要顯示哪種狀態，所以選項頁面在載入了以後就來讀取到時間類型吧。

option_page/main.js

//與後台腳本建立一個長時間的連線
var port = chrome.runtime.connect({name:"pomodoro"})
//當請求回應時接收
port.onMessage.addListener(function(response){
    //如果是取得時間的回傳就控制畫面切換
    if(response.func === 'getTimeInfo'){
        document.getElementById(response.timeType).style.display = 'block'
        document.getElementById(response.timeType === 'work' ? 'rest' : 'work').style.display = 'none'
    }
})

//發送請求-取得時鐘資訊
port.postMessage({func:'getTimeInfo'})

　就可以取到當前的時間狀態與時間次數了，就可以顯示不同的畫面
　接下來就可以綁定按鈕事件拉～

//將按鈕綁定事件
var btns = document.getElementsByClassName('btn')
Array.prototype.map.call(btns,node=>{
    node.addEventListener('click',switchAlarm)
})

//向後台腳本要求切換時鐘並運行
function switchAlarm(){
    port.postMessage({func: 'switchAlarm'})
    window.close()
}