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

manifest version 2 でオリジナルの Chrome 拡張機能を作る!
manifest version 1 → manifest version 2!今回は2!ツー!

manifest version 2 で作る!

前回に、 manifest version 1 でツイートボタンを表示する内容を書きましたが、manifest version 1 だとその内に使えなくなるので今回の内容が重要だったりします!

今回は前回の続きで、さきほどから連呼している manifest の説明と、前回の manifest.json と popup.html を version 2 に対応するとどう変わるのかを書いてみたいと思いまーす!

当記事は前回を読んでいただいてる事前提で書いていますので、まだでしたら「すごく簡単!オリジナル Chrome 拡張機能を作ってみよー!manifest version 1編」をお読みください。

manifest とは?

Chrome の拡張機能で必ず必要になる manifest.json のファイル内の仕様を主に指すのですが、簡単には Chrome 拡張機能全体の決まり事だと思っていただいたら良いと思います!

それで、version 2 になって何が変わったかと言うと仕様が若干厳しくなったり、manifest.json で使えるフィールド名が変わったり、外部 Script ファイルの読み込みが SSL のみ可能になったり、面倒になったりしてるみたいですが、特に難しい印象は受けませんでした。(むしろ version 1 が自由度高すぎだったのかもw)

上記リンクに、version 1 から version 2 での変更点や manifest.json のフォーマットの説明、それに version 1 の有効期限など書かれていますので気になる様でしたらどうぞ!最終的に version 1 は2013年の第三四半期に使えなくなるみたいです。海外だから6月1日 〜 9月30日?

分かりやすいスライドが公開されてますのでこちらもぜひ!

目標はこれ!

オリジナル Chrome 拡張機能で Twitter のツイートボタンを表示

基本的に前回と同じで、アイコンをクリックするとそのURLのツートボタンをポップアップで表示します!(区別の為にアイコンの色だけ変更していまーすw)

準備する物!

Chrome 拡張機能を作るのに必要なファイル(5ファイル)

前回は4ファイルだけだったのですが、今回は「popup.js」が増えて合計5ファイルになっていまーす!

manifest version 2 では、スクリプトは外部ファイルにして読み込んでとの事なので、新しく popup.js を用意しています。インラインはダメみたいです。特に問題ないですよねー

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

ダウンロードボタン

manifest.json!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* manifest.json */
{
	"name": "ここに拡張機能の名前",
	"version": "0.2",
	"manifest_version": 2,
	"content_security_policy": "script-src 'self' https://platform.twitter.com/widgets.js; object-src 'self'",
	"description": "ここに拡張機能の説明",
	"icons": { "48": "48.png" },
	"permissions": [ "tabs" ],
	"browser_action": {
		"default_title": "ここに拡張機能アイコンにマウスオーバーした時に表示したい内容(名前とか)",
		"default_icon": "19.png",
		"default_popup": "popup.html"
	}
}

変更点は3カ所!

  • 5行目「”manifest_version”: 2,」を追加。
  • 6行目「”content_security_policy”: “script-src ‘self’ https://platform.twitter.com/widgets.js; object-src ‘self'”,」を追加。
  • 13行目「”default_popup“: “popup.html”」の default_popup は version1 では popup でした。

version2 ではマニフェストのバージョンを書かないといけなくなりました。省略すると version1 扱いです。あと6行目は、外部ファイルを読み込む場合はそのファイルの URL を書いておかなくてはいけません。API とか使う場合にねw ここ若干面倒に感じますよね〜w 13行目は単純に項目名が変更になったみたいです。

popup.html!

1
2
3
4
5
6
7
8
9
<!-- popup.html -->
<html>
<head>
	<meta charset="utf-8">
	<style>body{width:130px;height:20px;}</style>
	<script type='text/javascript' src='popup.js'></script>
</head>
<body></body>
</html>

body タグの中に書いてた script タグの中身は popup.js に移したので、かなりシンプルになりました!

popup.js!

1
2
3
4
5
/* popup.js */
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");
});

popup.html に書いていた JavaScript をこのファイルに移しただけでーす!特に変更はありません。

アイコンの説明&インストール、パッケージ化!

アイコンの説明やインストール方法、それにパッケージ化は前回の記事を参照してくださいね!

今回の物をパッケージ化したファイルもお使いください!

ダウンロードボタン

おまけ!

このままだと前回からあまり進歩が無いので、他のソーシャルボタンの表示などを書きたいと思いまーす!

はてブボタン!

新しいはてなブックマークボタン

新しいはてブボタンが発表されていたので早速表示させてみよう!
と思ったのですが、これダメなんですよね〜w
はてブのスクリプトが SSL からは取得できないんです…。
残念w

はてなブックマーク数の○○usersを表示

って事で手抜きで○○usersのリンク&画像を表示!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* manifest.json */
{
	"name": "ここに拡張機能の名前",
	"version": "0.2",
	"manifest_version": 2,
	"description": "ここに拡張機能の説明",
	"icons": { "48": "48.png" },
	"permissions": [ "tabs" ],
	"browser_action": {
		"default_title": "ここに拡張機能アイコンにマウスオーバーした時に表示したい内容(名前とか)",
		"default_icon": "19.png",
		"default_popup": "popup.html"
	}
}
1
2
3
4
/* popup.js */
chrome.tabs.getSelected(null,function(tab){
	document.body.innerHTML = '<a href="http://b.hatena.ne.jp/entry/'+tab.url+'" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/'+tab.url+'"></a>';
});

5ファイルをZIPで圧縮した物!

ダウンロードボタン

パッケージ化した物!

ダウンロードボタン

Facebook いいね!ボタン!

Facebook のいいね!ボタンを表示

よく使いますよね? Facebook のいいね!ボタン
HTML5 のスクリプトタイプの物が上手く表示出来なかったので、今回は iframe タイプを表示!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* manifest.json */
{
	"name": "ここに拡張機能の名前",
	"version": "0.2",
	"manifest_version": 2,
	"description": "ここに拡張機能の説明",
	"icons": { "48": "48.png" },
	"permissions": [ "tabs" ],
	"browser_action": {
		"default_title": "ここに拡張機能アイコンにマウスオーバーした時に表示したい内容(名前とか)",
		"default_icon": "19.png",
		"default_popup": "popup.html"
	}
}
1
2
3
4
/* popup.js */
chrome.tabs.getSelected(null,function(tab){
	document.body.innerHTML = '<iframe src="https://www.facebook.com/plugins/like.php?href='+encodeURI(tab.url)+'&amp;send=false&amp;layout=button_count&amp;width=130&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:130px;height:21px;" allowTransparency="true"></iframe>';
});

5ファイルをZIPで圧縮した物!

ダウンロードボタン

パッケージ化した物!

ダウンロードボタン

Google +1 ボタン!

Google +1 ボタンを表示

個人的にはほとんど使っていない +1 ボタン
最近どうなんでしょ? Google+ ??

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* manifest.json */
{
	"name": "ここに拡張機能の名前",
	"version": "0.2",
	"manifest_version": 2,
	"content_security_policy": "script-src 'self' https://apis.google.com/js/plusone.js; object-src 'self'",
	"description": "ここに拡張機能の説明",
	"icons": { "48": "48.png" },
	"permissions": [ "tabs" ],
	"browser_action": {
		"default_title": "ここに拡張機能アイコンにマウスオーバーした時に表示したい内容(名前とか)",
		"default_icon": "19.png",
		"default_popup": "popup.html"
	}
}
1
2
3
4
5
6
/* popup.js */
chrome.tabs.getSelected(null,function(tab){
	document.body.innerHTML = '<div class="g-plusone" data-size="medium" data-href="'+tab.url+'"></div>';
	window.___gcfg={lang:'ja'};
	(function(){var po=document.createElement('script');po.type='text/javascript';po.async=true;po.src='https://apis.google.com/js/plusone.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(po,s);})();
});

5ファイルをZIPで圧縮した物!

ダウンロードボタン

パッケージ化した物!

ダウンロードボタン

全部盛り!

色々なソーシャルボタンを表示

ここまで来たら全部表示させてみたいですよね〜w
一気に賑やかにっ!!
レイアウトとかはお好きなように CSS なり触ってくださいね〜w

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* manifest.json */
{
	"name": "ここに拡張機能の名前",
	"version": "0.2",
	"manifest_version": 2,
	"content_security_policy": "script-src 'self' https://platform.twitter.com/widgets.js https://apis.google.com/js/plusone.js; object-src 'self'",
	"description": "ここに拡張機能の説明",
	"icons": { "48": "48.png" },
	"permissions": [ "tabs" ],
	"browser_action": {
		"default_title": "ここに拡張機能アイコンにマウスオーバーした時に表示したい内容(名前とか)",
		"default_icon": "19.png",
		"default_popup": "popup.html"
	}
}

content_security_policy で複数の URL の指定は単純にスペース入れるだけで良いみたいです!

1
2
3
4
5
6
7
8
9
10
/* popup.js */
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>'+
	'<iframe src="https://www.facebook.com/plugins/like.php?href='+encodeURI(tab.url)+'&amp;send=false&amp;layout=button_count&amp;width=130&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:130px;height:21px;" allowTransparency="true"></iframe>'+
	'<div class="g-plusone" data-size="medium" data-href="'+tab.url+'"></div>'+
	'<a href="http://b.hatena.ne.jp/entry/'+tab.url+'" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/'+tab.url+'"></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");
	window.___gcfg={lang:'ja'};
	(function(){var po=document.createElement('script');po.type='text/javascript';po.async=true;po.src='https://apis.google.com/js/plusone.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(po,s);})();
});

5ファイルをZIPで圧縮した物!

ダウンロードボタン

パッケージ化した物!

ダウンロードボタン

まとめ!

前回からあまり進展は無い内容だとは思いますが、ハードルが低いのでソーシャルボタンを表示させる事をテーマに書いてみました。manifest version 1 から version2 の変更点も少し書きましたが、popup 以外に他にも実装方法はあってその部分も含めると把握するのはちょっと大変なのかもしれませんw

出来そうな所から実際に手動かして作る事が何より大切ですよね!!
今回は、manifest version 2 で popup のみを使い色々とソーシャルボタンを表示させてみました!

  • manifest version 2 は若干扱いが厳しく(面倒?)なっている
  • manifest version 1 とは違いインラインスクリプトはダメで別ファイルを用意する
  • 外部 URL スクリプトファイルは content_security_policy で事前に指定&SSLのみ
  • ソーシャルボタンを表示させる程度ならハードルは低い

記事内容で間違い等ありましたら指摘していただけると勉強になります。m(__)mペコリ @actywav

記事内で取り上げたリンク