前回の続き → 🔰JS初心者が作るGoogle extension V3 ⑥ -タイマー作動中の有無で表示する画面の処理-
完成した作品は → こちら🐕
background.js
このjsファイルでは
・拡張機能を初めてインストールした時にする処理
・５分間の再接続処理
・start/stop/reset押した時の挙動
・ポモドーロタイマーの処理
を行う。この記事では拡張機能を初めてインストールした時にする処理を記述していく。
初インストール時の処理
初めてインストールした時、タイマーのフォームに最初からデフォルト値を入れて置きたかったので、chrome.runtime.onInstalled.addListener(() => {}を使うとインストールした時に処理を行える。
//初インストール時のフォームの初期値設定
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に以下のコードを追加する。
//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分で停止（非アクティブ化）してしまうので再接続する必要があるため。
再接続の処理はこちらの記事を参考にしました。
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つずつ見ていく。
//拡張機能と繋いだ時
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' })
}
要約すると
・4分55秒ごとにkeepAliveForced（）をやる
・keepAliveForced（）はポートを切断してkeepAlive()を行う
・keepAlive()はポート名が「keepAlive」のものに繋ぐ処理を行なっている。
拡張機能の記事リンク
🔰JS初心者が作るGoogle extension V3 ①
🔰JS初心者が作るGoogle extension V3 ② -popup.htmlの作成-
🔰JS初心者が作るGoogle extension V3 ③ -タブの切り替えの処理-
🔰JS初心者が作るGoogle extension V3 ④ -タイマーを表示させる-
🔰JS初心者が作るGoogle extension V3 ⑤ -スタート/ストップ/リセットの各ボタン機能-
🔰JS初心者が作るGoogle extension V3 ⑥ -タイマー作動中の有無で表示する画面の処理-
🔰JS初心者が作るGoogle extension V3 ⑦ -初インストール時の処理/５分間の再接続処理-
🔰JS初心者が作るGoogle extension V3 ⑧ -start/stop/reset押した時の挙動-
🔰JS初心者が作るGoogle extension V3 ⑨ -ポモドーロタイマーの処理-
🔰JS初心者が作るGoogle extension V3 ⑩ -popupのポモドーロタイマーの処理-
🔰JS初心者が作るGoogle extension V3 ⑪ -content.jsの処理-