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分で停止（非アクティブ化）してしまうので再接続する必要があるため。

再接続の処理はこちらの記事を参考にしました。

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つずつ見ていく。

//拡張機能と繋いだ時
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」のものに繋ぐ処理を行なっている。

拡張機能の記事リンク

参考記事

ブラウザ拡張機能の Manifest V3 の問題