昨夜、Chrome Extensions with HTML5作ろう会 in 福井 を開催したので、復習がてらちょうど良かったです。
ReverseIt!を試してみようという奇特な方はChromeブラウザから以下のリンクをクリックして、Chrome拡張(Extensions)をダウンロードしてください。
ダウンロード: http://f.air-life.net/crx/ReverseIt.crx
インストールされるとアドレスバーの右側に以下のような青い四角に"R"と描かれたボタンが追加されます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx2I61LWS_hD5D1ODP8BKnzCbaKfpIPKGcJsuQduB42acDd49XPFoHf9zr5JinfdFjKFkv7EDyAQhCl_z7BEmcRwLO5mGjy3f0eatI6y_5PEOcwx3nPJi6Pc6ekarTYrfGE4UySXFvWw8/s400/reverse_button.png)
後は、適当なWebページを開いてポチっとそのボタンを押していただくと、ページが反転します。...それだけです。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgoyz1lGGT4eUDE1moisOdH3QTL7w1C31HVxqVj1vAjOBnPy8GzgpWDDSBIr8IQpyY6fL2RRfS63WXYO5kOFjtoO6ssW7WFNBjjcI4MS0UevnMi8VC4Sfk_ukHrGzmZWo2IJibtdAPpBk/s400/reverse_page.png)
しょーもないChrome Extensionsを作りましたが、4/17(土), 4/24(土)に「Google Hackathon for Chrome Extensions in 福井」が開催されるので、そこではもっとまともなモノを作ります。一緒にChrome Extensionsを作りませんか?
Chrome ExtensionsはChromeブラウザで扱えるHTML5(関連)やCSS3の機能も使えるので楽しめますよ。
Google Hackathon for Chrome Extensions in 福井 - 4/17, 4/24(土)
http://groups.google.co.jp/group/hokuriku_engineer/web/ghfukui-vol02
ネタ元
ギズモードのデザイナーが語る! エイプリルフールの裏側
http://www.gizmodo.jp/2010/04/post_6958.html
!ルーフルリプイエは日今
http://www.gizmodo.jp/2010/04/april.html
ソースコード
ざっくり説明すると、“R”ボタンを押されたときにGIZMODEで紹介されていた反転用のCSSを現在開いているページに適用するだけです。
manifest.json
{ "background_page": "background.html", "browser_action": { "default_icon": "icon48.png", "default_title": "ReverseIt!" }, "icons": { "48": "icon48.png", "128": "icon128.png" }, "description": "GIZMODEの2010年エイプリルフールネタを現在開いてるページに適用する。 http://www.gizmodo.jp/2010/04/post_6958.html", "name": "ReverseIt!", "permissions": [ "tabs", "http://*/*", "https://*/*" ], "version": "0.2" }
background.html
<html> <head> <script> chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.insertCSS(tab.id, {file:"reverse.css"}, null); }); </script> </head> </html>
reverse.css
body{ -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); }
icon48.png, icon128.png
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix0GJvw6pAUcZJb2QHiHxVHHITLhg789thWfVnA6AfI7W5CkFkYOI0AmW2MMtoIC7QCbiAZ8dyMfCl8Pf9OXr74KQiNXgWxfD4LdSZbMrgJumUEFPqEzVhAwKoK85yp38CrgvIbh2v54o/s400/icon128.png)
0 件のコメント:
コメントを投稿