Google Chrome Extensions (拡張機能)の作り方

唐突にGoogle Chromeのエクステンション(拡張機能)が作ってみたくなりました。
作り方を調べたときの過程をメモしておきます。


※2014/10/27追記

記事の内容が古くなっていたので更新しました。
Google Chrome 拡張機能の作り方(V2対応)




参考サイト



エクステンションの作り方を解説しているサイトはこちら。
http://code.google.com/chrome/extensions/index.html

一番簡単なチュートリアルを写経してみます。
Tutorial: Getting Started (Hello, World!)
http://code.google.com/chrome/extensions/getstarted.html


ちなみに、試したときのChromeのバージョンは「4.1.249.1064」です。




チュートリアル



まず、作成する拡張機能の設定ファイルやhtmlを保存するフォルダを作成します。
今回は、「C:\chrome_extensions\tutorial」というフォルダを作成し、
この中に拡張機能用のファイルを保存することにしました。


拡張機能の全般的な仕様を記載したファイル「manifest.json」を
フォルダの中に作成します。

ファイルの中身は以下の通り。

■manifest.json


{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}



使用するアイコンは"icon.png"で、"http://api.flickr.com/"への通信を
許可しています。
icon.png

チュートリアルのサイトに、icon.pngがありますのでダウンロードして、
C:\chrome_extensions\tutorialに保存しておきます。
これが拡張機能を呼び出すボタンの画像になります。


これだけで、拡張機能に必要な最低限のファイルはそろいました。




拡張機能のインストール



作成した拡張機能をChromeに取り込んでみます。
Chromeで「chrome://extensions/」にアクセスするか、
右上のスパナボタンを押して、「拡張機能」を選択します。

01_001_20100508223604.png


拡張機能の画面が表示されます。
右側の「デベロッパーモード」をクリックすると、
「パッケージ化されていない拡張機能を読み込みます」というボタンが
表示されるので、ボタンを押します。

01_002_20100508223604.png


フォルダの選択画面が表示されるので、拡張機能を作成中のフォルダ
「C:\chrome_extensions\tutorial」を選択します。

01_003_20100508223603.png


こんな感じで拡張機能が取り込まれます。
ちゃんと右上に、icon.pngのボタンが表示されました。
※押しても無反応ですが・・・

01_004_20100508223603.png




ポップアップの表示



ボタンを押したら、ポップアップ画面を表示するようにします。
manifest.jsonにボタンを押したときの挙動を指定してやります。

■manifest.json


{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}




browser_actionのpopupにpopup.htmlを指定しました。
これで、ボタンを押したときpoupu.htmlがポップアップで表示されます。

popup.htmlというファイルをC:\chrome_extensions\tutorialに作成します。
内容は以下の通り。

■popup.html


<style>
body {
  min-width:357px;
  overflow-x:hidden;
}

img {
  margin:5px;
  border:2px solid black;
  vertical-align:middle;
  width:75px;
  height:75px;
}
</style>

<script>
var req = new XMLHttpRequest();
req.open(
    "GET",
    "http://api.flickr.com/services/rest/?" +
        "method=flickr.photos.search&" +
        "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
        "text=hello%20world&" +
        "safe_search=1&" + // 1 is "safe"
        "content_type=1&" + // 1 is "photos only"
        "sort=relevance&" + // another good one is "interestingness-desc"
        "per_page=20",
    true);
req.onload = showPhotos;
req.send(null);

function showPhotos() {
  var photos = req.responseXML.getElementsByTagName("photo");

  for (var i = 0, photo; photo = photos[i]; i++) {
    var img = document.createElement("image");
    img.src = constructImageURL(photo);
    document.body.appendChild(img);
  }
}

// See: http://www.flickr.com/services/api/misc.urls.html
function constructImageURL(photo) {
  return "http://farm" + photo.getAttribute("farm") +
     ".static.flickr.com/" + photo.getAttribute("server") +
     "/" + photo.getAttribute("id") +
     "_" + photo.getAttribute("secret") +
     "_s.jpg";
}
</script>





修正が終わったら、「再読み込み」をクリックして拡張機能を読み込みなおします。

01_005_20100508223603.png


拡張機能のボタンを押すと、こんな感じでflickrの画像が表示されました。

01_006_20100508223603.png





関連記事

コメント

参考になりました

英語だと1行ずつしか読めないもので、パッと見て要点が
分かる文章はとても参考になりました。いやぁ、楽なもの
ですねぇ。すごい仕組みです。

さ、APIリファレンスを見てこよう(。・_・。)ノシノシ。

Re: 参考になりました

そう言っていただけると、とっても嬉しいです。

パッケージ化されいない拡張機能を読み込もうとすると
http://up3.viploader.net/omoshiro/src/vlomoshiro032883.jpg
こういうエラーが出てしまいます

わかりすかったです

理解しやすい記事でした。
ありがとうございました。
非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ