🔰JS初心者が作るGoogle extension V3 ⑦ -初インストール時の処理/５分間の再接続処理-

前回の続き　→ [🔰JS初心者が作るGoogle extension V3 ⑥ -タイマー作動中の有無で表示する画面の処理-](https://qiita.com/mmaumtjgj/items/d8083ac9576ea9dbe123)

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

## background.js
このjsファイルでは
・拡張機能を初めてインストールした時にする処理
・５分間の再接続処理
・start/stop/reset押した時の挙動
・ポモドーロタイマーの処理
を行う。この記事では拡張機能を初めてインストールした時にする処理を記述していく。

## 初インストール時の処理
初めてインストールした時、タイマーのフォームに最初からデフォルト値を入れて置きたかったので、``chrome.runtime.onInstalled.addListener(() => {}``を使うとインストールした時に処理を行える。

```background.js
//初インストール時のフォームの初期値設定
chrome.runtime.onInstalled.addListener(() => {
    chrome.storage.local.set({repeat_time: 1});
    chrome.storage.local.set({work_time: 25});
    chrome.storage.local.set({interval: 5});
})
```
ローカルストレージに値を保存したら、viewに反映させるようにするためpopupに以下のコードを追加する。
```popup.js
//form数値の反映
chrome.storage.local.get(['repeat_time','work_time','interval'], function(v) {
    document.getElementById('repeat_time_value').value = v.repeat_time
    document.getElementById('work_time_value').value = v.work_time
    document.getElementById('interval_value').value = v.interval
})
```

## ５分間の再接続処理
この５分間再接続処理を行う理由として、v2までバックグラウンドページは永続的であったが、V3のバックグラウンド（サービスワーカー）は、5分で停止（非アクティブ化）してしまうので再接続する必要があるため。

再接続の処理は[こちらの記事](https://stackoverflow.com/questions/66618136/persistent-service-worker-in-chrome-extension/66618269#66618269)を参考にしました。

```background.js
let lifeline

//5分間の再接続処理
chrome.runtime.onConnect.addListener(port => {
    if (port.name === 'keepAlive') {
        lifeline = port;
        setTimeout(keepAliveForced, 295e3); //4分55秒
    }
});

function keepAliveForced() {
    lifeline?.disconnect();
    lifeline = null;
    keepAlive();
}

async function keepAlive() {
    chrome.runtime.connect({ name: 'keepAlive' })
}
```
1つずつ見ていく。
```js
//拡張機能と繋いだ時
chrome.runtime.onConnect.addListener(port => {
    //もしポートネームが'keepAlive'だった時
    if (port.name === 'keepAlive') {
        lifeline = port;
        //4分55秒ごとにkeepAliveForced（）を行う
        setTimeout(keepAliveForced, 295e3); //4分55秒
    }
});

function keepAliveForced() {
    //lifelineがundefinedまたはnullである可能性がある場合でも切断する
    lifeline?.disconnect();
    lifeline = null;
    keepAlive();
}

async function keepAlive() {
    //lifelineがなけれポートネームが'keepAlive'のものに繋ぐ
    chrome.runtime.connect({ name: 'keepAlive' })
}
```
[オプショナルチェーン (?.)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining)

要約すると
・4分55秒ごとにkeepAliveForced（）をやる
・keepAliveForced（）はポートを切断してkeepAlive()を行う
・keepAlive()はポート名が「keepAlive」のものに繋ぐ処理を行なっている。

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

## 参考記事
[ブラウザ拡張機能の Manifest V3 の問題](https://www.bugbugnow.net/2021/11/browser-extension-manifest-v3-issue.html)