Google Chrome 拡張機能の開発 - 8 - (2017年12月)1年ぶりなのでもう一度はじめの一歩

#はじめに
1年ほど前に、ちょっとしたChromeの拡張機能を作ったものの、それからめっきり触れる事が無く、ちょっと作ったものを直そうにも何をしていいかもわからなくなったため、1からはじめてみます。

#とにかくやってみる
作業用に C:\ 直下に Hoge フォルダを作ります。今後はここを作業フォルダとして話を進めて行きます。
まずは、このフォルダを拡張機能のページにて指定してみます。

Chromeの拡張機能の管理ページを表示方法

Chrome右上の設定を表示するボタンをクリックしメニューより[その他ツール(L)].[拡張機能(E)]をクリックする。

(※拡張機能が一つもない状態)

[デベロッパーモード]にチェックを付けて、[パッケージ化されていない拡張機能を読み込む...]をクリックして、作業フォルダを指定します。
何もファイルを置いていないので、次のように表示されます。

#マニフェストファイルを設置する
必要な最小構成は次の通りで、これを作業フォルダに置きます。

manifest.json

{
	"manifest_version": 2,
	"name": "Hoge",
	"version": "0.0.0.1"
}

それに至る経緯については次の通りです

以下の中身の `manifest.json` ファイルを `C:\Hoge` に置いて、[再読み込み]ボタンをクリックします。

manifest.json

{}

manifest_versionキーが無いといわれるので追加し、メッセージ通りに引用符無しで 2 を指定して再読み込みします。

manifest.json

{
	"manifest_version": 2
}

今度は name が無いといわれるので、次のようにして再読み込みします。

manifest.json

{
	"manifest_version": 2,
	"name": "Hoge"
}

今度は version が無いといわれるので、次のようにして再読み込みします。

manifest.json

{
	"manifest_version": 2,
	"name": "Hoge",
	"version": "0.0.0.1"
}

どうにかエラーメッセージが表示されることなく読込めたようです。

ブラウザの右上に次のように表示されているかと思います。

表示用のアイコンを用意していない場合、 name で指定した値の頭文字がアイコンとして表示されるようです。

#アクションを設定する
アクションは「ブラウザアクション」と「ページアクション」とがありますので、とりあえずブラウザアクションとして、次のように設定をマニフェストファイルに追加します。(htmlのファイル名は慣習的にはpopup.htmlとするようです)

manifest.json

{
	"manifest_version": 2,
	"name": "Hoge",
	"version": "0.0.0.1",
	"browser_action": {
		"default_popup": "hoge.html"
	}
}

次のhtmlファイルを作業フォルダに追加します。

hoge.html

ほげ

拡張機能の管理ページでリロードをクリックします。
ブラウザの右上に表示されているアイコンをクリックすると次のように表示されました。

後は、やりたい事を hoge.html に追加していけば、最低限の事は行なえるかと思います。

#既にある拡張機能をいじってみる場合
次の場所に置かれています。

%UserProfile%\AppData\Local\Google\Chrome\User Data\Default\Extensions

拡張機能の管理ページで、[デベロッパーモード]にチェックを付ければ、IDが表示されますので、目的の拡張機能を丸ごとコピーして書きかえた後、[パッケージ化されていない拡張機能を読み込む...]で読込めばOKです。
元々ある内容を書き換えると不正防止のため破損状態となり、修復が必要になります。
この時、その拡張機能の保存情報を取っておかないと、初期化されますのでご注意ください。

とりあえず、今回はここまで。

前回	一覧	次回
これまでの内容を整理	シリーズ一覧	ページの閲覧を便利にする（アンカー追加、折りたたみ）