はじめに

プラグインを開発しているとよくtabs.query()を使用します。
このメソッドはbackground.jsで使用可能です。content.jsでは使用できません。
今、youtubeのiframeプレーヤーをプラグインを使用して作成していますが、そこで、tabIdやframeIdを使用することが多々あります。
作成中によくこのtabIdでエラーが起こります。
どうやら、tabIdやframeIdを指定してメソッドを実行しているのですが、正しいIdではないようなエラーメッセージが出ます。複数のタブを使うプラグインのため、例えば、今のアクティブタブのtabIdを知りたいことがよくあります。いちいち、コンソールデバッガーを開いてチェックするのは、結構面倒です。そこで、今回、この支援ポップ画面を作成しました。

支援ポップ画面

以下にそのサンプル画面を示します。

popup.html

プラグインのアイコン(右上のオレンジ色のボタン)をクリックすると、TinyYoutubePlayerプラグインの小窓が表示されます。
ここで、タブ支援ポップにチェックを入れ、さらに実行モード(サンプルではランダムリストモード)のいずれかにチェックを入れると以下の画面が表示されます。

支援ポップ画面

この画面では、ランダムリストのyoutubeプレーヤーとタブ支援画面が表示されています。

ここで、背景色が薄いピンク色をした2つ表示があります。左側の数値はアクティブタブのtabIdを表しています。
右側の表示は、すべてのタブの情報を示しています。
左から、それぞれのタブのactiveステータス、tabId、タイトル、urlを表示しています。

この支援ポップ画面で、タブを切り替える毎に、デバッガーを開かなくてもアクティブタブのtabId他の情報を知ることができます。

これらの情報があれば、デバックするときに役に立ちます。
デバックでは、conso;e.log()メソッドを使用して、これらのtabIdなどが表示しますが、その時、どのタブがどのtabIdなのかを知る必要があります。そのようなときには便利です。

マニフェストファイル(ご参考)

manifest.json

{
  "manifest_version": 3,
  "name": "TinyYoutubePlayerプラグイン v2.0",
  "version": "2.0",
  "description": "iframeにyoutubeプレーヤーを表示するプラグインです。",
  "background": {
    "service_worker":"tiny_youtube_player_background.js",
    "type": "module"
  },
    "externally_connectable": {
    "matches": ["https://*/*"
    ]
  },
  "content_security_policy": {
      "extension_pages": "script-src 'self'  'wasm-unsafe-eval'; object-src 'self'; "
  },
  "content_scripts": [{
    "matches": ["https://*/*"],
        "js": ["jquery.js","jquery-ui.js","tiny_youtube_player_content.js"],
        "css": ["jquery-ui.css"]     
         
  }],
  "permissions": [
  "webNavigation",
  "scripting",      
  "tabs"
  ],
  "action": {
     "default_icon":{
      "19": "yy19.png",
      "96": "yy96.png",      
      "128": "128youtube.png"      
    },
     "default_popup": "popup.html",
     "default_title": "TinyYoutubePlayerプラグイン v2.0"
  },
  "host_permissions": [
  "<all_urls>"
  ]

}

タブ支援ポップ画面のスクリプトコード

以下に、バックグラウンドファイルとコンテンツファイルの関連部分のコードで説明します。

(1) バックグラウンドファイルの抜粋

background.js

/*****************************************************************************
 * chrome.tabs.onActivated.addListener
 * リスナー
 * 
 ********************************************************************************/
chrome.tabs.onActivated.addListener(function (activeInfo) {
            console.log("▼▼タブアクティベイトリスナー　タブid取得");
            active_tabId = activeInfo.tabId;
            let dd;let aa;
            chrome.tabs.query({}, (tabs) => {
                  tabs_array = [];  
                  for(let i=0;i<tabs.length;i++){
                      dd = {"active":tabs[i].active,"title":tabs[i].title,"url":tabs[i].url,"id":tabs[i].id};
                      tabs_array.push(dd);
                  }
/***********************************************************************
* ここで、content.jsへtabs_popupメッセージを送信
* アクティブタブへtabs_popupメッセージを送信
* そこで、tabId他の情報を表示
************************************************************************/
                  //
                  dd = {"tabs_array":tabs_array,"tabs_popup":tabs_popup};
                  chrome.tabs.sendMessage(active_tabId, {type: 'tabs_popup',content:dd},(msg)=>{
                            //
                   });
              });
});

上記のコードは、タブがアクティブになった時に呼び出されるイベントリスナーです。
tabs.query()メソッドをコールして、すべてのタブの情報から一部を取得しています。
取得している情報は、activeとid、title、urlです。activeには、trueまたはfalseが入っています。trueはアクティブタブを意味しています。

(2)コンテンツファイルの抜粋

content.js

/********************************************************************************
*background.jsより、メッセージを受信
*play_modeメッセージで、
*・プレーヤー表示
*・リスト一覧を表示 
*********************************************************************************/
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
        //応答
        //
        switch (msg.type) {
            case "tabs_popup":
                       if(msg.content['tabs_popup']===true){ 
                                //
                                let data = msg.content['tabs_array']; 
                                /*******************************************************************
                                * ここで、popupして情報を表示
                                * tabs_arrayの情報を表示
                                *******************************************************************/
                                //let html = "<ul>";
                                let html ="";
                                for(let i=0;i<data.length;i++){
                                         //先にアクティブをチェックして
                                         if(data[i]['active']===true){
                                                 //
                                                 if(location.href === data[i]['url']){
                                                          html =data[i]['id'];

                                                 }
                                                 break;
                                         }   
                                }
                                 //
                                 if($("#tabs_panel").length !== 0){
                                           $("#tabs_panell").html("");
                                           //あり
                                           $("#tabs_panell").html(html);
                                 }else{
                                           //なし
                                           $("body").append("<div id='tabs_panel'>"+html+"</div>");
                                 }
                                 //スタイルをセット
                                 $("#tabs_panel").css({"padding-top": "5px","zoom":"1.4","z-index":"9999","background-color":"lightpink" ,"position":"fixed","top":"5%","left":"1%","width":"100px","height":"30px"});
                                 $("#tabs_panel").draggable();
                                 /*
                                  * 
                                  */
                                 /*******************************************************************
                                 * ここで、popupして情報を表示
                                 * tabs_arrayの情報を表示
                                 *******************************************************************/
                                 html = "<ul>";
                                 for(let i=0;i<data.length;i++){
                                          //
                                          if(data[i]['active']===true){
                                                       html += "<li> ("+i+") <span style='color:blue;'>"+data[i]['active']+"</span>　"+data[i]['id']+"　"+data[i]['title']+"　"+data[i]['url']+"</li><br>";
                                                    }else{
                                                       html += "<li> ("+i+") <span style='color:red;'>"+data[i]['active']+"</span>　"+data[i]['id']+"　"+data[i]['title']+"　"+data[i]['url']+"</li><br>";

                                          }
                                 }
                                 html += "</ul><button id='cancel_tabs_popup'>キャンセル</button>";

                                 //
                                 if($("#tabs_panel1").length !== 0){
                                           $("#tabs_panel1").html("");
                                           //あり
                                           $("#tabs_panel1").html(html);
                                 }else{
                                           //なし
                                           $("body").append("<div id='tabs_panel1'>"+html+"</div>");
                                 }
                                 //スタイルをセット
                                 $("#tabs_panel1").css({"padding": "5px","zoom":"1.4","z-index":"9999","overflow":"scroll","background-color":"lightpink" ,"position":"fixed","top":"5%","left":"55%","width":"500px","height":"200px"});
                                 $("#tabs_panel1").draggable();
                                 $("#cancel_tabs_popup").on('click',()=>{
                                             //
                                             //$("#tabs_popup").css("display","none");
                                             $("#tabs_panel1").remove();
                                             $("#tabs_panel").remove();
                                             //background.jsのtabs_popupをリセットする
                                             chrome.runtime.sendMessage({data: 'reset_tabs_popup'}, function (msg) {
                                            //応答は? 特になし。     

                                            });
                                             
                                             //alert("テスト");
                                 });
                        }
                        break;

これは、background.jsから"tabs_popup"メッセージを受信したときの処理です。
タブ支援ポップにチェックが入っていると、background.jsからタブ情報を配列で受信します。
data[]には、すべてのタブ情報のオブジェクト配列が格納されています。

プラグインのダウンロード

TinyYoutubePlayerプラグイン(ダウンロード)

実は、このプラグインはまだ、未公開です。まだ、未整理状態のためです。審査を受けるには様々な要件をクリアしなければならないのですが、その準備がまだ完了していません。しかし、使用はできるため、ここで、ダウンロードすることにしました。

または、以下のGitHubサイトからもダウンロードできます。
GitHubダウンロード

プラグインのインストール方法について

プラグインを任意のフォルダーにダウンロードしましたら、新規に作成した任意のフォルダーへ解凍してください。インストールは、chromeの拡張機能でそのフォルダーを指定します。chromeの拡張機能はブラウザーの設定の中にあります。その拡張機能ボタンをクリックすると「パッケージ化されていない拡張機能を読み込む」というボタンがあります。そのボタンをクリックして先ほどの解凍したフォルダーを選択してインストールします。

タブ支援ポップの使い方について

このプラグインをインストール後の使い方についてご説明いたします。
拡張機能がインストールされましたら、ブラウザーの右上に拡張機能のボタンメニューが表示されます。TinyYouyubePlayerプラグインv2.0はオレンジ色のボタンです。
そのボタンをクリックすると、TinyYouyubePlayerプラグインv2.0のpopup.htmlが開きます。

このようなポップアップ画面が表示されます。
ここで、「タブ支援ポップ」にチェックを入れて、さらに、いずれかの実行モードにチェックを入れるとTinyYoutubePlayer画面がアクティブタブのページ上に追加表示されます。
以後は、任意のタブを適宜アクティブする毎に、タブ支援ポップ画面を表示します。
小さいポップと大きいポップを表示ます。小さいポップには、アクティブタブのtabIdを表示しています。デバッグ時は、このtabIdが表示されると便利です。

あとがき

プラグインの開発時には、特に複数のタブを扱うプラグインでは、tabIdを使う機会が頻繁に出てきます。このようなときに、簡単にそれぞれのタブのtabIdが見れるとデバッグ効率も良くなると思います。
まだ、いろいろ、改良すべき点がありますので、対応してゆきたいと思います。