対象読者は？
- Chromeの拡張機能について知りたい
- ブラウザアクションって何？
何が書かれいる？
- ブラウザアクションとは？
- 簡単な拡張機能の作成方法
- 自分で作った拡張機能を使う方法
Chrom拡張機能は大きく分けると以下の4つになります。
- ブラウザアクション
- ページアクション
- コンテンツスクリプト
- コンテキストメニュー
今回はブラウザアクションについて解説します。
ツールバーにアイコンが追加される機能になります。
- クリックしたら動作する
- 特定の内容を読み込んでバッチを表示する
などが出来るようになります。
実際に拡張機能を作成した方が理解しやすいと思います。
今から作成方法や自分で作った拡張機能も使う方法も解説しますので一緒に作ってみましょう！
拡張機能の作成する前に、最低限必要なファイルについて軽く説明します。
軽く流し見程度で大丈夫です。
実際に拡張機能を作成した後に、見直してみると理解が深まるはずです！
manifest file
Json形式で拡張機能の詳細情報を記載するファイルになります。
必須項目は3つ
- manifest_version：Chrome拡張機能のバージョン。現在v3。v2が徐々に廃止される予定
- name：自分で作成した拡張機能の名前
- version：自分で作成した拡張機能のバージョン。自分でバージョン決める
機能に応じて、こちらのファイルに情報を追加していきます。
今回は、ブラウザアクションを使った拡張機能を作成するので追加で記述が必要です。
HTMLファイル
オプションページやポップアップを作成するときに、表示する情報を記載します。
今回は、ポップアップ表示させるために使います。
JavaScriptファイル
JavaScriptを使ってを
- DOM要素の操作
- 外部と通信
などを使用する際に使います。
今回作成するブラウザアクションを使った簡単な拡張機能では使いません。
その他ファイル（CSS、画像）
CSSなどで、ポップアップの文字色変えたりとか アイコンの画像などを配置します。
今回作成するブラウザアクションを使った簡単な拡張機能では使いません。
作成イメージ
この「C」ってのが今回作成する拡張機能です。
（アイコン画像を入れてないので、タイトルの最初の文字が表示されてます。）
アイコンの上にマウスを乗せると、「Helloを表示する」という文字が表示されます。
「C」のアイコンをタップすると、ポップアップが表示されます。
このポップアップは、HTMLで作成したものです。
manifest.json（マニフェストファイル）
{
"manifest_version": 2,
"name": "Chrome Ex",
"version": "1",
"browser_action": {
"default_popup": "popup.html",
"default_title": "Helloを表示する"
}
}browser_action
ブラウザアクションを使用することを宣言します。
default_popupの部分が、ポップアップ表示するhtmlファイルを指定。
default_titleが、アイコンをマウスオーバーした際に表示される文字列を指定します。
popup.html（HTMLファイル）
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8" />
<head>
<title>ああああ</title>
</head>
<body>
<p>Hello!こんにちわ</p>
</body>
</html>manifestファイルで指定したポップアップで使用するHTMLファイルです。
1. 右上のハンバーガーから設定画面を開き、「その他ツール」、「拡張機能」の順で開きます
2. 「デベロッパーモード」をONにし、「パッケージ化されていない拡張機能を読み込む」をタップ。
自分が作成した2ファイルがあるディレクトリ（フォルダ）を選択します。
3. こういう風に表示されていればOK。
エラーは、v2に作成しているのでv3に変更してねって内容。
v3へのバージョンアップについては別記事で解説予定です。
4.右上の拡張機能のアイコンをタップすると、
自分が作成した拡張機能が読み込まれているので、
ピン立てマークをONにしてあげます。（しなくても使えはします）
5. 拡張機能のアイコンをマウスオーバーすると以下のように表示されます。
アイコンタップで、「Hello!こんにちわ」とポップアップが表示されます。
もし、JavaScriptを読み込ませたい場合
こちらに記事まとめましたので、こちらも参考にしてください。
【Chrome拡張機能】javascriptを読み込ませる方法
どうだったでしょうか？
意外と簡単で拍子抜けでしたか？
簡単にまとめますと、
・manifestファイルを作成する
・ポップアップ表示するhtmlを用意する
この2点になります。
主に、manifestファイルに追加したい機能を記載して
それに合ったファイルを用意する流れになります。
他のChrome拡張機能については、リンク集作成してますのでこちらも参考にしてみてください。
【Chromeの拡張機能】開発 まとめ
ソースコードは、Gitにあげてます。