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

前回の続き　→ [🔰JS初心者が作るGoogle extension V3 ⑧ -start/stop/reset押した時の挙動-](https://qiita.com/mmaumtjgj/items/6b638388e7c39b2863f4)

完成した作品は　→　[こちら🐕](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)

## ポモドーロタイマーの処理
前回の記事で``stopId = setInterval(pomodoro_timer, 1000);``と出てきました。ようやくメインの``pomodoro_timer（）``を見ていきます。

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

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

```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にて後ほど）
③休憩時間を毎秒減らしていき、その度値を保存する。
```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に毎秒減っているカウントを送っている
```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() {省略};
```
## 拡張機能の記事リンク
[🔰JS初心者が作るGoogle extension V3 ①](https://qiita.com/mmaumtjgj/items/6538fd8814d93e9d7fa6)
[🔰JS初心者が作るGoogle extension V3 ② -popup.htmlの作成-](https://qiita.com/mmaumtjgj/items/ef7bf1116988bfeedd84)
[🔰JS初心者が作るGoogle extension V3 ③ -タブの切り替えの処理-](https://qiita.com/mmaumtjgj/items/0a9e73058727b101579b)
[🔰JS初心者が作るGoogle extension V3 ④ -タイマーを表示させる-](https://qiita.com/mmaumtjgj/items/6e1a978656580dab59d7)
[🔰JS初心者が作るGoogle extension V3 ⑤ -スタート/ストップ/リセットの各ボタン機能-](https://qiita.com/mmaumtjgj/items/d15df85bcb9dcf31d87d)
[🔰JS初心者が作るGoogle extension V3 ⑥ -タイマー作動中の有無で表示する画面の処理-](https://qiita.com/mmaumtjgj/items/d8083ac9576ea9dbe123)
[🔰JS初心者が作るGoogle extension V3 ⑦ -初インストール時の処理/５分間の再接続処理-](https://qiita.com/mmaumtjgj/items/abd7f4f3f63624dec6f9)
[🔰JS初心者が作るGoogle extension V3 ⑧ -start/stop/reset押した時の挙動-](https://qiita.com/mmaumtjgj/items/6b638388e7c39b2863f4)
[🔰JS初心者が作るGoogle extension V3 ⑨ -ポモドーロタイマーの処理-](https://qiita.com/mmaumtjgj/items/2c2e117d31db69adb825)
[🔰JS初心者が作るGoogle extension V3 ⑩ -popupのポモドーロタイマーの処理-](https://qiita.com/mmaumtjgj/items/5e80fa8fca2fa51b7445)
[🔰JS初心者が作るGoogle extension V3 ⑪ -content.jsの処理-](https://qiita.com/mmaumtjgj/items/cae1ae8e2869e8414567)