[ChromeExtension] onUpdatedイベントを使ってページの読み込み完了を判定する方法

progress-bar-1646839_1280
LINEで送る
Share on GREE
Share on LinkedIn

ブラウザ機能拡張って便利なんですが、世の中であまり使われている気がしません。
こんなに便利なのに、何故使われないんでしょう?
それは、知らないから・・・ではないでしょうか?
もったいないですね。
 
今回は、Chrome機能拡張の開発を行なっている時に、URLを切り替える場面に置いて、ページ読み込み完了を正確に取得したい場合の対応方法です。

ページ読み込み完了取得時の問題点

通常statusで”complete”を判別すれば、読み込み完了になるはずなのですが、ページがリダイレクト処理をしていると、リダイレクト先数分のcompleteが発生してしまいます。
今回のハマリポイントはここだったのですが、completeを取得しただけでは、ページ読み込みが完了していないというWEBページがあるという事なんですよ。
そもそもログインが必要なページで、セッションが切れている場合などは、ログインページにリダイレクトされてしまったり、リンクをクリックした時に、ビーコンタグだったために、いくつも計測サーバーにリダイレクトというたらい回しをされて、最後に目的のページに行き着くわけですが、人間の感覚では気がつかないぐらいの遷移をしているページもあります。
そんなわけで、最後のページを判別するのに、URLで行うという場合も想定できますが、できればスマートに判定してみたいので、sertTimeoutを使ってスニペットを作ってみました。

ソースコード

解説

timer変数

setTiomeoutをtimeというグローバル変数に入れて、”complete”したら1秒後に完了する仕組みを作ります。
その際に1秒以内にリダイレクトして”loading”が発生したらグローバルで実行しているsetTimeoutを破棄して、次のcompleteで新たにtimerをセットします。
これにより、1秒以内のリダイレクトであれば、最後に表示されたページが1秒後にfinish判定することができます。

onUpdatedイベントの変数に注意

function(tabId , mode , info)で値を受け取る際に、infoとmodeの両方にstatusフラグがあり、どちらもloading,completeが挿入されますが、modeの方が使い勝手がいいので、そちらの判定で行ったほうが良いようです。
具体的には、

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*