はじめに
プラグインを開発しているとよく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_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) バックグラウンドファイルの抜粋
/*****************************************************************************
* 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)コンテンツファイルの抜粋
/********************************************************************************
*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が見れるとデバッグ効率も良くなると思います。
まだ、いろいろ、改良すべき点がありますので、対応してゆきたいと思います。