HTML5とか勉強会でお話してきました
HTML5-Developers-jpの白石さん主催の第4回 HTML5とか勉強会（旧Webkit/HTML5勉強会） : ATNDでChrome拡張についてお話してきました。
資料はこちら Chrome Extension meets HTML5
第4回 HTML5とか勉強会（チロルは除く） - Togetterに、Ustreamの録画もあります 2010/03/17 HTML5とか勉強会#4, HTML5とか勉強会#4 html5j on USTREAM. Technologie
定員40名があっという間に埋まってしまうほど人気の勉強会なので、最初は緊張しましたが、アットホームな雰囲気ですごくやりやすかったです。
さて、資料内でも触れていますが、3月24日に
Google Chrome OS ~最新技術と戦略を完全ガイド~
- 作者: 小池良次,中島聡,伊藤千光,太田昌吾,まえだひさこ,向井領治
- 出版社/メーカー: インプレスジャパン
- 発売日: 2010/03/24
- メディア: 単行本
- 購入: 2人 クリック: 400回
- この商品を含むブログ (23件) を見る
という本が出ます。20ページちょっとだけですが、Chrome拡張の作り方について書かせて頂きました。まあ、私の記事は短いので置いておいて、WebOS Goodiesの伊藤さんによるWebGLのお話などは必見です。
また、Chrome拡張については、4月9日に
Chromium-Extensions-Japan | Google グループ
があります。今回はHTML5メインでしたが、こちらのTechTalkではChrome拡張の作り方についてより具体的にお話しようと思っています。是非、ご参加ください。
続・先取り！ Google Chrome Extensions最終回
続・先取り！ Google Chrome Extensions：第10回 Chrome拡張の国際化とギャラリーへの公開と総まとめ｜gihyo.jp … 技術評論社
はい、というわけで、連載終了となりました。連載中何度か取り上げていたSBMカウンタを国際化してギャラリーに公開して終了と、我ながらちょうどよく収まったかなと思っています。
ただ、連載を通してみると反省点がいっぱいあって、その反省点を活かして次に繋げたいと思っています。
と、そうそう、ギャラリーに公開したSBMカウンタは Chrome Web Store - Social Counter になります。
公開にあたって、tweetmemeにも対応してみたのですが、これがなかなか良いです。
続・先取り！ Google Chrome Extensions：第10回 Chrome拡張の国際化とギャラリーへの公開と総まとめ｜gihyo.jp … 技術評論社 のようにTwittterでの反応が見えて面白いです。
あとあと、
Chromium-Extensions-Japan | Google グループ
もよろしくお願いします。何卒、何卒。
Google Chrome用ユーザースタイルシート拡張
Chrome Web Store - Stylistのver2.0を公開しました。
元々、ハッカソンの時に作った拡張で、長いこと中途半端な実装状態のままギャラリーに公開していたんですが、ようやくそれなりに形になりました*1。
元々Chromeはuser.jsを拡張に変換してインストールする機能があるので、 http://userstyles.org/ でuser scriptsとしてインストールすることはできるんですが、実行タイミングが要素の読み込み後なので、隠したい要素が一瞬見えちゃったり、表示がガクガクしたりと今ひとつです。で、Chrome Stylistではなるべく素早く適用されるように気を付けているので、その辺りはバッチリ、だと思います。
で、問題のuserstyles.orgへの対応具合なんですが、大体うまく行くんじゃないかと思います、たぶん…
例えば、AutoPagerize/AutoPatchWorkを入れている方は、
@AutoPagerize - Page Break 02 - Themes and Skins for Sourceforge - userstyles.org
あたりがお薦めです。
ただ、力技でなんとかしてるので、「このスタイルがうまくインストールできない」とかあったら報告を頂けると助かります。
あ、あと必要な機能としてはインポート・エクスポートですね。それもそのうち。
最後に、いつも詳細でわかりやすいバグ報告をくれる20211321218さんに感謝！
*1:密かに、userstyles.org対応を謳うライバルが出てきてくれないかなーと期待してたんですが、残念
ChromiumでVertical Tabsの試験的な実装が始まっている
少し前から、ChromiumOSのUIモックにSidetabバージョンがあったのですが、この実装が始まりました。
Issue 34509 -
chromium -
Vertical Tabs -
An open-source browser project to help move the web forward. - Google Project Hosting
ちょうど今日、
Issue 572041: Make basic side tabs actually appear. -
Code Review
と、なんだか少し動きそうなコミットがあったので、試しに404 Not Foundから、build 38321を入れて、enable-vertical-tabsオプション(とuser-data-dirも)を付けて起動してみました。
その結果がこちら
まだちょっと早かったみたいです。これはXPで試したので、Vistaか7ではもう少しまともなのかもしれません。
Windows7+Chromium 5.0.370.0で試してみました
なお、こういう実装は実験的にやっているものなので、Vertical Tabsが正式に載ると決まったわけではありません。Pin tab(Phantom tabs)やContent Settingsなどもそうですが、フィードバックが多く集まってデザイン・実装が洗練されればされるほど正式に採用される可能性は高く・早くなるので、様子をみてフィードバックしてみると良いと思います(そのためのdev版なので、こんなことを改めて書いても何を今更といったところかもしれませんが…)
最後のタブを閉じる時にChromeがなるべく終了しないようにする拡張を作った、他2本
なるべく、と付いているのは、タブをセンタークリック(マウスホイールでのクリック)すると終了してしまうからです。Ctrl+wや、タブのバツボタンや、GestureやKeyconfigでの閉じるアクションなら、ホームページだけの新しいウィンドウを表示します。
Prevent shutdown
かなり力技なので、今後のChrome側のバージョンアップで動かなくなる可能性は高いです。あとウィンドウの位置がちょっとずれたりします。スマートな解決方法はなさそうですが、後でゴリ押しでなんとかすると思います。
ソースは http://bitbucket.org/os0x/prevent-shutdown/src/tip/background.html です。余談ですが、拡張の一覧でデベロッパー モードの状態で、Prevent shutdownの「アクティブな閲覧数を確認」のbackground.htmlをクリックしてWebInspectorを一度起動すると、センタークリックでもChromeが終了しなくなります。不思議！
ついでに紹介すると、リンクになってないURLをリンクに置き換える(ttp:で始まっている場合もOKで、リファラを送らないオプションもあり)拡張
Text URL Linker
と、Googleツールバーのハイライトみたいなのを実現する拡張
word highlight
も公開してあります。元々Greasemonkey Scriptだったのを拡張らしく改良してあります。
これでギャラリーに公開している拡張は8個 https://chrome.google.com/extensions/search?q=os0xff そういえば、アイコンはないと寂しいので自分で書いているんですが、やっつけ感があるので、素敵なアイコンを描いてくださるという奇特な方は是非送りつけてやってください。
ホントはChrome Stylistを大幅に改良していたんだけど、一度煮詰まってしまって手が止まっています…。アイコンが邪魔だと言われているので、なんとかしようと考えて入るのですが…。もう少々お待ちください。
Chromeで読み込みに失敗した画像についてリファラを消して再読み込みを試みる方法
[追記]実際に使用したい方は @civic さん作のLDR Image Loader extensionをどうぞ。
Chrome Dirty Hacks 01: fc2 image for LDR - 枕を欹てて聴くの別解みたいなのです。要は、livedoor Readerでfc2やアメブロの画像を表示してやろうというネタです。
まず、id:edvakfさんが実験していた
edvakf's
gist: 48621 — Gist
から
インラインフレームにdataスキームでhtmlを挿入するとlocationがそのdataスキーム自身になり、そこからのリクエストにはリファラがつかない
というテクニックを応用して、さらに
- errorイベントキャプチャリングフェーズで監視*1して画像のerrorを捕捉
- インラインフレームを作ってデータスキームのhtmlを挿入し、そのなかで読み込みに失敗した画像を読み込むことでリファラを削除して画像を読み込む
- 画像は読み込まれるが、インラインフレームのサイズと画像のサイズが合わない
- データスキームで読み込んだhtmlはSame-Originの制約を受けるので、フレームの中から直接フレームのサイズを変えることはできない
- そこで、MessageEventで親に画像サイズをpostMessageして、メインのページ側でメッセージを受け取ってインラインフレームのサイズを修正する
という方法を使っています。
http://gist.github.com/281516
かなり試行錯誤したおかげか、スマートな雰囲気のするバッドノウハウに…
あとはリファラの偽装ができれば良いのだけど、それはさすがに難しそう…。
*1:addEventListenerの第3引数をtrueに。errorイベントはバブルしないので。
Chromeをスタンドアローン化した際に起動できないバグへの対処
複数のバージョンのGoogle Chromeを同時に動かす方法 - 0xFFの方法で http://dl.google.com/chrome/install/249.78/chrome_installer.exe (stable版Chrome4) をスタンドアローン化して起動しようとしたら必ずクラッシュして起動できない現象が発生。debug.logに
[0126/013836:FATAL:chrome_dll_main.cc(501)] Check failed: PathService::Override(chrome::DIR_USER_DATA, user_data_dir).
というメッセージがあったので、調べてみるとIssue 29245 -
chromium -
Crash on CHECK(PathService::Override(...)) -
An open-source browser project to help move the web forward. - Google Project Hosting
を発見。(これは直してからリリースしろよとちょっぴり思いつつ) 単純に--user-data-dirで指定しているフォルダを先に作ってから起動したら動きました。joi君どこいってもうたんや…
