スポンサーリンク

Chrome拡張機能とは?(ブラウザのアドオン開発に関する日本語ドキュメント)

※本記事は,クロームのアドオン開発に関するGoogle公式ドキュメントWhat are extensions?の日本語訳です。

Chromeアドオン(拡張機能,エクステンション)とは何か

アドオンとは,ブラウザ上の動作(browsing experience)をカスタマイズするための小さなソフトウェアです。


アドオンを使うと,各ユーザはChromeの機能を「自分好みに改造」できます。 
ブラウザの動作を,細かいニーズや設定に合わせて改変することができるのです。


アドオンは,HTMLやJavaScript,CSSなどのWeb系テクノロジーで作られています。


1個1個のChromeアドオンは,それぞれ1個の小さな,単一の目的(single purpose)を果たせるように作成されるべきです。
各アドオンが果たす役割は,理解しやすいように設計しましょう。


ひとつのアドオンの中に,複数の要素(components)や幅広い機能を含めることができますが,
その場合は,すべての機能がアドオンのもともとの開発目的を成し遂げるために役立つようにしてください。


アドオンのUIは,最小限かつ意味のあるものにしてください。
Gmailチェッカーアドオンのように,ブラウザのバー上にシンプルなアイコンを一つ表示するだけでも良いです。
また一方で,ブラウザで表示中のページをまるごと書き換える(override)ような,大がかりなUIのアドオンもあるでしょう。


アドオンのファイルは,ZIP圧縮されて 拡張子 .crx の単一パッケージになっています。
ユーザはその .crx ファイルを,ストア等からダウンロードおよびインストールします。


これはつまり,ChromeのアドオンはWebアプリとは異なるということです。
アドオンが動作するために必要なファイルはパッケージ化されており,外部のWebサイトを読み込んで表示することに依存した構成ではありません。


Chromeアドオンのデベロッパーは,Chromeデベロッパー・ダッシュボード上でアドオンをアップロードします。
そこでアップロードしたアドオンは,Chrome Webストア上で公開されます。
より詳細な情報は,ストアの開発者向けドキュメントをご参照ください。

Hello Extensions(アドオン開発・はじめの一歩)

ここでは Hello Extensions という手短なサンプルを紹介します。
アドオン開発を始めるための小さな一歩です。


まず新しいフォルダを作成し,そこにアドオン開発のために必要なファイルを格納することにしましょう。
必要なファイルは,サンプル置き場からダウンロードしてくることもできます。


新しいフォルダを作成したら,そのフォルダの中に manifest.json というファイルを作成し,下記のコードを記載してください。

  {
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2
  }

全てのアドオンに,このような「マニフェスト」が必要です。

(ほとんどのアドオンは,マニフェストを中心に作るわけではありませんが,
今回のサンプルでは,わかりやすくするためにマニフェストファイルを中心に進めます。)


この中のbrowser_actionフィールドに追記しましょう。
このアドオンのポップアップファイル,およびアイコンファイルのファイル名を定義することにします。
下記のように記載してください。

  {
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {  // ここから下を追記
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    }
  }

ここで指定した hello_extensions.png は,こちらからダウンロードできます。

hello.htmlは,下記のような内容で作成してください。

  <html>
    <body>
      <h1>Hello Extensions</h1>
    </body>
  </html>

(ここまでで,manifest.json およびpng, htmlファイルの合計3ファイルが,フォルダ内に格納されていることになります。)

今作っているのは,「アドオンのアイコンがクリックされたときに,hello.htmlを表示する」という動作です。


次のステップとして, manifest.json の中にキーボードショートカットを記載しましょう。
キーボードショートカットは必須ではありませんが,あると便利です。

  {
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    },
    "commands": {  // ここから下を追記
      "_execute_browser_action": {
        "suggested_key": {
          "default": "Ctrl+Shift+F",
          "mac": "MacCtrl+Shift+F"
        },
        "description": "Opens hello.html"
      }
    }
  
  }


最後のステップは,あなたのローカルマシン上で,Chromeにこのアドオンをインストールすることです。


Chromeで chrome://extensions に移動してください。(アドレスバーに打ち込めば移動できます)

画面右上の「デベロッパーモード」をONにしてください。

パッケージ化されていない拡張機能を読み込む」をクリックし,あなたがさっき作った「Hello Extensions」のアドオンのフォルダを選んでください。


これで,アドオンのインストールの完了です。

動作を試すには,ブラウザ上で表示されている hello_world.png のアイコンをクリックするか,Ctrl+Shift+F を押してください。ポップアップによるアドオンの動作を試せます。

次のステップ

次のチュートリアル記事:


Chromeアドオンの開発チュートリアルとしては,下記の記事も実践しやすいのでご参照ください。

今から3分で,Chromeブラウザの独自アドオンを自作してみよう (jQueryを使ったクローム拡張機能を,開発および動作テストする入門) - 主に言語とシステム開発に関して
https://language-and-engineering.hatenablog.jp/entry/2015/10/22/%E4%BB%8A%E3%81%8B%E3%82%89%EF%BC%93%E5%88%86%E3%81%A7%EF%BC%8CChrome%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E7%8B%AC%E8%87%AA%E3%82%A2%E3%83%89%E3%82%AA%E3%83%B3%E3%82%92%E8%87%AA

補足

Googleのドキュメント翻訳に関するライセンス・ポリシー:

Site Policies | Google Developers
https://developers.google.com/terms/site-policies

  • When you see a page with this notice you are free to use nearly everything on the page in your own creations. For example, you could quote the text in a book, cut-and-paste sections to your blog, record it as an audiobook for the visually impaired, or even translate it into Swahili. Really. That's what open content licenses are all about. We just ask that you give us attribution when you reuse our work. (スワヒリ語に翻訳しても良い)
  • You may also find the following notice on the bottom of some pages: Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.