読者です 読者をやめる 読者になる 読者になる

まめ畑

ゆるゆると書いていきます

Jetpackをグリモンみたいに使うには

Jetpack javascript

Jetpack Featureってステータスバーのボタンをクリックしたり、slideBarのボタンをクリックしないと動かないの?そんな事しなくてもグリモンみたいに指定のアドレスにアクセスしたら動作するように出来ないの?」と聞かれたので書いときます。


先ほどの質問の動作はもちろん出来ます。
グリモン自体の動作を理解していないので、完璧に同じかどうかはわからないですが、ボタンをクリックしたりしなくても指定したサイトにアクセスした場合に自動的に処理を行うという事は可能です。(しかし注意が必要)

コードは

jetpack.tabs.onReady(function(dom){
   if(jetpack.tabs.focused.url.indexOf("指定のアドレス") > -1){
      //行いたい処理
   }
});

こんな感じで、「tabs.onReady()」を使用します。


しかし、以下のコードで試すとわかると思いますが、この処理には少し問題があります。

jetpack.tabs.onReady(function(dom){
   console.log(jetpack.tabs.focused.url);
});

このコードを実行して、タブをいくつか開いていくと気づくと思いますが、「tabs.onReady」は何番目のタブの読込みが完了した時という動作を指定できないので、タブを開いて、ページの読込みを開始してすぐに他のタブを開くと、所望のタブのアドレスでは無くその時に開いているタブのアドレスが表示されます。
つまり、処理対象のページを読込み中に他のタブで違うサイトを見ると動かなくなります。
このようなサンプルを見ますが、以下のように書いたほうが安全です。

jetpack.tabs.onReady(function(dom){
   if(dom.location.href.indexOf("指定のアドレス") > -1){
      //行いたい処理
   }
});

この関数はどのタブで「DOMContentLoaded」イベントが起こっても実行されるので、この様に読み込みが完了した時に渡されるdomからアドレスを取得して確認する方が安全です。
iframeなどで起こったイベントもここにやってくるので

jetpack.tabs.onReady(function(dom){
   if(!dom.defaultView.frameElement && dom.location.href.indexOf("指定のアドレス") > -1){
      //行いたい処理
   }
});

のようにすればiframe内でのイベントは無視出来ます。


tabsには他にも「onClose」や「onOpen」関数もあるのでタブを閉じた時、開いた時と指定出来ます。