🔰JS初心者が作るGoogle extension V3 ⑧ -start/stop/reset押した時の挙動-

前回の続き　→ 🔰JS初心者が作るGoogle extension V3 ⑦ -初インストール時の処理/５分間の再接続処理--

完成した作品は　→　こちら🐕

start/stop/reset押した時の挙動

background.js

let stopId

//start・stop・resetボタン押された時の処理
chrome.runtime.onMessage.addListener(async function(request, sender, sendResponse){
    await keepAlive();

    //switchがonの時 かつ stopIdがnullの時
    if(request.switch == "on" && stopId == null){
        stopId = setInterval(pomodoro_timer, 1000);
    }

    //switchがstopかresetの時
    if(request.switch == "stop" || request.switch == "reset"){
        clearInterval(stopId);
        stopId = null;
    }

    return true
})

stopIdはsetInterval()を入れるためのID。
使い方はsetInterval(実行したい関数,ミリ秒)。
ミリ秒なので1秒ごとに行いたい場合は1000を記入する。

request.switchはpopupのsendMessasgeから受け取ったものである。

タイマーをスタートさせたい時の条件は
request.switchがstartの時 かつ stopIdがnullの時にポモドーロタイマーが発動させるようにする。

タイマーをストップ・リセットさせたい時の条件は
request.switch が stop もしくは resetの時。
タイマーカウントのリセット自体はpopupのreset()で機能しているのでここでは共通の処理にしている。

現状background.jsはこうなっている。

background.js

let lifeline
let stopId

//初インストール時のフォームの初期値設定
chrome.runtime.onInstalled.addListener(() => {省略})

//start・stop・resetボタン押された時の処理
chrome.runtime.onMessage.addListener(async function(request, sender, sendResponse){省略})

//5分間の再接続処理
chrome.runtime.onConnect.addListener(port => {省略});

function keepAliveForced() {省略}

async function keepAlive() {省略}

拡張機能の記事リンク

🔰JS初心者が作るGoogle extension V3 ①
🔰JS初心者が作るGoogle extension V3 ② -popup.htmlの作成-
🔰JS初心者が作るGoogle extension V3 ③ -タブの切り替えの処理-
🔰JS初心者が作るGoogle extension V3 ④ -タイマーを表示させる-
🔰JS初心者が作るGoogle extension V3 ⑤ -スタート/ストップ/リセットの各ボタン機能-
🔰JS初心者が作るGoogle extension V3 ⑥ -タイマー作動中の有無で表示する画面の処理-
🔰JS初心者が作るGoogle extension V3 ⑦ -初インストール時の処理/５分間の再接続処理-
🔰JS初心者が作るGoogle extension V3 ⑧ -start/stop/reset押した時の挙動-
🔰JS初心者が作るGoogle extension V3 ⑨ -ポモドーロタイマーの処理-
🔰JS初心者が作るGoogle extension V3 ⑩ -popupのポモドーロタイマーの処理-
🔰JS初心者が作るGoogle extension V3 ⑪ -content.jsの処理-