拡張機能は、ブラウジング環境をカスタマイズする小さなソフトウェア プログラムです。ユーザーのニーズや好みに合わせて Chrome の機能と動作をカスタマイズできます。HTML、JavaScript、CSS などのウェブ技術に基づいて構築されています。
拡張機能は、限定的で理解しやすい単一の目的を果たす必要があります。すべてが共通の目的に貢献する限り、1 つの拡張機能に複数のコンポーネントとさまざまな機能を含めることができます。
目的を持ったユーザー インターフェースを最小限にとどめる。これらは、上記の Google Mail チェッカー拡張機能のようなシンプルなアイコンから、ページ全体のオーバーライドまで、多岐にわたります。
拡張機能ファイルは 1 つの .crx
パッケージに圧縮され、ユーザーがダウンロードしてインストールします。つまり、通常のウェブアプリとは異なり、拡張機能はウェブ上のコンテンツに依存しません。
拡張機能は Chrome デベロッパー ダッシュボードから配布され、Chrome ウェブストアに公開されます。詳しくは、ストアに関するデベロッパー向けドキュメントをご覧ください。
Hello 拡張機能
この Hello 拡張機能の簡単な例を参考に、拡張機能の簡単なセットアップを試してみましょう。まず、拡張機能のファイルを保存する新しいディレクトリを作成するか、サンプルページからファイルをダウンロードします。
次に、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>
アイコンをクリックすると、拡張機能に 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://extensions
にアクセスします。このページには、アドレスバーの右上にある Chrome メニューをクリックし、[その他のツール] にカーソルを合わせて [拡張機能] を選択してアクセスすることもできます。 - [デベロッパー モード] の横のチェックボックスをオンにします。
- [Load Unpacked Extension] をクリックして、「Hello Extensions」拡張機能のディレクトリを選択します。
これで完了です。hello_world.png
アイコンをクリックするかキーボードの Ctrl+Shift+F
キーを押すと、ポップアップ ベースの拡張機能を使用できるようになりました。
次のステップ
- スタートガイド チュートリアルの手順を行う
- 概要を読む
- Chromium ブログで最新情報を確認する
- Chromium-extensions グループに登録する