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の嵐でね！

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に向けて
//勉強しなきゃいけないんだけどね・・・
//ファンタシースターポータブルも買っちゃったし・・・
//時間が欲しい・・・