More than 1 year has passed since last update.

🔰JS初心者が作るGoogle extension V3 ⑥ -タイマー作動中の有無で表示する画面の処理-

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

前回の続き　→ 🔰JS初心者が作るGoogle extension V3 ⑤ -スタート/ストップ/リセットの各ボタン機能-

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

タイマー作動中の有無で表示する画面の処理

popupの画面が閉じても、タイマーが継続中なのか、一時停止しているのかによって表示する画面を切り替える。

popup.js

chrome.storage.local.get(['timerStatus','btnStatus'], function(v) {
    if(v.timerStatus == true){
        timer_display();
        if(v.btnStatus == "start"){
            start();
        }else if(v.btnStatus == "stop"){
            stop();
        }

        startBtn.onclick = function() {
            start();
        };
        
        stopBtn.onclick = function() {
            stop();
        };
        
        resetBtn.onclick = function() {
            reset();
        };
    }else if(v.timerStatus == false){
        chrome.runtime.sendMessage({switch: "reset"});
    }
});

popup.jsの全体像は以下

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

以前飛ばしたpopup_pomodoro_timer()について細かく見ていく。

backgroundの実装

本来popup.jsでタイマー機能を搭載しようとしたが、popup画面を閉じると、タイマーが裏で動いてくれないとのこと。
backgroundであれば常に後ろで動いてくれるので、分けて実装を行なった。

popup.js → タイマーのview担当
background.js　→ タイマーのカウントなどの中身の担当

として大まかにわけている。
start()内にあるpopup_pomodoro_timer()は
bgで毎秒ずつ減らしているのを、popupで表示するために、bgから値を取ってきて表示するための関数。

なのでpopup_pomodoro_timer()を実装する前に、bgにてタイマーの中身を実装しなければpopup_pomodoro_timer()を導入できないので後に実装していく。

拡張機能の記事リンク

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