More than 1 year has passed since last update.

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

Last updated at 2023-03-14Posted at 2022-11-03

前回の続き　→ 🔰JS初心者が作るGoogle extension V3 ⑥ -タイマー作動中の有無で表示する画面の処理-

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

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 の問題

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