More than 1 year has passed since last update.

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

Last updated at 2022-11-14Posted at 2022-11-03

前回の続き　→ 🔰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() {省略}

拡張機能の記事リンク

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up