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

前回の続き　→ [🔰JS初心者が作るGoogle extension V3 ④ -タイマーを表示させる-](https://qiita.com/mmaumtjgj/items/6e1a978656580dab59d7)

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

## タイマーとボタンのステータス
現状まだタイマー自体の挙動は入れていないが、ボタンを押した際に複数のステータスを与える。
``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");
    })
};
```

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