More than 1 year has passed since last update.

🔰JS初心者が作るGoogle extension V3 ⑨ -ポモドーロタイマーの処理-

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

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

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

ポモドーロタイマーの処理

前回の記事でstopId = setInterval(pomodoro_timer, 1000);と出てきました。ようやくメインのpomodoro_timer（）を見ていきます。

pomodoro_timer（）は
ポモドーロタイマー＝集中時間用カウント + 休憩用カウント
pomodoro_timer() = count_down() + interval_count_down()

count_down()

まずは集中時間用カウント、count_down()から。
①タイマー作成時にローカルストレージに保存した値を取ってくる
②画面にスタートの通知やポメを出す指示を出す（content.jsにて後ほど）
③集中時間を毎秒減らしていき、その度値を保存する。

function count_down() {
  //①
  chrome.storage.local.get(['work_second','constant_work_second'],function(v){
        //②
        //集中時間がMAXの時（25分なら1500秒）
        if(v.work_second == v.constant_work_second){
            chrome.tabs.query( {active:true, currentWindow:true}, function(tabs){
                chrome.tabs.sendMessage(tabs[0].id, {msg: "start"})
            })
        }
        //③
        v.work_second--;
        chrome.storage.local.set({work_second: v.work_second});
    })
};

interval_count_down()

次は休憩用カウント、interval_count_down()。
count_down()と構成はほぼ一緒である。
①タイマー作成時にローカルストレージに保存した値を取ってくる
②画面に休憩の通知や違うポメを出す指示を出す（content.jsにて後ほど）
③休憩時間を毎秒減らしていき、その度値を保存する。

function interval_count_down() {
    //①
 chrome.storage.local.get(['interval_second','constant_interval_second'],function(v){
        //②
        //休憩時間がMAXの時（5分なら３00秒）
        if(v.interval_second == v.constant_interval_second){
            chrome.tabs.query( {active:true, currentWindow:true}, function(tabs){
                chrome.tabs.sendMessage(tabs[0].id, {msg: "interval"})
            })
        }
        //③
        v.interval_second--;
        chrome.storage.local.set({interval_second: v.interval_second});
    })
};

pomodoro_timer()

①タイマー作成時にローカルストレージに保存した値を取ってくる
②集中時間が0秒以上の場合、count_down()を実行
③休憩時間が0秒より上（０は含まない）の場合、interval_count_down()を実行
④休憩時間が0秒になった時、１ループの秒数を経過時間に追加し保存
⑤経過時間が総秒数に満たなかった場合、0になった集中時間と休憩時間を再度保存し直す
⑥ループが終わればポモドーロタイマーを止め、タイマーステータスをfalseにし、タイマー終了の合図をcontent.jsに送る
⑦popup.jsに毎秒減っているカウントを送っている

function pomodoro_timer() {
    //①
    chrome.storage.local.get([
        'work_time',
        'work_second',
        'interval',
        'interval_second',
        'elapsed_time',
        'one_roop_second',
        'total_second'
    ],function(v){
        //②
        if (v.work_second >= 0) {
            count_down()
        //③
        }else if(v.interval_second > 0){
            interval_count_down()
        //④
        }else if(v.interval_second == 0){
            v.elapsed_time += v.one_roop_second;
            chrome.storage.local.set({elapsed_time: v.elapsed_time});
            //⑤
            if(v.elapsed_time < v.total_second){
                v.work_second = v.work_time * 60;
                v.interval_second = v.interval * 60;
                chrome.storage.local.set({work_second: v.work_second});
                chrome.storage.local.set({interval_second: v.interval_second});
            }else{
                //⑥
                clearInterval(stopId);

                timerStatus = false          
                chrome.storage.local.set({timerStatus: timerStatus});
                
                chrome.tabs.query( {active:true, currentWindow:true}, function(tabs){
                    chrome.tabs.sendMessage(tabs[0].id, {msg: "finish"})
                })
            };
        };

        //⑦
        chrome.runtime.sendMessage({
            work_time: `${v.work_time}`,
            work_second: `${v.work_second}`,
            interval: `${v.interval}`,
            interval_second: `${v.interval_second}`,
            elapsed_time: `${v.elapsed_time}`,
            total_second: `${v.total_second}`
        });
    });
};

⑦でpopupに値を渡しているので、これでタイマーのviewを処理できる。

今の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() {省略}

//ポモドーロタイマー
function pomodoro_timer() {省略};

// 集中時間用カウントダウン
function count_down() {省略};

// インターバル用カウントダウン
function interval_count_down() {省略};

拡張機能の記事リンク

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