2011年10月27日木曜日

Chromeの拡張機能を作ってみる

発表された直後に使い始めたGoogleのウェブブラウザChromeですが、
今ではWindows上で他のウェブブラウザを使うことはほぼなく、
私にとっては完全にメインのウェブブラウザとなっています。
バージョンを重ねるごとに進化して便利になり、
最近は好みのエクステンションなどインストールして
自分なりに使いやすくしているのですが、
ちょっと特殊なことをしたくなったので、
エクステンションの自作をしてみることにしました。
なお、ここで紹介するのは
「タブのタイトルを"dummy"にかえる」エクステンション
ということにしておきます。

最初にエクステンションを作成します。
ディスクの適当な場所に"change_title_to_dummy"フォルダを作成し、
"icon_enable.png"(19×19ピクセル)、"icon_disable.png"(19×19ピクセル)の
2つのアイコンファイルを作成します。
もし[Chrome ウェブストア]に公開するつもりなら、
別途公開用アイコン"icon.png"(128×128ピクセル)と
公開用スクリーンショット"screenshot.png"(1280×880ピクセル)も作っておきます。
公開用タイル"tile.png"(440×280ピクセル)も作っておきます。
また以下の内容で"manifest.json"ファイルを作成します。

{
	"name": "change title to dummy",
	"version": "0.0.0.1",
	"description": "This extension changes title to dummy.",
	"background_page": "background.html",
	"browser_action": {
		"name": "change title to dummy",
		"icons": "icon_enable.png"
	},
	"permissions": [
		"tabs",
		"http://*/*",
		"https://*/*"
	]
}

最後にプログラム本体となる"background.html"ファイルを以下の内容で作成します。

<html>
<head>
<script>
	var enable=true;

	chrome.browserAction.setIcon({path:"icon_enable.png"});
	chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
		if(enable){
			chrome.tabs.get(tabId,function(tab){
				chrome.tabs.executeScript(tabId,{code:"document.title='dummy'"});
			});
		}
	});
	chrome.browserAction.onClicked.addListener(function(){
		if(enable){
			enable=false;
			chrome.browserAction.setIcon({path:"icon_disable.png"});
		}
		else{
			enable=true;
			chrome.browserAction.setIcon({path:"icon_enable.png"});
		}
	});
</script>
</head>
</html>


では動作テストしてみましょう。
最新のChromeをインストールし、
アドレスバーに"chrome://extensions"を入力すると[拡張機能]ページが表示されます。
[デベロッパーモード]にして
[パッケージ化されていない拡張機能を読み込む]ボタンをクリックし、
先に作成した"change_title_to_dummy"フォルダを指定して[OK]をクリックすると、
[change title to dummy]エクステンションが読み込まれます。
これで普通に使えるはずです。
なおコードを変更するなどした時には
[再読み込み]をクリックして更新を適用する必要があります。

今度はパッケージにしてみましょう。
アドレスバーに"chrome://extensions"を入力して[拡張機能]ページを表示させ、
[デベロッパーモード]にして
[拡張機能のパッケージ化]ボタンをクリックし、
[拡張機能のルートディレクトリ]に
"change_title_to_dummy"フォルダを指定して[OK]をクリックすると、
"change_title_to_dummy.crx"ファイルと
"change_title_to_dummy.pem"ファイルが作成されます。
バージョンアップ等で再パッケージする場合は、
[秘密鍵ファイル]に生成済みの"change_title_to_dummy.pem"を指定して作成します。
なお、"change_title_to_dummy"フォルダをZIP圧縮して
"change_title_to_dummy.zip"ファイルを作っておきましょう。

それでは作成したパッケージをインターネット上で公開しましょう。
"change_title_to_dummy.crx"をウェブサーバ上に置いてリンクでも張っておけば
それにアクセスすることでインストールできます。
つまり独自にエクステンションストアを展開することができます。

まあ普通はGoogleの[Chrome ウェブストア]に公開することになるでしょう。
その方法について以下に説明します。
chromeを立ち上げて[Chrome ウェブストア]を開きます。
URLでいえば"https://chrome.google.com/webstore?hl=ja"となります。
左のメニューの下のほうにある[デベロッパー ダッシュボード]をクリックします。
もしサインイン画面が出たらgoogleアカウントでログインします。
[デベロッパー ダッシュボード]が開いたらページの下の方の
[今すぐこの料金を支払う]をクリックし、
Google checkoutで[Chrome ウェブストアのデベロッパー登録手数料]の
US$5を払いましょう。
このUS$5の支払いは1つのgoogleアカウントに対して一度限りですみます。
次に[新しいアイテムを追加する]をクリックし、
[ファイルを選択]で"tanimula_page_count.zip"を選択して[アップロード]します。
[詳細説明]でエクステンションの紹介文を入力し、
[新しいアイコンをアップロード]で"icon.png"を指定し、
[宣伝用の画像]の[タイル(小)]の
[新しいアイコンをアップロード]で"screenshot.png"を指定し、
[カテゴリ]、[地域]、[言語]を適切に設定して
[変更を公開]ボタンをクリックすれば完了です。

これで全世界に公開されたことになり、
[Chrome ウェブストア]の検索対象にもなります。
日本でのストア内課金はまだ正式にはやっていないみたいなので
事業化や小銭を稼ぐのはしばらく先になりそうですが、
自己満足するぐらいはできます。
ちなみにアプリ内課金についてはアプリ側で対応さえすればできるみたいです。
かなりめんどくさそうですが。

あと開発に関するさらに詳しいことは
このあたりに書いてあります。
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)