　この記事は利用状況把握拡張機能①の続きですので、そちらにも目を通した方が理解しやすいと思います。
　ここでは、拡張機能のstorage API、Content ScriptとService Workerについて述べている。

　前回のページ　→　利用状況把握拡張機能①

chrome.storage

　manifestファイルの読み込みが完了したため、最初に拡張機能で使う予定のデータをchrome storageへと一通り入れておく。
chrome.storageへとデータを入れるには、以下のように記述。

chrome.storage.local.set({ test_key : "value" });

chrome.storageはオブジェクト型のデータなので、keyに関しては自動で生成するため問題はない。

データを取得する際は以下のように記述する

chrome.storage.local.get().then((result)=>{
    console.log(result.test_key); // "value"
});

chrome storageのデータを確認したい場合は、拡張機能と関連したページのデベロッパーツールを開く必要がある（content scriptによる特定ページなどは不可能）。無難なのは、拡張機能の管理ページにある、ビューを検証をクリックして開く方法。
開いたらConsoleに

chrome.storage.local.get(null,function(data){console.info(data) });

と打ち込む。以下のようなデータが現在の拡張機能のstorageに入っているデータ一覧となる。

　既にいくつかデータが入っているが、ここで少し解説をば。

LockScreen は制限時間を超えたページに対して設ける使用禁止時間。30分間、利用できなくさせるデータといったところ
PauseTimeとPauseTime_Hの二つは、前ページで言及した、特定時間帯の制限に関するデータ。配列の[0]が開始時間帯で、[1]が終了時間帯としている。
Pause_Check はその特定時間帯の機能自体を有効にするかどうか。falseで無効、trueで有効。
TimeReset は最後の方に記述するが、記録データの定期リセットに関するデータ。詳細はその時にて。

利用時間の記録（content_script・service_worker）

　データも入れ終わったため、ブラウザの各ページの利用時間を計る利用時間の記録機能を作成する。Content Script側から現在のページのURLを取得し、Service Workerへと情報を送り利用時間の計測を開始する。
　最初にページが読み込まれContent Scriptが実行される。まずは訪れたサイトに対しそのページのURLを取得して、拡張機能が有効な間に初めて訪れたサイトなら、そのURLと0を初期値としたそのページの利用時間データ二つをstorageへと同時に入れる。そうして、[“HTTPS://○○/〇” ]←→[0(利用時間)]と一致するようにする。
　保存後、URLや識別番号といった情報をService Worker側へと送信する。

content_scripts.js

chrome.storage.local.get().then((result)=>{
    for( i = 0; i < result.All_URL.length; i++){
        if( result.All_URL[i].includes(location.host) ){
            allFlag = true;
        }
    }
    let newList = result.All_URL;
    let newListT = result.All_Time;
    let i = result.All_URL.length;
    newList.push(location.host);
    newListT.push(0);
    chrome.storage.local.set({ All_URL : newList });
    chrome.storage.local.set({ All_Time : newListT });
    chrome.runtime.sendMessage({name : 'All_URL', url : currentURL,num : m });
});

　storageは仕様上、上書き処理なので一度複製し追加してからもう一度storageへとデータを保存している。chrome.runtime.sendMessageでService Workerへとメッセージを送信している。一緒にurlと添え字を向こうへと送る。送信する情報は、メッセージ名とURLとURLの識別番号。Service Worker側では、メッセージを受け取りsetIntervalで利用時間のカウントを開始する。

service_worker.js

chrome.runtime.onMessage.addListener((msg,sender)=>{
    if( msg.name === 'All_URL'){
        chrome.tabs.query({active:true,currentWindow:true},async function(activeTab){
            chrome.storage.local.get().then((result) =>{
                let counttime = 0;
                clearInterval(All_interval)
                All_interval = setInterval(function(){
                    counttime = counttime + 1;
                    measureViewTimeAll(msg.num,counttime,result.All_URL,result.All_Time,result.WeekdataArchiveAll );
                },1000);
            });
        });
    }
});

　chrome.runtime.onMessage.addListnerは、拡張機能内から送信されたメッセージを受信した際に発生するイベント。このイベントはどんなメッセージでも発生する。Service worker.jsにはもう一つ同じイベントがあり、そちらと処理が混ざらないようにメッセージに名前を付け、if文で区別させている。
chrome.tabs.queryは、現在のタブ情報を配列で取得する。active:true,currentWindow:trueとパラメータに追加すると、現在のページ情報を取得することが出来る。
　こちらでsetIntervalを一秒間隔で実行してカウントを開始している。中ではインクリメントと、storageへと利用時間を更新させる、measureViewTimeAll関数がある。

service_worker.js

functionmeasureViewTimeAll(i,counttime,All_URL,All_Time,WeekdataArchiveAll{
    let newlist = All_Time;
    let Week = getWeek();
    newlist[i] = newlist[i] + 1;
    	
    chrome.storage.local.set({ All_Time : newlist });
    let Obj = {};
    for(let i = 0; i < All_URL.length; i++){
        let URL = All_URL[i];
        if( All_Time[i] === undefined)
            Obj[URL] = 0;
        else
            Obj[URL] = All_Time[i];
    }
    WeekdataArchiveAll[Week] = Obj;
    chrome.storage.local.set({ WeekdataArchiveAll : WeekdataArchiveAll });
}

　時間の更新処理。動きとしては+1した利用時間データをstorageへと保存をしているだけなため、URLをリストに追加する最初のContent Scriptとそこまで変わらない。
　WeekdataArchiveAllは、利用時間を一週間分保存させるためのもの。配列オブジェクトであり、曜日の数の配列の中に、キーをドメイン、バリューを利用時間として保存している。このデータは、後で追加する週の累計利用時間のためにある。

service_worker.js

chrome.tabs.onActivated.addListener(function(activeInfo){
    clearInterval(All_interval);
    chrome.storage.local.get().then((result) =>{
        chrome.tabs.get(activeInfo.tabId,function(activeTab){
            //処理が同じため省略
        });
    });
});

　chrome.tabs.onActivated.addListenerは、タブ・ウィンドウを移動した際に発生するイベント。こちらもonMessageと同じく、利用時間の計測の処理をしている。
　Content Scriptはページを読み込んだ際に実行されるため、タブの移動などには対応できない。そのためService Workerの方からタブ・ウィンドウ移動時にカウントができる処理を記述する。なお、setInterval関数の複数実行を防ぐためにどちらかのイベントが発生した時、最初にclearInterval関数を実行させている。

　実装後、利用時間が記録されているかをConsoleで確認。

きちんとページごとの利用時間を記録し、一つのページのみを計測している。

　ここまでを実装してから、一度ブラウザを通常通りに使用し、storageへとデータが保存されているかを確認する。

　ちゃんとデータが入っていることを確認できた。上記ではQiitaのページの利用時間が5114秒、軽く1時間25分ほど経っている。
利用時間の記録は、これにて完成。

関連する記事