0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

中々、解決できなかった不具合が解決しました。

Last updated at Posted at 2023-04-25

現象

Chrome拡張機能を作成しましたが、そのプラグインは、複数のタブを開いて連携動作するものです。
最初に履歴削除したり、不要タブを削除してきれいな状態で実行するとうまく動作します。
開くタブは一つの場合と二つ開く場合を想定しています。
ところが、何度もテストしていると二つのタブが複数ペアで開いてしまいます。それも回数が増えると開くタブも増えてしまいます。
すべてをリセットしてやり直すと、最初の一回は正常に動作します。タブのペアは一つしか開きません。続けて実行すると開くタブのペアは増えてゆきます。

試行錯誤した対策

どういうことなのだろうと考えましたが、検討が付きません。
どこかで、何らかの初期化がうまくいっていないのか。そこで、タブを開いているところに仕掛けをしました。
数カ所にconsole.log()を入れ、スクリプトの行番号も入れました。
どこの行のスクリプトで複数実行しているのかと。入れて、実行するとありました。続けて、実行している箇所がありました。タブを続けて開いています。なぜ、続けて開いているのだろうか考えました。
window.open()で、youtubeページと自前のブログページを開く処理をしているところです。このyoutubeページを一つでいいところをふたつ開いています。

それまで、いろいろ考えたこと

この処理は、ページ内のテキスト文字を選択するとポップアップメニューを表示します。その選択したテキスト文字をクェリーにしてyoutubeで検索するものです。そこで、youtubeページを一つ開くものです。
もう一つは、youtubeで検索した動画を再生するためのプレーヤーページを開くものです。これらの二つのタブで連携動作するプラグインを開発していた時の現象です。
このポップアップメニューにある、実行ボタンをクリックすると二つのタブを開いて連携動作が始まります。
毎回、初回はうまく動作して、youtubeで検索した動画がプレーヤで実行できます。
ところが、続けて実行すると、その場合は、ページ内のテキスト文字を選択してポップアップメニューを表示することを行っても発生します。
原因は、このポップアップメニューにあるのではと検討をつけました。

ポップアップメニーと実行ボタンの問題か

文字列の選択をするとポップアップメニューを表示するコードのところは特に問題はなさそうと考え、問題は実行ボタンをクリックするところかと疑いました。
この実行ボタンのところのコードは複雑になっています。数日前に、別のところの問題であるヒントを得ることができました。もしかしたら、ここでも、同じことが起こっているのではないかと期待はしました。

期待したことは

先日のヒントというのは、ポップアップ時のイベント処理登録です。
それは、ポップアップを行うたびにイベント登録が実行されています。これが不具合を起こしていました。ポップアップの度にイベント登録が積み重なり、それが続けて実行されていました。
そこで、ポップアップの先頭で一旦前回のイベント登録を削除し、その後にイベント登録を登録しました。これにより、イベント登録の積み重ねがなくなりました。
イベント登録を削除するjqueryのメソッドは.off()です。

//ここで、イベント処理を登録
//実行ボタンイベント登録
$("#exe_btn").on('click',()=>{
    .....
    .....
  
});
......
//前回登録した、イベント処理を削除する
......
$("#exe_btn").off('click');

たったこれだけの構文ですが、これで、タブの多重オープンがなくなりました。

デモページ

なつかしの曲(ポータル) https://tecoyan.blogspot.com
このリンク先のページで、youtubeサーチを行うことができます。(事前準備として、Chromeウェブストアで「yyプラグイン」または、「youtubeプラグイン」(ともに無料)をインストールしておきます。)ページ内の文字テキストをマウスで選択し、Ctrl+Click(Enterキー)すると、ポップアップメニューが表示されます。そこで、youtubeサーチを選択して実行ボタンを押すと、youtubeサーチがスタートします。この時に、サーチとプレーヤーページのタブがオープンされますが、対策前は、複数ペアのタブが大量に開いていましたが、対策後は、一つのペアのみになりました。

あとがき

プラグインを作成していて、このタブの多重オープンが発生した時は、驚きました。次から次へとタブが開かれて行き、ブラウザーがタブで一杯になり、早く止めたいと思いましたが止められません。仕方なく、ブラウザーを閉じました。そのうち、メモリ不足が起こり、パソコンが停止してしまうことが想定されました。
このような不具合には驚かされます。毎回、プラグインの初期ロード時は、正常に動作しますが、続けて、youtubeサーチをするとこの多重オープンが発生しました。プラグインのリセットに問題があることは予想できましたが、それがどこに問題があるかがわからず、そのままにしていました。ある時の不具合解決にヒントがありましたが、そのことがなかったら、まだ解決していなかったかもしれません。
もう少し、突っ込んで問題に取り組んでいたらわかったかもしれませんが、その時は問題解決の複雑さが予想されて気がめげていました。
真剣に取り組んでいたら解決できていたかもしれません。
たかが、ひとつのプラグインですが、その作成過程で、いろいろなことを学ばせてもらいました。いい勉強になりました。

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?