拡張機能は、ブラウジングをカスタマイズするための小さなソフトウェア プログラムです。ユーザーのニーズや好みに合わせて、Chrome の機能や動作をカスタマイズできます。HTML、JavaScript、CSS などのウェブ技術に基づいて構築されています。
拡張機能は、単一で範囲の限られたわかりやすい用途を満たす必要があります。共通の目的に貢献するものであれば、1 つの拡張機能に複数のコンポーネントとさまざまな機能を含めることができます。
ユーザー インターフェースは最小限に抑え、意図を持たせる必要があります。上の Google Mail Checker 拡張機能のようなシンプルなアイコンから、ページ全体のオーバーライドまで、さまざまなものがあります。
拡張機能ファイルは、ユーザーがダウンロードしてインストールする 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 メニューをクリックし、[その他のツール] にカーソルを合わせて [拡張機能] を選択します。 - [デベロッパー モード] の横にあるチェックボックスをオンにします。
- [パッケージ化されていない拡張機能を読み込む] をクリックし、[Hello 拡張機能] 拡張機能のディレクトリを選択します。
おめでとうございます！hello_extensions.png アイコンをクリックするか、キーボードで Ctrl+Shift+F を押すと、ポップアップ ベースの拡張機能を使用できるようになりました。
次のステップ
- スタートガイドのチュートリアルに沿って操作する
- 概要を読む
- Chromium ブログを読んで最新情報を入手する
- chromium-extensions group に登録する