続・先取り! Google Chrome Extensions

第10回 Chrome拡張の国際化とギャラリーへの公開と総まとめ

この記事を読むのに必要な時間:およそ 3.5 分

拡張の作成手順とギャラリーへの公開

ここで,拡張の作成手順をざっくり復習してみます。

まず用意するのはmanifest.jsonです。このファイルに拡張の名前,バージョン,アイコン(インストール時に表示される128px×128pxの画像,一覧で表示される48px×48pxの画像の2つ)と拡張APIを使用するための定義を記述します。

使用するAPIに応じて,Background PagesOptions Pageに,Browser ActionsもしくはPage ActionsのPopup,さらにContent Scriptsなどのファイルを用意します。

Background Pageは,Chromeの起動中アクティブになっているので,定期的に処理を行ったり,タブの状態を監視して処理を行ったり,Content Scriptと連携したりと,多くの場合で拡張の中心的な機能を担います。

Options Pageでは,拡張の設定などを行うためのユーザーインターフェースを提供します。

Browser ActionもしくはPage Actionでは,アイコンをクリックされた時にポップアップを表示したり,何かアクションを行ったりすることができます。Chrome 4では,拡張から追加できる唯一のUIパーツなので,多くの拡張で使用されています。

Content Scriptsは,manifest.jsonでの定義に従って,指定のウェブページでJavaScriptを実行します(もしくはCSSを適用⁠⁠。ただし,拡張の特権的な機能クロスドメイン通信や,タブ操作ブックマーク操作など)を実行することはできないので,必要に応じてBackground Pageと通信を行います。Options pageで設定した内容も,Background Pageを経由して取得することになります。また,ページ側のコンテキストとも完全に分離されているので,直接そのページの関数を呼ぶといったことはできません(script要素を作って挿入したり,location.hrefにjavascriptスキームを入れるなどで実行は可能です⁠⁠。

開発時は,拡張機能のページで「パッケージ化されてない拡張機能を読み込みます」というボタンで拡張として読み込んで開発します。一度パッケージ化した後で同じIDで開発したい場合は,インストールした拡張をUser Dataフォルダの /Default/Extensions/拡張ID/バージョン/ からmanifest.jsonを見つけ,その中の "key" フィールドを元のmanifest.jsonに追加します。パッケージ化したときのIDと同じIDで読み込むことができるようになります。

ギャラリーへの公開

公式の拡張ギャラリーにアップする際に,準備しなければいけないものは特にありません。あえてあげるとすれば,アイコンとして32pxの画像を用意するとよいでしょう。また,前述の国際化対応は行っておくことをお薦めします。英語圏の方でも使える拡張であれば,少なくとも日本語が表示されないようにしておくことがポイントです。

では,ギャラリーへのアップを行います。まず,ギャラリーにアクセスすると,左メニューに「デベロッパーですか? 拡張機能を公開というリンクがあります。ここで,Googleアカウントへの認証を求められます。ログインしてアクセスすると,次のような画面が表示されます。

図2 Developer Dashboard

図2 Developer Dashboard

Add new itemというボタンをクリックすると,初回はギャラリーの利用規約が表示されます。内容に同意できる場合はAcceptをクリックして次の画面に進んでください。

次のページに進むと,拡張をアップロードする画面になります。拡張はcrxファイルではなく,zipファイルでアップします。それまで開発していたフォルダを丸ごとzipにするだけです。ただし,manifest.jsonにupdate_urlとkeyなどのフィールドを含めることはできません。これらはギャラリーで使用するためです。

なお,すでにギャラリー以外で公開している拡張をギャラリーでも公開するというケースでは,そのままアップすると拡張のIDが変わってしまいます。そういった場合,pemファイルをkey.pemと言う名前にリネームし,zipファイルの中に含めてアップします。key.pemを含めるのは初回のみです。逆に言えば,IDを指定できるのは初回だけです。一度公開した拡張のIDを変更することはできません(もちろん,削除してアップしなおすことはできます⁠⁠。

zipファイルのアップロードが完了すると,次の編集画面が表示されます。

図3 Developer Dashboardでの編集

図3 Developer Dashboardでの編集

ここで,拡張のアイコンをアップロードしたり,キャプチャを貼り付けたり,拡張の説明を記入したり,関連サイトやフォーラムへのリンクを貼ることができます。今回のように,_localeフォルダの作ってある拡張をアップした場合,メニューで言語を選択でき,その言語に応じた説明を入力することができます。

各項目を入力し終えたら右下のPreviewボタンで内容を確認して,問題なければPublishすれば無事公開されることになります。場合によっては公開後ダウンロード(インストール)できるようになるまで少し時間がかかることがあります。あせらず少し待ってからアクセスしてみましょう。

まとめ

今回で,この「先取り! Google Chrome Extensions」シリーズは最終回となります。拡張の仕様が頻繁に変わっていた時期からの連載でしたので,最初の頃の内容と現在では大分変わってしまったところがあります。特にToolstripsがごっそりなくなったりと,なかなか大変な連載でした。改めて振り返ると,説明が足りていなかったり,わかりにくいと思う箇所もありますし,全体の流れ自体にも反省点があります。

と,ちょっと言い訳がましくなってしまいましたが,そういった反省点を活かして,よりパワーアップした記事をお届けしたいと思っていますので,今後ともよろしくお願いいたします。それでは,半年間お付き合い頂きありがとうございました。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/