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 ④ -タイマーを表示させる-

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

タイマーとボタンのステータス

現状まだタイマー自体の挙動は入れていないが、ボタンを押した際に複数のステータスを与える。
timerStatusとbtnStatusの２つの属性を足す。

timerStatusはタイマー自体のステータスで、true/falseで経過時間を表示の有無を決める。

btnStatusはタイマーが「start」状態、「stop」状態で、popupを再度開いた時のタイマーの挙動のスイッチとして担う。

この２つの属性をローカルストレージに保存してpopup画面を開いても値が継続して参照出来るようにする。

popup.js

let timerStatus;//タイマーが活動中(true)か否(false)かで,経過時間を表示の有無を決める
let btnStatus;//ボタンがstart・stopでpopupを再度開いた時の分岐点

ステータスを与えるために、ボタンだけ先に実装した、startボタン・stopボタン・resetボタンの機能を実装していく。

startボタンの実装

スタートボタンを押した時の挙動
①タイマーステータスをオンにする
②ボタンステータスをstartにする
③backgroundに秒数カウントを始めるためにスイッチオンの指示を出す
④タイマー作成ボタンを押せなくする
⑤popup画面のカウント残日数の表示

popup.js

function start() {
    //①
    timerStatus = true
    chrome.storage.local.set({timerStatus: timerStatus});

    //②
    btnStatus = "start"
    chrome.storage.local.set({btnStatus: btnStatus});

    //③
    chrome.runtime.sendMessage({switch: "on"});

    //④
    openModalBtn.setAttribute("disabled", true);

    //⑤この関数は後に解説
    popup_pomodoro_timer()
};

stopボタンの実装

ストップボタンを押した時の挙動
①backgroundに秒数カウントを一時停止のためにストップの指示を出す
②ボタンステータスをstopにする

popup.js

function stop() {
    //①
    chrome.runtime.sendMessage({switch: "stop"});

    //②
    btnStatus = "stop"
    chrome.storage.local.set({btnStatus: btnStatus});
};

resetボタンの実装

リセットボタンを押した時の挙動
①backgroundに秒数カウントを無かったことにするためにリセットの指示を出す
②リセットしたら画面上のポメを消す指示を飛ばす
③タイマー作成ボタンを押せるようにする
④タイマーステータスをオフにする
⑤カウントリセットした後、再度カウントを１から取得
⑥viewのリセット

popup.js

function reset() {
    //①backgroundに秒数カウントを無かったことにするためにリセットの指示を出す
    chrome.runtime.sendMessage({switch: "reset"});

    //②リセットしたら画面上のポメを消す指示を飛ばす
    chrome.tabs.query( {active:true, currentWindow:true}, function(tabs){
        chrome.tabs.sendMessage(tabs[0].id, {msg: "reset"})
    })

    //③タイマー作成ボタンを押せるようにする
    openModalBtn.removeAttribute("disabled")
    work_or_interval.innerHTML = "";

    //④タイマーステータスをオフにする
    timerStatus = false          
    chrome.storage.local.set({timerStatus: timerStatus});

    //⑤カウントリセットした後、再度カウントを１から取得
    get_timer_form()
    
    //⑥viewのリセット
    chrome.storage.local.get(['work_time'],function(v){
        work_second = v.work_time * 60
        chrome.storage.local.set({work_second: work_second});

        let min = Math.floor(work_second / 60);
        let sec = work_second % 60;
        view_timer.innerHTML = String(min).padStart(2,"0") + ":" + String(sec).padStart(2,"0");
    })
};

ボタン機能を実装できたら

start/stop/resetの関数をができたので、実際にボタンを押したらその関数が実行されるよう導入する。

popup.js

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

    //タイマーを作成したら、タイマーとボタンを表示
    timer_display();

    //各ボタンを押した時の動作をここに入れる
    startBtn.onclick = function() {
        start();
    };
    
    stopBtn.onclick = function() {
        stop();
    };
    
    resetBtn.onclick = function() {
        reset();
    };
};

ざっくりとpopup.jsはこんな感じ

popup.js

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

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

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

    //タイマーを作成したら、タイマーとボタンを表示
    timer_display();

    //各ボタンを押した時の動作
    startBtn.onclick = function() {
        start();
    };
    
    stopBtn.onclick = function() {
        stop();
    };
    
    resetBtn.onclick = function() {
        reset();
    };
};

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

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

function start() {
    chrome.runtime.sendMessage({switch: "on"});

    openModalBtn.setAttribute("disabled", true);

    timerStatus = true
    chrome.storage.local.set({timerStatus: timerStatus});

    btnStatus = "start"
    chrome.storage.local.set({btnStatus: btnStatus});

    popup_pomodoro_timer()
};

function stop() {
    chrome.runtime.sendMessage({switch: "stop"});

    btnStatus = "stop"
    chrome.storage.local.set({btnStatus: btnStatus});
};

function reset() {
    chrome.runtime.sendMessage({switch: "reset"});

    chrome.tabs.query( {active:true, currentWindow:true}, function(tabs){
        chrome.tabs.sendMessage(tabs[0].id, {msg: "reset"})
    })

    openModalBtn.removeAttribute("disabled")
    work_or_interval.innerHTML = "";

    timerStatus = false          
    chrome.storage.local.set({timerStatus: timerStatus});

    get_timer_form()
    
    chrome.storage.local.get(['work_time'],function(v){
        work_second = v.work_time * 60
        chrome.storage.local.set({work_second: work_second});

        let min = Math.floor(work_second / 60);
        let sec = work_second % 60;
        view_timer.innerHTML = String(min).padStart(2,"0") + ":" + String(sec).padStart(2,"0");
    })
};

拡張機能の記事リンク

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