概要

拡張機能を作成していて、タブの連携動作を行っていますが、中々、処理がややこしくなっています。それは、ひとつの親タブから二つのタブを開いて処理を実行されるものです。しかし、そこで、この3つのタブを一つのグループとして考えたとき、使い方によっては、複数のグループが並行的に実行することも可能です。そうすると、その場合のプラグインの作り方は極端に難しくなります。このケースが発生するのは、小生が作成している「yyプラグインプラス」という拡張機能です。
今回は、この問題について検討してみたいと思います。

一つの事例で

「yyプラグインプラス」については、他の投稿記事で説明していますので、ご参照ください。ここでは、具体的な例でご説明いたします。

手順

まず、chromeブラウザーを開きます。この時、「yyプラグインプラス」はインストールしておきます。ブラウザーを開いたときにプラグインはブラウザーの管理メモリーにロードされます。この時、ロードされる主なファイルはcontent.jsとbackground.jsです。
次に、たとえば、「yahoo!Japan」サイトのページを開くとします。そして、このページのある選択可能なテキストを選択します。例えば「トラベル」というテキストを選択し、Ctrlキーを押してclickします。すると、yyプラグインプラスのポップアップが表示されます。
そこで、youtubeサーチボタンをclickすると、先にプレーヤー画面が開き、次にyoutubeサーチ画面が開きます。その時のアクティブタブはyoutubeサーチタブです。このアクティブタブは後の説明に関係します。
ここで、一通りのタブが開きました。タブの数は3つです。これを一つのグループとして考えます。

複数グループについて

先に3つのタブが開かれた状態です。その時点で、youtubeサーチが実行しています。スクロールをしながらサーチをしています。
その状態で、タブの右端にある＋ボタンを押し、新規タブを開きます。
そのタブで更にもう一つのyahoo!Japanページを開き、前回と同様の操作
を行うとむ、もう一つのグループができ、そこでもyoutubeサーチが実行しています。但し、サーチが行われてるのは、アクティブタブのyoutubeサーチのみです。スクロールが実行されるのはアクティブタブなので、もう一方のyoutubeサーチはペンディング状態になっています。カーソルを移動してそのタブをアクティブにすれば、今度はそちらのyoutubeサーチが続行して、前のyoutubeサーチタブはペンディング状態になります。
いずれにしても、そのような操作を続けるとグループがいくつも出来上がります。メモリやCPUスピードが許せば、グループを増やせます。
ここで、問題になるのは、タブの管理で、各グループ毎のyoutubeサーチ結果を処理するには、それらのタブidの管理が正しく行われなければ、正しい結果が表示されません。正しい表示とは、各グループのプレーヤタブに意図したサーチ結果の再生リストが表示されるかです。

各グループのタブid管理とアクティブタブidの管理について

タブのアクティブやメッセージ送受信にはタブidが必要です。それらの管理をbackground.jsが一手に引き受けています。content.jsは各タブのDOMにアクセスできます。今回問題の複数グループのタブid管理は「yyプラグインプラス」拡張機能の要になります。
現在、まだこの要の機能は実装されていません。早急にこの機能を実装して行きたいと思います。

あとがき

このプラグインを作成していて、タブのグルーピング処理をうまく行わないといけないと痛感しています。
複数のタブを扱うとメッセージ送受信が大変複雑になってきます。content.jsとbackground.js間でかなり多くのメッセージが飛び交うことになります。
タブの数だけcontent.jsの中でメッセージを振り分けて処理を行わなければなりません。現在どのタブがアクティブなのかを把握して処理しなければなりません。
もう少し、時間はかかりますが、近々、公開したいと思います。