GoogleChrome拡張作成してみた - ドナドナごとごと

ChromeのextensionはJSON、HTML、JSのみで書けるので比較的簡単に作成することができます。

Chromeの拡張を作成するためにはWindowsであればdev版が必要なため

http://www.google.com/chrome/intl/en/eula_dev.html

からdev版をDLしてきましょう。

今回作成するのは右上のアイコンをクリックするとサイトの名前の一覧がポップアップで表示されクリックするとそのサイトを新しいページで開く、という拡張です。サイトの名前とURLはオプションから登録します。

とりあえず適当な場所にフォルダを作成します。私は\マイドキュメント\chrome_extension\sampleとしました。sampleが今回の拡張を作成するフォルダになります。
右上に表示するタイプの拡張で作成しなければならないファイルは

manifest.json - 設定ファイル
popup.html - ポップアップするHTML
icon.png - 右上に表示するアイコン

の三つです。HTML、JS、画像の名前はなんでもいいですがJSONはmanifest.jsonという名前にしておいてください。
今回はオプションページも作成し、私がjQueryを利用しないとJSが書けないのでフォルダの構成は

manifest.json
popup.html
icon.png
options.html
js/jquery-1.4.2.min.js

こんな感じです。

manifest.json

{
	"name":"my shortcuts",
	"version" : "1.0",
	"browser_action":{
		"default_title":"shortcuts",
		"default_icon":"icon.png",
		"popup": "popup.html"
	},
	"options_page":"options.html"
}

設定ファイルです。

name -> 拡張の名前
version -> バージョン情報
brower_action -> 右上に表示させる拡張の詳細
- default_title -> アイコンにカーソルを乗せたときに表示するタイトル
- default_icon -> アイコンの画像
- popup -> アイコンをクリックしたときにポップアップとして表示するHTMLファイル
options_page -> オプションページのHTMLファイル

となります。

options.html

<html>
	<head>
		<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
		<style>
			#validate{
				display:none;
			}
		</style>
		<script type="text/javascript">
			$(function(){
			
				if(!localStorage){
					return;
				}
				for(var key in localStorage){
					$('ul#shortcuts_list').append('<li name="'+ key +'">title:'+ key + ' url: ' + localStorage[key] + '<button class="remove" name="' + key + '">remove</button></li>');
				}
			
				$('#add').click(function(){
					if($('#site_title').val() != '' && $('#site_url').val() != ''){
						var site_title = $('#site_title').val();
						var site_url = $('#site_url').val();
						localStorage[site_title] = site_url;
						$('ul#shortcuts_list').append('<li name="' + site_title  + '">title:' + site_title + ' url: ' + localStorage[site_title] + '<button class="remove" name="' + site_title + '">remove</button></li>');
						$('#site_title').val('');
						$('#site_url').val('');
						var status = $('div#status');
						status.innerHTML = "Options Saved.";
						setTimeout(function(){status.innerHTML = "";}, 750);
					}else{
						$('validate').removeClass('validate');
						setTimeout(function(){
							$('validate').addClass('validate');
						},750);
					}
				});
				
				$('button.remove').live('click',function(){
					var key = $(this).attr('name');
					localStorage.removeItem(key);
					$('li[name="' + key + '"]').remove();
				});
				
			});
		</script>
	</head>
	<body>
		<ul id="shortcuts_list"></ul>
		title:<input type="text" id="site_title" /><br />
		url:<input type="text" id="site_url" /><br />
		<button id="add" >Save</button>
		<div id="status"></div>
		<div id="validate">必要項目を入力してください</div>
	</body>
</html>

localStorageを利用するとデータが保存できます。このあたりは特に説明はいらないと思います。

popup.html

<html>
	<head>
		<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
			
				for(var key in localStorage){
					$('ul#list').append('<li><a class="shortcut" href="'+ localStorage[key] + '">' + key  +'</a></li>');
				}
				
				$('.shortcut').click(function(){
					var url = $(this).attr('href');
					chrome.tabs.create({url: url});
					window.close();
				});

			});
		</script>
		<style>
		</style>
	</head>
	<body>
		<ul id="list"></ul>
	</body>
</html>

アイコンはここからもってきましょう。
http://code.google.com/chrome/extensions/getstarted.html

作成したら
chrome://extensions/
を開いてデベロッパーモードにして「パッケージ化されていない拡張機能を読み込みます」をクリックしてsampleフォルダを選びましょう。すると右上にアイコンが追加されたと思います。
オプションでサイトのタイトルとURLをいくつか適当に保存してアイコンをクリックすると保存したサイトのタイトルがリンクとなって表示されたと思います。クリックすると新しいタブとしてそのページが開きます。

結構簡単ですね！

ちなみにGoogleの拡張を一般に公開するためには最初に5ドルかかるみたいです。でも英語が読めないからよくわからないです。
ここからこの拡張をDLできるかも！
私の方ではGoogleアカウントにサインインした状態なら見ることができるのですが...
https://chrome.google.com/extensions/detail/hdbadpbameljedcohfclapmpfeocepff?hl=ja