はじめてのGoogle Chrome Extension

はじめてのGoogle Chrome Extention

Google Chrome Extensionを作成したので、Google Chrome Extensionの作成方法について解説したいと思います。

今回作成したのは、ページがRSSを配信している場合はアドレスバーの右側にRSSアイコンを表示して、アイコンをクリックするとFastladderの登録ページに移動するというもの。ちょっとしたカスタマイズでお使いのRSSリーダー用に改造できる思います。

非常にざっくりとした解説ですが、一連のフローはわかると思います。また、Chromeの各種APIはChrome Extensions API リファレンスを参考にしてください。

最初の準備

まずは、Google Chrome のメニューにあるレンチアイコン→Tools→拡張機能　から拡張機能管理を開きます。

拡張機能管理の右上にある『デベロッパーモード』を有効にすると『パッケージ化されていない拡張機能を読み込む』というボタンが表示されるので、これでGoogle Chrome Extensionの開発が開始できます。

アイコンを表示する簡単な拡張

まずは、アイコンを表示する簡単な拡張を作ってみましょう。適当なフォルダ(今回はFeed Add Fastladder)に『manifest.json』というファイル名で次のJSONファイルを作成します。manifest.jsonはChrome Extensionの管理ファイルです。

{
  "name": "Feed Add Fastladder",
  "description": "Feed Add Fastladder.",
  "version": "1.0",
  "permissions": ["tabs"],
  "background_page": "background.html",
  "page_action": {
    "default_icon": "icon.png",
    "default_title": "First icon"
  }
}

『background.html』というファイル名で次のHTMLファイルを作成します。Extensionを作成すると、このbackground.htmlがGoogle Chromeの裏で動くようになり、各種ユーザーの操作を監視してイベントの制御を行います。

<html>
<head>
<script>
chrome.tabs.onUpdated.addListener(function(tabid, inf){
  if (inf.status === 'complete') {
    chrome.pageAction.show(tabid);
  }
});
</script>
</head>
<body></body>
</html>

これではタブの変更を監視し、タブが更新されたら、アドレスバーの横にアイコンを表示するようにしています。

拡張の実行

『manifest.json』と『background.html』、『icon.png』を用意したら拡張機能管理の『パッケージ化されていない拡張機能を読み込む』ボタンから、作業用のフォルダ『Feed Add Fastladder』を読み込みます。

これで全てのページにアイコンが表示されるようになります。表示されない場合はファイルを修正して、拡張機能管理の『再読み込み』のリンクをクリックして読み込みなおして実行します。

アイコンがクリックされた際の動作

background.htmlを次のスクリプトを変更することでアイコンがクリックされた際のイベントが設定できます。

chrome.tabs.onUpdated.addListener(function(tabid, inf){
  if (inf.status === 'complete') {
    chrome.pageAction.show(tabid);
  }
});
chrome.pageAction.onClicked.addListener(function(tab) {
	chrome.windows.get(tab.windowId, function(window) {
		if (window.focused) {
			var url = "http://fastladder.com/subscribe/"+tab.url;
			chrome.tabs.create({url: url, windowId: window.id});
		}
	})
});

ここではアイコンがクリックされた後にFastladderの登録ページに遷移するように設定しています。

コンテント・スクリプトの実行

RSSが配信されているページでのみアイコンを表示するように、スクリプトを次のように変更します。

chrome.tabs.onUpdated.addListener(function(tabid, inf){
	if (inf.status === 'complete') {
		chrome.tabs.executeScript(null,{file:"content_script.js"});
	}
});
chrome.pageAction.onClicked.addListener(function(tab) {
	chrome.windows.get(tab.windowId, function(window) {
		if (window.focused) {
			var url = "http://fastladder.com/subscribe/"+tab.url;
			chrome.tabs.create({url: url, windowId: window.id});
		}
	})
});

ここでは、タブが更新されたら『content_script.js』を実行するように変更しました。これはbackground.htmlから現在表示されているHTMLのDOM構造にアクセスできない為、コンテント・スクリプトとしてcontent_script.jsを実行しています。コンテント・スクリプトは現在表示されているHTMLのDOM構造にアクセスできる権限があります。

コンテント・スクリプトの作成

コンテント・スクリプト(content_script.js)では次のように設定します。RSSを配信している要素があればchrome.extension.sendRequestでtrueを、そうでなければfalseを送信します。

(function(){
	var flag=false;
	var links = document.getElementsByTagName("link");
	for(var i=0; i<links.length ; i++){
		var attr = links[i].getAttribute("type")
		if(attr=="application/rss+xml" || attr=="application/atom+xml"){
			var flag=true;
		}
	}
	chrome.extension.sendRequest(flag);
})();

コンテント・スクリプトの作成

最後にbackground.htmlをコンテント・スクリプトの内容を受信するように変更します。chrome.extension.onRequestで受信した際にイベントが設定できます。

var TabId;
chrome.tabs.onUpdated.addListener(function(tabid, inf){
	if (inf.status === 'complete') {
		TabId = tabid;
		chrome.tabs.executeScript(null,{file:"content_script.js"});
	}
});
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
	if(request){
		chrome.pageAction.show(TabId);
	}
});
chrome.pageAction.onClicked.addListener(function(tab) {
	chrome.windows.get(tab.windowId, function(window) {
		if (window.focused) {
			var url = "http://fastladder.com/subscribe/"+tab.url;
			chrome.tabs.create({url: url, windowId: window.id});
		}
	})
});

これで完成です。完成したら拡張機能管理の『拡張機能のパッケージ化』からパッケージ化することが出来ます。

作成したファイル(未パッケージ)

Greasemonkeyなどと比較してコンテント・スクリプトの概念が少しややこしいですね。ほかにも色々と出来そうなのでちょっと試してみます。

スポンサードリンク

2010年11月22日 23:02
カテゴリー JavaScript

«Web制作の現場で使う jQueryデザイン入門 5刷決定 | メイン | 1月15日ゼロからはじめるPHP入門講座 [名古屋]»