2月
05
2010
2

自分向け Chrome 拡張まとめ

Google Chrome v4 で正式対応したエクステンションの自分向けまとめです。
完全に自分向けですが、エクステンションごとにコメントを付けておいたので、誰かの参考になればいいかなぁと思います。
実質的には今使っているエクステンションのリストなので、内容に変化があったら随時更新する予定です。

ブラウズ

Handy Google Shortcuts
単に Google の各サービスへリンクするだけですが、Google に依存しまくっている人は便利。同種のエクステンションだと、Google Apps Shortcuts の方がメジャーなようですが、対応しているサービスがこちらの方が多く、プルダウンから直接新規メールとか作りたいのでなければこちらがお勧め。自分がよく使うサービスだけ表示するように設定変更して使います。
Yet Another Google Bookmarks Extension
ソーシャルブックマークとしてはてブを使う一方、「よく参照するサイト」という本来の意味のブックマークとして Google Bookmarks を使っているので入れてます。見やすいツリー型の表示とインクリメンタルサーチが可能で、動作が速く安定。
SimpleGoogleBookmarks
ソーシャルブックマークとしてはてブを使う一方、「よく参照するサイト」という本来の意味のブックマークとして Google Bookmarks を使っているので入れてます。タグによる絞り込みの他、日本語対応のインクリメンタルサーチが秀逸。上記の Yet Another Google Bookmarks Extension の方が素晴らしかったので引退。
Smooth Gestures
Windows から Mac に移行した際、Windows で使っていたマウ筋が使えなくなったので、代替で利用。Mac で使えるマウスジェスチャエクステンションがこれだけだった。

ツール

Chromed Bird
シンプルに使える Twitter クライアントです。他にも API を使うツールがある場合、初期設定だと API を使い切る事が多いので、設定変更推奨。Firefox の Echofon 代替。
Google Wave Notifier
Google Wave の Notifier (まんますぎる) です。wave は Gmail みたいに常用していないものの、たまーに誰か何か書くので、まさに Notifier が必要。
利用頻度が低すぎだったのと、メール通知が機能追加されたので、無効化。
Hatena Bookmark GoogleChrome extension
はてブ公式エクステンション。今開いているページのはてブ数とコメントを簡単に見るために入れてます。はてブの追加自体は はてブ with Twitter を使いたいので、公式ブックマークレットを使ってます。
Bubble Translate
ページ上にポップアップする辞書。英文を読む時に使ってます。

とりあえずこんなもんです。

更新履歴

2010-02-05
公開
2010-02-10
Bubble Translate を追加
2010-03-05
Google Wave Notifier 削除
2010-05-19
Yet Another Google Bookmarks Extension を追加
SimpleGoogleBookmarks 削除
2010-07-30
Smooth Gestures 追加
Written by Otchy in: Development | タグ:
1月
29
2010
2

Chrome 正式版 Greasemonkey でクロスドメイン POST をする方法

最近公開された、Google Chrome の Ver 4 では、正式に Greasemonkey がサポートされ、以前のように特別なオプションを指定することなく、ワンクリックでユーザスクリプトがインストール出来るようになりました。
それ自体は非常に嬉しい事だったんですが、バージョンアップに伴い、はてブ with Twitter が動かなくなってしまっていました。(現在は修正済み)

以前、JavaScript だけでクロスドメインで POST メソッドを送る方法で紹介したやり方が、Chrome のバージョンアップによって無効になってしまったためです。
無効になったとはいえ、通常の JavaScript として使用する分には問題なく、Greasemonkey だけに問題が発生していました。
動的に生成した iframe の contentWidow オブジェクトが取得出来なくなっており、セキュリティの制限が強化されたものと思われます。

最終的にはその制限を回避する方法を見つけたので、以下に解説します。

通常 JavaScript の記述

まず、Greasemonkey ではなく普通の JavaScript としてJavaScript だけでクロスドメインで POST メソッドを送る方法等を参考に、本来やりたい処理を記述します。
この時は普通に script タグでスクリプトを読み込んで、正常動作を確認しておきます。

そして、正常に動作するスクリプトが作成出来たら、それを任意のサーバにアップします。

Greasemonkey の記述

以下のようなスクリプトを書きます。

(function() {
    var d = document;
    var s = d.createElement('script');
    s.src = 'http://www ...'; // スクリプトファイルをアップした場所
    d.body.appendChild(s);
})();

これだけで、本来の window オブジェクトから実行したかった処理が実行され、Greasemonkey の制限に掛かることなく、iframe を使用したクロスドメイン POST が実現します。

でもちょっと待って

Greasemonkey が実行されるたびに、自分のサーバから js ファイルがダウンロードされるなんて嫌ですよね?私は嫌です。レスポンスを考えたって好ましくないですし。

そこで、data スキームを使って外部スクリプト自体を Greasemonkey スクリプトの中に埋め込んでしまう事にします。(data スキームについてはこの辺を参照して下さい。)

data スキームへの変換には、[JavaScript] dataスキームURI生成(画像データのBase64変換)を使用させていただきました。
このサイトで、先ほどアップした js ファイルの URL を指定し、data スキームに変換した文字列を取得します。

その上で、Greasemonkey を以下のように書き換えます。

(function() {
    var data = 'data:application/x-javascript;base64,'+
        'KGZ1bmN0aW9uKCkgewoJdmFyIGQgPSBkb2N1bWVudDsKCWZ1bmN0aW9uIGdldEVsZW1lbnQoeHBh'+
        // 中略
        'fSkoKTs=';
        var d = document;
    var s = d.createElement('script');
    s.src = data;
    d.body.appendChild(s);
})();

これで、単体の Greasemonkey スクリプトでありながら、外部スクリプトを読み込んだのと同等の状況を作り出す事が出来ます。

これでスッキリしましたね!

Written by Otchy in: Development | タグ: , , ,
4月
03
2009
2

Google Chrome × AjaXplorer / ecoder が快適すぎる件について

1 つ前のエントリで、ecoder のインストールについて書きましたが、ecoder とほぼ時を同じくして、AjaXplorer というのも導入しました。
これらは、自サイトの編集をオンライン上でどこからでも行えるようにしたくて環境を整備したもので、現在その目的は果たされ非常にホクホクしています。

ところが、これらのブラウザ上で動作するアプリケーションは、あくまでブラウザの 1 ウィンドウとして動作するため、どうしても使い勝手はローカルアプリケーションとは異なります。
ちょっとウィンドウを切り替えながら操作したいときに、うっかり Alt+Tab をして、「うわっ」となる事数十回。

これはいかん、ストレスになるという事で、一度はお蔵入りした、Google Chrome を引っ張り出してきました。
Google Chrome には、「アプリケーションのショートカットを作成」という機能があり、これを使うと特定のサイトのサービスを、あたかもローカルアプリケーションのように起動して使う事が出来るというものです。

以前、Gmail と Google Reader で試しに使ってみたのですが、これらのサービスの場合、外部へのリンクを使う事が多く、そういったリンクは Chrome ではなく常用しているブラウザの Firefox で開きたかったため、結局使用をやめてしまいました。

ところが、AjaXplorer と ecoder の場合はそのアプリ内で作業が完了するため、まさにうってつけではないかという事です。

・・・目論見は大正解でした。

AjaXplorer, ecoder on Google Chrome

AjaXplorer でファイルをアップ
↓ Alt + Tab
ecoder でソースを編集
↓ Alt + Tab
Firefox でプレビュー

ローカルアプリで作業しているのとほとんど同じ操作感です。快適すぎです。
さらにこれらの JavaScript を多用したアプリが Chrome の V8 エンジンで快適に動作するというのも見逃せない利点。

なんだかちょっと未来を垣間見た気がします。
しばらく常用する環境になりそうです。

Written by Otchy in: Development | タグ: , ,

Powered by WordPress | Aeros Theme | TheBuckmaker.com