[ChromeExtension] URLリストを順番に表示する

2016年9月27日

Chrome Extension テクノロジー プログラミング

ChromeExtensionを使ってデバッグツールを作ろうと目論んでいるので、スニペットなどを作り貯めて置こうと模索中。 今回は、ポップアップウィンドウに記載されたURLリストを表示しているタブに表示していくというコードを書いてみました。 ポップアップは、タブの外部HTMLに当たるので、location.hrefでの変更ができないので、chrome-APIのtab関数をうまく使ってコントロールしてます。

Summery

前回のタブURLを取得するやり方の応用なので、変更のあったモジュールのみ掲載します。 そして今回の仕様は、エクステンションアイコンをクリックして表示されるポップアップウィンドウに表示されているtextareaタグに改行区切りで登録されているURLの一覧を、3秒毎に表示しているタブのURLを切り替えていくというだけのモノですが、これで表示ページ内との情報連携が取ることができれば、seleium的なツールが作れるという事です。

Source

(function(){ var $$ = {}; $$.data = { ls_key:"debug" }; // init-run $$.__construct = function(){ var save = document.getElementById("save"); if(save !== null){ save.onclick = $$.save; } var view = document.getElementById("view"); if(view !== null){ view.onclick = $$.view; } var list = document.getElementById("list"); if(list !== null){ list.value = unescape(localStorage.getItem($$.data.ls_key)); } }; $$.save = function(){ var list = document.getElementById("list"); if(list != null){ localStorage.setItem($$.data.ls_key , escape(list.value) ); }; }; $$.view = function(){ var list = document.getElementById("list"); if(list === null){return} var lists = list.value.split("\n"); for(var i=0; i<lists.length; i++){ if(!lists[i].match(/^http/)){continue} chrome.tabs.update({"url":lists[i]}); $$.sleep(3000); } }; $$.sleep = function(sleep_time){ var current = new Date(); var end_point = new Date(); for(var i=0;current.getTime()-end_point.getTime()<sleep_time;i++){ current = new Date(); } }; // run window.addEventListener("load",$$.__construct); })();

解説

URLリストは、その場で登録してもいいし、saveボタンでlocalStorageに保存する仕様にしているので、便利に使えると思います。 「view」というボタンを押すと、textareaの文字列を読み込んで、改行区切りで配列にします。 その配列を順番にタブのURLを切り替えるんですが、 タグURLの切り替えは chrome.tabs.update({"url":"***"}); そして切り替えています。 ***をURLにすれば、開いているタブのURLが切り替わりますが、ループをそのまま実行すると、表示する前に次のページが開いてしまい、 URLが大量に登録されていても一瞬で終わってしまうので、1つのURLを表示したら独自のsleep関数を使って、3000ミリ秒のウェイトを掛けています。 ちなみにsleep関数が気になる方は、下記ブロクを参照してください。 ページ離脱などの際にデータ保存する時間をウェイトさせる方法

Github

今回もgithubにサンプルソース一式をおいてあります。 https://github.com/yugeta/setTagUrl 下記コマンドでゲトしてください。 $ git clone https://github.com/yugeta/setTagUrl.git

イケてないポイント

どうやらリスト表示する際に、一番最初の表示がうまく表示されない場合があります。 スリープ処理がうまくいっていないのか、対象サイトの問題なのかわかりませんが、ページの表示確認を行う処理にした方がよさそうです。 う〜ん、課題が多いなあ・・・・

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。