昨夜、Chrome Extensions with HTML5作ろう会 in 福井 を開催したので、復習がてらちょうど良かったです。
ReverseIt!を試してみようという奇特な方はChromeブラウザから以下のリンクをクリックして、Chrome拡張(Extensions)をダウンロードしてください。
ダウンロード： http://f.air-life.net/crx/ReverseIt.crx
インストールされるとアドレスバーの右側に以下のような青い四角に"R"と描かれたボタンが追加されます。
後は、適当なWebページを開いてポチっとそのボタンを押していただくと、ページが反転します。...それだけです。
しょーもない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
0 件のコメント:
コメントを投稿