onConnectの挙動超概略

最近全然ネタをメモってないっす・・・
とりあえず昔（と言っても半年位前）に書いたネタで
イケそうな奴をちょこちょこっと公開します。
今回はChromeExtensionsネタですが、
Google先生は変化のスピードが尋常じゃないので、
もしかしたら今はもう通用しないかもしれません。
ネタメモをほぼそのままコピペなので始まりが唐突です。
書いた当時はChromeExtensionsを触っていて、
contents.jsとbackground.html間のやりとりを
追いかけた時のメモです。

onConnectの挙動超概略


まずはコンテントスクリプトから

var port = chrome.extension.connect({name:"test"});

でバックグラウンドページに対してラブコールを送る
（ちなみにここで引数として渡してるname:"test"で
portの名前が決まる。今回のコードでは"test"になる。）

バックグラウンドページは

chrome.extension.onConnect.addListener(function(port) {});

この関数がコンテントスクリプトからのラブコールを受け取る受け口を用意する。
ラブコールを受け取る受け口の中でさらに

port.onMessage.addListener(function(msg){});

を宣言しておく。これが実際にラブコールの応酬をやり取りする関数になる。

全体の流れとしては

コンテントスクリプトでonConnectしてバックグラウンドページに対しての道を開ける。

道が開いたらコンテントスクリプトからport.postMessge({key:"value"});
で値を送信する。コンテントスクリプトから値が送信されたら、
バックグラウンドページは
onConnect.addListenerの中で宣言している
port.onMessageでコンテントスクリプトのpostMessageを受け取る。
んでバックグラウンドでやりたい処理（まぁ基本的にはXHR的な処理だと思うけど）
ゴニョゴニョやったらその結果をport.postMessage({key:"value"});
でコンテントスクリプトに返してあげる。
んでコンテントスクリプト側での
port.onMessage.addListener
で送信されたデータを受け取る。
もらったデータを受け取ってコンテントスクリプト内で
やりたいことをゴニョゴニョやるって寸法ですね。


最初はconsole.logの追い方がわからなかったのもあるんですが、
個人的にはコンテントスクリプト側もバックグラウンド側も
送受信に使う関数名が一緒なのがちょっと理解に時間を要した原因かも。
だからといって変えられる訳でもないんですけど。


とりあえず冒頭で紹介した、動きの追い方を把握すれば難なく理解できると思います。
console.logの嵐でね！

content.jsとbackground.htmlのやり取りの追跡方法

extension開発でXHRを使いたかったんだけど、
めちゃめちゃハマったのでまとめてみる。
content.jsからbackground.htmlにデータを送って
background.htmlでXHRを使うってのは前情報で知ってたんだけど、
実際にそのデータをやり取りする経路の追い方がわからなくて
かなりハマりました。


結論から言うと、

content.jsとbackground.htmlのログ出力場所は別だった！

ΩΩΩ＜な、なんだってー！

ということですね。
じゃあどこなんだよ！って事で以下SSを交えて簡単に説明。

<---- 前提 ---->
以下で語る事の前提として、
ログの出力とはconsole.logで吐き出す文字列の事を指します。
<- 前提ここまで->

content.jsのログが出る場所は説明するまでもなく、
manifest.jsonでextensionの挙動を許可しているURLのページですね。

extensionを許可しているページ上で右クリックして「要素を検証」を選択

自分はベータ版のChrome5を使ってるので画面上部に
Consoleのタブがありますが、安定版の4を使ってる人は
左下の左から2番目のボタンを押せばコンソールが出てきます。

content.jsでログを出力すればここにログが出ます。
まぁこれはみなさん周知の事実かと思われます。
問題は次ですね。
background.htmlでログを出力したときにどこにでるか！
それはここでした！

拡張機能のextensionのアイコンが出ているちょっと右下に
「 動作中のページを調査：」って書いてあって、
その下にbackgroundページに指定しているhtmlのファイル名がありますね？
そこをクリックすると！

ジャジャーン！

Web Inspectorが起動します！
ここでコンソールを表示すると

background.htmlで動いてるscriptのログが出力されます！！
画像だとsyntax errorでてますけど・・・ｗ

という感じで、content.jsとbackground.htmlそれぞれでログを出力すると
上記の二つの場所でログが出るので、
それがわかればcontent.jsとbackground.htmlとの
データのやり取りは制覇したも同然です！

localStorage勉強中

先日のHTML5とか勉強会に刺激を受けて、
サボってたChrome extensionの開発を再開。

というわけで最近はタイトルにあるlocalStorage周りをイジってます。

今やりたいことが、

①オプションページで設定保存

②コンテントスクリプトで設定読み込み

③ページ上で保存された設定で機能発動

って流れなんですけど、軽く調べたところ
コンテントスクリプト上からだと、
localStorageに素直にアクセスできないことが発覚。

localStorageをつかってエクステンションの設定を管理する

上のサイトさんにサンプルが置いてあって見事に解決法も載っちゃってたりするので、
こりゃラッキー！・・・と思ったのですが上手くいかず。

どうもlocalStorageへ値をセットするコードが上手く動いてないらしい。
上記サイトで
localStorage["userId"] = document.getElementById("userId").value;
としているところを
window.localStorage.userId = doument.getElementById("userId");
に変更したら無事にスクリプトが走るようになりました。

と書いてて改めて自宅で確認してみたところ修正しないでも動きました。
コピペミスですね。ごめんなさい。
なんせiPhoneからPCに手打ちでコピペしたもので＞＜

localStorageは値のセット方法が複数あるのが若干わかりずらいですね。
削除方法も
delete localStorage.hoge;
なんてやり方もできたりしてもうなにがなんだか。

というわけで、今はlocalStorageの値をコンテントスクリプトに渡してやる方法を勉強中です。
これの実装が終われば、あとは最大の難関設定変更のUIを
やって自分が作ろうとしてるextensionが公開できるかなー・・・と思ってますが、

UIは今以上にドハマりしそうなので頑張ります。

Pocket Wifi欲しいなぁ・・・

Chrome Extension開発復活

復活というほど大したものではないんですが。

先日挫折した記事で紹介したPure GoogleBookmarkの作者さんに
ソースくれないかとダメ元でメールしてみたら、
あっさり快諾を頂いてしまいまして。

 ソース貰えるんなら改変してやろうじゃないってことで色々画策しています。
といっても Alt + B が気にくわないから Ctrl + D に変えたいだけなんですけど。
せっかくショートカットキーを変えるならコンフィグで好きなキーに変えられる仕様にしたいと思うのが人の性。
というわけで、今頂いたソースをいじくりながらどうしようか悩んでます。

ショートカットキーの仕組み自体はオープンソースのスクリプトライブラリ（というほど大きいものじゃないけど）を使っていて、それの内容把握は終わってるのですが、実際にオプションページでどういうふうに変更出来るようにするかっていうのを仕様検討中です。


頂いたソースは著作権がGPLなので、完成したら公開する予定です。
待っている人がいるかわかりませんがお楽しみに。

Chrome Extension計画頓挫

調査・コーディングを続けて色々無理な事がわかりました・・・

①ポップアップが表示できない
popup.htmlのスクリプトでのオープン

やり方はコレだけではないと思うんですが、
とりあえずショートカットキーでポップアップを出すような
やり方は邪道みたいっすね・・・

②代替っぽいextensionが既に存在してる
http://www.chromeextensions.org/toolbars-bookmarks/pure-google-bookmark/

Pure Google Bookmarkというのが、

ショートカットキー（Alt + M）で新しいタブを開く
↓
新しいタブでGoogle Bookmarkを開く
↓
ラベルのテキストボックスにフォーカスを当てる

以上の流れが実現できるみたいですね・・・

というわけで、個人的なGoogle Extensionの開発は中止に決定！

次はGAEで遊ぼうかなぁ。

Chrome Extension で作りたいモノ

昨日の投稿ではChromeのExtensionを作りたいと宣ってたわけですが、
どんなモノが作りたいのかを自分の中で整理する意味も込めて、書き出したいと思う。

・ショートカットキー一発でGoogle bookmarkにブックマークを追加したい。
・追加時にわざわざGoogle bookmarkのページを表示しないで、ポップアップでラベル（タグ）を書けるようにして、ポップアップで登録作業を完結させたい。

・流れ
１．ページ閲覧時にショートカットキー押す
　　　↓
２．ポップアップ表示
　【表示項目】
　・タイトル（編集可）→初期値はページのタイトル
　・URL（編集可？別に不可でもいい気）→初期値はページのURL
　・ラベル（編集可）→初期値は空
　・メモ（上に同じ）
　　　↓
３．諸々入力後、OK押下で登録、キャンセルでなにもせず

こんな感じかな？ここまでは多分ある程度目処がついてるので開発出来る・・・はず。

■以下妄想■

・Omnibarの所にボタン表示させて、bookmark一覧を表示できるような機能も欲しい。

・タグかタイトルを検索できる機能も欲しいな。

・プロパティで登録先・取得先のGoogleアカウントを切り替えられるようにしたい。


そんな所かなぁ？とりあえず前半に書いた目処がついてるところを今週末中に実装できればいいな！

/*雑記*/
やっと家の掃除ができた！・・・けどもう汚れ始めてる・・・
布団も干せたので今週末は充実してる！

Chrome Extension が作りたい！

<前振り>
元々Firefox使いな自分なのですが、先々週辺りからChromeに乗り換えました。

理由としては、
１：起動が早い。
２：FirefoxのアドオンにあたるChrome Extensionが充実してきた。
３：色んなブラウザを使ってみたい。

と３つ位ですかね。
で、今は試用期間ってことでメインブラウザをChromeに切り替えてみてます。
乗り換えた理由の一つにも挙げましたが、Extensionが結構充実してるので、
Firefoxの使用感とほぼ変わりないのでこりゃメインブラウザになるかなーとか思ってたんですが・・・

ただ一つ。たった一つの理由でそれが阻まれつつあります。

それは・・・

ChromeのExtensionにFirefoxのGMarksに変わるExtensionが存在しない！

今までFirefoxでGMarksを使ってたので、
bookmark資産がほとんどgoogle bookmarkに入ってるんですよね・・・
Firefox・Chromeの両方でアドオンが出てるXMarksも試してみたんですけど、
ブックマークの管理がタグじゃなくてフォルダなんですよね・・・


長い前振りオシマイ。
いろいろな方法を試してる最中なんですが、
ChromeのExtensionはどうも開発が楽そう。
っていうか昨日軽く触った感じ楽だったので、
自分でGMarksライクなExtensionを作ってしまえばいいじゃない！
という結論に至りました。

そんな訳で今週末に格闘してみようかと画策してます。

//雑記
//そんなことよりホントは今月末のTOEICに向けて
//勉強しなきゃいけないんだけどね・・・
//ファンタシースターポータブルも買っちゃったし・・・
//時間が欲しい・・・