content.js

content.jsでは実際にタイマーの通知画面や音声、そして一番重要なポメラニアンを表示させる処理を行います。

bgから、指定した時間になったらポメなどを出して〜という指示を入れましたが、そのポメを表示するため、拡張ディレクトリ内の画像にアクセスする必要があるのでその処理を行います。

content.jsの流れはこんな感じです。
・拡張ディレクトリ内の画像や音声にアクセスする
・画像や音声をHTMLに埋め込む
・キャラクターとdialogの表示処理

拡張ディレクトリ内の画像にアクセスする

画像アクセス方法は簡単で
chrome.runtime.getURL()の括弧内に画像のパスを入力するだけ。

content.js

//キャラ画像取得
const pome_happy_url = chrome.runtime.getURL('src/images/pome_happy_2.png');
const pome_angry_url = chrome.runtime.getURL('src/images/pome_angry.png');

//dialog画像取得
const start_dialog_img_url = chrome.runtime.getURL('src/images/start_dialog_img.png');
const interval_dialog_img_url = chrome.runtime.getURL('src/images/interval_dialog_img.png');
const finish_dialog_img_url = chrome.runtime.getURL('src/images/finish_dialog_img.png');

//通知音取得
const pome_work_alarm_url = chrome.runtime.getURL('src/mp3/pome_work_alarm.mp3#t=0,2.5');
const pome_interval_alarm_url = chrome.runtime.getURL('src/mp3/pome_interval_alarm.mp3');
const finish_alarm_url = chrome.runtime.getURL('src/mp3/finish_alarm.mp3');

画像や音声をHTMLに埋め込む

音声や画像を埋め込むのでCSSが必要になってくるのでそれも一緒に埋め込む。

content.js

//通知音取得
const pome_work_alarm_url = chrome.runtime.getURL('src/mp3/pome_work_alarm.mp3#t=0,2.5');
const pome_interval_alarm_url = chrome.runtime.getURL('src/mp3/pome_interval_alarm.mp3');
const finish_alarm_url = chrome.runtime.getURL('src/mp3/finish_alarm.mp3');

//HTML音声タグ
const pome_work_alarm_tag = `<audio src="${pome_work_alarm_url}" id="pome_work_alarm"></audio>`;
const pome_interval_alarm_tag = `<audio src="${pome_interval_alarm_url}" id="pome_interval_alarm"></audio>`;
const finish_alarm_tag = `<audio src="${finish_alarm_url}" id="finish_alarm"></audio>`;

//音声をhtmlに挿入
document.querySelector("body").insertAdjacentHTML("afterbegin", pome_work_alarm_tag);
document.querySelector("body").insertAdjacentHTML("afterbegin", pome_interval_alarm_tag);
document.querySelector("body").insertAdjacentHTML("afterbegin", finish_alarm_tag);
.
.
//省略

とこんな感じでCSSを含んだHTMLを埋め込んでいる。
省略した箇所のはこちらで確認できる。

キャラクターとdialogの表示処理

ここでbgでstartやresetなどの指示された時の処理を行う。

content.js

//スタートdialog表示
chrome.runtime.onMessage.addListener(async function(request, sender, sendResponse){
    if(request.msg == "start"){       
        if(request.msg == "start"){
        document.getElementById("pome_work_alarm").play()
        document.querySelector("body").insertAdjacentHTML("afterbegin", pome_angry_tag);

        //繰り返し処理を行なった時、休憩用のキャラを非表示にする
        if(interval_dialog.showModal){
            interval_dialog.close()
            start_dialog.showModal();
        }else{
            start_dialog.showModal();
        }

        if(document.getElementById("pome_happy_img")){
            document.getElementById("pome_happy_img").remove();
        }
    }
    return true
})

//スタートdialogの閉じるボタン
document.getElementById('start_ok_btn').onclick = function(){
    start_dialog.close()
}

//休憩のdialog表示
chrome.runtime.onMessage.addListener(async function(request, sender, sendResponse){
    if(request.msg == "interval"){
        start_dialog.close()
        interval_dialog.showModal();
        document.getElementById("pome_interval_alarm").play()
        document.getElementById("pome_angry_img").remove()        document.querySelector("body").insertAdjacentHTML("afterbegin", pome_hppy_tag);
    }
    return true
})

//休憩のdialogの閉じるボタン
document.getElementById('interval_ok_btn').onclick = function(){
    interval_dialog.close()
}

//フィニッシュのdialog表示
chrome.runtime.onMessage.addListener(async function(request, sender, sendResponse){
    if(request.msg == "finish"){
       interval_dialog.close()
       finish_dialog.showModal();
       document.getElementById("finish_alarm").play()
       document.getElementById("pome_happy_img").remove();
    }
    return true
})

//フィニッシュのdialogの閉じるボタン
document.getElementById('finish_ok_btn').onclick = function(){
    finish_dialog.close()
}

//リセットボタン押したらキャラが消える
chrome.runtime.onMessage.addListener(async function(request, sender, sendResponse){
    if(request.msg == "reset"){
        if(document.getElementById("pome_angry_img")){
            document.getElementById("pome_angry_img").remove();
        }else if(document.getElementById("pome_happy_img")){
            document.getElementById("pome_happy_img").remove();
        }
    }
})

終わりに

以上でポメドーロに関する記事は以上です。
新たに機能を追加した際にはまたこの記事の続きから書きたいと思います。

拡張機能の記事リンク

参考記事

Chrome 拡張ディレクトリ内の画像にアクセスする方法
 HTMLDialogElement.showModal() - ダイアログをモーダルウィンドウで開く