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

前回の続き　→ [🔰JS初心者が作るGoogle extension V3 ⑨ -ポモドーロタイマーの処理-](https://qiita.com/mmaumtjgj/items/2c2e117d31db69adb825)

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

## popupのポモドーロタイマーの処理
popupに戻ってきました。
おさらいですが現状popupはこうなってます。
```popup.js

//色々定義
const ~~
let ~~
//がいっぱい

//タブの切り替え
document.addEventListener('DOMContentLoaded', function(){省略}, false);

//「タイマーを設定する▷」を押した時
makeTimerBtn.onclick = function() {省略};

//フォームから時間内容を取得
function get_timer_form(){省略}

//タイマーを作成したら、タイマーとボタンを表示
function timer_display(){省略}

function start() {
    途中まで省略
    popup_pomodoro_timer()
};

function stop() {省略};

function reset() {省略};
```

この``start()``内にある``popup_pomodoro_timer()``の中身を見ていく。

---

``popup_pomodoro_timer()``の中に
``popup_count_down()``と``popup_interval_count_down()``があります。

bgの``pomodoro_timer()``と違うのは、bgから送られてきた値を使うので、``request.~~``を使うやすくするために関数の中に関数を入れました。

中に入れてるものの、構成はbgの``pomodoro_timer()``さほど変わらないので軽く詳細を。

```js
function popup_pomodoro_timer() { 
    //bgから送られてくる
    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
        //集中時間が0秒以上の場合popup_count_down()を実行
        if (request.work_second >= 0) {
            popup_count_down()
        //休憩時間が0より上(0を含まない)の場合popup_interval_down()を実行
        }else if(request.interval_second > 0){
            popup_interval_count_down()
        //休憩時間が０になるかつ、経過時間と総秒数が同じ場合reset()を行う
        }else if(request.interval_second == 0 && request.elapsed_time == request.total_second){
             reset()
          };
        };

        //timer_display()と同様の処理
        function popup_count_down() {
            let min = Math.floor(request.work_second / 60);
            let sec = request.work_second % 60;
            work_or_interval.innerHTML = "<div class='working pt-3'>集中タイム！</div>";
            view_timer.innerHTML = String(min).padStart(2,"0") + ":" + String(sec).padStart(2,"0");
        }

        function popup_interval_count_down() {
            let min = Math.floor(request.interval_second / 60);
            let sec = request.interval_second % 60;
            work_or_interval.innerHTML = "<div class='intervaling pt-3'>休憩タイム！</div>";
            view_timer.innerHTML = String(min).padStart(2,"0") + ":" + String(sec).padStart(2,"0");
        }

        return true
    })
};
```

popupとbackgroundは大まかに導入できたので、次回はbackgroundで出てきたcontent.jsを見ていく。

## 拡張機能の記事リンク
[🔰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)