2009年12月21日月曜日

Chromeの拡張とか改造するのに必要な手順メモ② とりあえず「サーニャが見てる」

「中止ボタンがサーニャに見えて困る」を作りたいけど当然のことながらいきなり作るにはハードルが高すぎるので、とりあえずサーニャボタンを出してみんとす。

 前回のOppai Extensionの中身を調べると次のような構成でファイルが格納されていることがわかる。

フォルダ内ファイル構成
[extension_3_0]
├ manifest.json ……拡張の核となる部分(.josnファイル)
├ icon.png ……アイコン用画像ファイル
├ icon110.png ……アイコン用画像ファイル②
├ background.html ……拡張の基礎になる背景(.htmlファイル)
├ dyen.js
├ oppai.js
├ prototype.js
├ scriptaculous.js……以上4つの.jsファイル機能部分を実装するJavaScriptファイル
└ README.markdown ……READMEファイル(.markdownなんて拡張子だけどエディタで開いたらただのテキストだった)
 問題は拡張を拡張たらしめているmanifest.jsonの部分。
 ここの記述を調べると(UTF-8に対応したテキストエディタで開ける)
manifest.json
{ "update_url":http://clients2.google.com/service/update2/crx,
"name": "Oppai Extension",
"version": "3.0",
"description": "Click to wobble an oppai",
"icons":
{ "128": "icon110.png",
  "64": "icon110.png",
  "32": "icon110.png",
  "16": "icon110.png" },
"browser_action":
{ "default_icon": "icon.png",
"default_title": "Oppai" },
"background_page": "background.html" }
 ……と書いてあるはずはず。
 とりあえず、一つの項目とそれに与える値を{"項目":"値またはパス","項目":"値またはパス",……}という形で構成していくらしい。 それぞれの項目はどういうことかと言うと。
manifest.json
"update_url" アップデートするときの公開URL(今のところ不要)
"name" 拡張の名前(必須っぽい)
"version" バージョン(必須っぽい)
"description" 拡張の説明(必須ではないっぽい)
"icons" 「拡張機能」タブ内でこの拡張を示すために表示するアイコン(必須ではないっぽい)
"browser_action"
"default_icon" ブラウザ上に表示するボタンのアイコン(今回の機能には必須)
"default_title" ボタンのアイコンをマウスオーバーしたときに表示されるポップアップテキスト(今回の機能には必須)
"background_page" ブラウザの見えない部分の処理を実行させるためのHTMLファイル(jsファイルなどはここにリンクされている)
 ということらしい(?)ので、とりあえず最小限の記述で書いてみた。
書いてみた manifest.json
{ "name": "Sanya Extension",
"version": "0.1",
"description": "サーニャが見てるだけ",
"icons": { "128": "sanya128.jpg" },
"browser_action":
{ "default_icon": "sanya_icon.jpg",
  "default_title": "サーニャかわいいよサーニャ" }
}
 {},""の関係には要注意。あとUTF-8であることを忘れずに。
 肝心のアイコンファイルは……
 この3つだけ。この3つだけがフォルダにあればいい。
 あとは前回の方法を使ってまずはパッケージ化されていない拡張機能を読み込みます(Load unpacked extention)でフォルダを読み込むと……
 こんな感じに。ボタンは単にあるだけで押しても何も起きない(もちろん中止もできない)が、サーニャが見てるだけであればこのように簡単に作ることができるわけで。
 もちろんパッケージにすればインストールもできる。
 とりあえずここまでできた。この先の機能追加についてはまずは考え中……。

0 件のコメント:

コメントを投稿