すごく簡単！オリジナル Chrome 拡張機能を作ってみよー！manifest version 1編

オリジナルー、オリジナルー！！自分で作るの大切！

拡張機能を作ってみよー！

去年に「ソーシャルてんこ盛りの Chrome 拡張機能」を作ったのですが、だいぶ時間が空いてしまっているので復習と備忘的に書きたいと思います！

Chrome の拡張機能って低機能な物は結構ハードル低いと思うので、ぜひチャレンジしてくださーい！HTML と JavaScript がある程度（少し？）分かる人が対象だと思います。

※ 今回はサクっと試していただく為に manifest version 1 の内容です。manifest version 2 でも書きました。

目標はこれ！

クリックするとその URL のツイートボタンを表示します！
色々題材は迷ったのですが、馴染みのありそうな Twitter のボタンにしてみましたｗ 1つ理解しておくと応用ききますもんね！

準備する物！

余計な事をせず、必要最低限だと思われる物だけピックアップしました！
4 ファイル用意するだけ！

manifest.json マニフェストファイル、jsonファイル。
popup.html 今回はポップアップで表示するので分かりやすいように。
19.png オムニバーの横に表示する小さいアイコン。19×19(px)
48.png 拡張機能一覧で表示される大きいアイコン。48×48(px)

上記4ファイルをZIPで圧縮してしていますのでお使いください！

manifest.json！

/* manifest.json */
{
	"name": "ここに拡張機能の名前",
	"version": "0.1",
	"description": "ここに拡張機能の説明",
	"icons": { "48": "48.png" },
	"permissions": [ "tabs" ],
	"browser_action": {
		"default_title": "ここに拡張機能アイコンにマウスオーバーした時に表示したい内容（名前とか）",
		"default_icon": "19.png",
		"popup": "popup.html"
	}
}

manifest.json の中身です、分かりやすいように値に直接説明を書き込んでいます。manifest.json が一番先に読み込まれると思いまーす！permissions で tabs を許可しているのは、実行されているタブの情報を取得するのに必要です、URLとか。

色々書き換えたりして試してみてくださーい！

popup.html！

<!-- popup.html -->
<html>
<head>
	<meta charset="utf-8">
	<style>body{width:130px;height:20px;}</style>
</head>
<body>
	<script>
		chrome.tabs.getSelected(null,function(tab){
			document.body.innerHTML = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="'+tab.url+'" data-text="'+tab.title+'" data-via="" data-lang="ja">ツイート</a>';
		});
		!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
	</script>
</body>
</html>

popup.html の中身でーす！
ツイッターのボタンを表示したいだけなので、Twitter の公式のソースコード貼付けて拡張機能で表示出来るように手を加えています。見比べてみてくださいね！

スタイルシートも最低限で body に縦横幅のみ指定しています。内容量が少ないので1ファイルに全部書きました。外部ファイル読み込みもOKです！

アクティブなタブの URL などの情報を取らないといけないので location.href では取れませーん。chrome.tabs.getSelected のコールバック関数内で body の innerHTML 指定して Twitter ボタンのアンカータグを表示させています。ここの中だとタブの情報が取得できます。URL とか Title とか。

アイコン！

まず 48px の方のアイコンは拡張機能の管理画面で表示されます。なので分かりやすいように48アイコンにしましたｗ

19px アイコンは説明無用ですよねｗ

アイコンのサイズは、128×128(px)とかの大きめのを1つだけ用意して指定してもいけるみたいです。今回は2ファイル、理由は自動縮小で崩れるなら最初から最適な物を用意したかったからです。

インストール方法！

インストールは、2パターンあります！
どちらもデベロッパーモードは必要なのでチェック！

パッケージ化されていない拡張機能を読み込む方法
自分でパッケージ化＆パッケージを読み込む

パッケージ化されていない拡張機能を読み込む方法

上でダウンロード出来る ZIP ファイルをデスクトップなどに解凍後、「パッケージ化されていない拡張機能を読み込む」ボタンを押し、4ファイル入っているフォルダを指定すると完了です。

最近の Chrome（バージョン22あたり）だと、正常にインストールされた場合でも上のキャプチャのように「この拡張機能をインストールしようとしたときに、次の警告がありました。マニフェストバージョン 1 は今後使用できなくなります。バージョン 2 にアップグレードしてください。」と出ますが、今回はマニフェストのバージョンは1なのでこれで問題ありません。

自分でパッケージ化＆パッケージを読み込む

基本的には上と同じですが、「拡張機能のパッケージ化」ボタンを押し「拡張機能のルートディレクトリ」に解凍後のフォルダを指定し「拡張機能のパッケージ化」ボタンを押すと同じ階層に拡張子が「.crx」のファイルが作られますので、それを拡張機能の一覧（chrome://chrome/extensions/）にドラッグして完了です。

パッケージ化されていない物を入れる時と違い、「この拡張機能をインストールしようとしたときに、次の警告がありました。マニフェストバージョン 1 は今後使用できなくなります。バージョン 2 にアップグレードしてください。」の警告は何故か表示されません。

扱いやすいようにパッケージ化したファイルもありますのでお使いください！

まとめ！

Chrome の拡張機能は実際に触るまでは、敷居が高そうとか特別なソフトが、言語知識が必要だとか（勝手に）難しいイメージを持っていました。でもちょっとしたきっかけから作ってみて、実はすごく簡単で通常のウェブ製作されている人なら作れる範囲だと思いました。本当にきっかけが大切ですよねｗという事で、みなさんもぜひぜひ Chrome 拡張機能にチャレンジしてみてくださーい！