はじめてみよう

このチュートリアルでは、簡単な拡張機能の作り方を一通り体験できます。この拡張機能によりGoogle Chrome上に、クリックすると自動的に下図のようなページを作成して表示するようなボタンを追加します。

ブラウザの準備

Google Chromeの拡張機能を開発するには、ブラウザを早期リリースバージョンにしなければなりません。通常の“安定版” では、拡張機能は未だサポートされていません。

Windows もしくは Linux を使っている場合:
Mac を使っている場合: Dev channel

拡張機能の作成と読み込み

このセクションでは、拡張機能を記述して、ブラウザのツールバーにボタンを追加します。

1. コンピュータ上の任意の場所に、拡張機能のコードを入れるためのフォルダを作成する。
2. そのフォルダ内に、 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/"
  ]
}

3. 下の画像を、同じフォルダに保存する。

icon.png

4. 拡張機能を取り込む。

レンチのアイコンをした設定メニューを開き、“拡張機能” を選んで拡張機能管理画面を呼び出す。
もし “デベロッパーモード” の横に + の記号があれば、そこをクリックする。すると + が – に変わり、幾つかのボタンが表示される。
表示された “パッケージ化されていない拡張機能を読み込みます…” をクリックする。
ダイアログが表示されるので、作成したフォルダを指定して OK をクリックする。

作成した拡張機能に誤りがなければ、アドレスバーの横にアイコンが表示され、先程の管理画面に拡張機能が表示される。

拡張機能にコードを追加する

次に、拡張機能に何か見栄えの良いことをさせてみましょう。

1. 次のように manifest.json に記述を追加する。

  ...
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  },
  ...

カンマで繋ぐのを忘れないようにしてください。

そして、拡張機能のフォルダに 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>

2. 拡張機能の管理画面に戻り、“再読み込み” をクリックして更新されたコードが読み込まれるようにする。

3. 拡張機能のアイコンをクリックすると、popup.html に記述したようなポップアップが表示されることを確認する。

それは、次のようになるはずです。

もし上手くいかない場合、手順をよく確認してもう一度試してみてください。このポップアップファイルを単体で直接開こうとしないでください。それはいずれにしろ上手く動きません。

次にするべきこと

ここまで出来れば、次は以下のようなことをやってみてはいかがでしょう。

概要を読む
デバッグ方法を学ぶ
して、最新情報を得る
幾つかのを見てみる
たとえばのようなを見る。

デバッグ方法 »