More than 1 year has passed since last update.

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

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

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

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

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()さほど変わらないので軽く詳細を。

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を見ていく。

拡張機能の記事リンク

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