[Chrome] 公式推奨方法で拡張機能を作ってみた！[執筆中]

What are extensions? – Google Chrome

そもそも拡張機能とは何ですか？

拡張機能は、ブラウジングエクスペリエンスをカスタマイズする小さなソフトウェアプログラムです。ユーザーは、Chromeの機能と動作を個々のニーズや好みに合わせて調整することができます。それらは、HTML、JavaScript、CSSなどのWebテクノロジに基づいて構築されています。

ブラウジングエクスペリエンス：ブラウザ操作から得られる体験

拡張は、狭義に定義され、機能として理解しやすい単一の目的を果たさなければなりません。単一の拡張には、すべてが共通の目的に貢献する限り、複数のコンポーネントと機能の範囲を含めることができます。

拡張ファイルは、ユーザーがダウンロードしてインストールする単一の.crxパッケージに圧縮されています。つまり、拡張機能は通常のWebアプリケーションとは異なり、Webのコンテンツに依存しません。

拡張機能はChromeデベロッパーダッシュボードを介して配布され、Chromeウェブストアに公開されます。詳細については、ストア開発者のドキュメントを参照してください。

Hello拡張機能

この簡単なHello拡張機能の例を使って、拡張機能の仕組みを理解しましょう。サンプルページからHello拡張機能をダウンロードします。

Hello拡張機能フォルダ構成

• hello.html
• hello_extensions.png
• manifest.json

manifest.json

すべての拡張機能にはmanifest.jsonが必要です。

browser_actionフィールドでポップアップhtmlとアイコンをセットする事でアイコンがクリックされると、拡張機能でhello.htmlが表示されるようになります。

"browser_action": {
  "default_popup": "hello.html",
  "default_icon": "hello_extensions.png"
},

そして、キーボードショートカットを有効にするコマンドをmanifest.jsonに含めることもできます。

"commands": {
  "_execute_browser_action": {
    "suggested_key": {
      "default": "Ctrl+Shift+F",
      "mac": "MacCtrl+Shift+F"
    },
    "description": "Opens hello.html"
  }
}

インストール

ローカルマシンに拡張機能をインストールして実際に触ってみましょう。

ブラウザのUrlに chrome://extensions をコピペし拡張機能ページに移動します。

デベロッパーモードの横にあるチェックボックスをオンにします。

[パッケージ化されていない拡張機能を読み込む]をクリックし、 先ほどダウンロードしたhello_extensionsのフォルダを選択します。

　アイコンが表示されました！

hello_world.pngアイコンをクリックするか、キーボードのCtrl + Shift + Fを押して、ポップアップベースの拡張機能を使用できるようになりました。

クリックすると下の画像のようになります。

hello.htmlがポップアップ表示されていることがわかります。

Summary

さて、もっとも単純な形の拡張機能の仕組みをみてみました。

次ページでは公式の作り方のチュートリアルをみていきます。