「Chrome拡張機能」を作ってみよう!必要なファイル「manifest.json」について解説!

Technology

みなさんこんにちは!おさかなです!

今回は「manifest.json」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・「Chrome拡張機能」を作ってみたいけど、どうすればいいかわからない方
・まず何から始めればいいのかわからない方
・「manifest.json」の作り方を知りたい人

はじめに

今回は「Chrome拡張機能」を作るときに必要な、最初につくるファイル「manifest.json」の解説をしていきたいと思います!

※「Chrome拡張機能作りの流れ」を知りたい方はコチラ!(準備中)

「manifest.json」ファイルって何?

「manifest.json」とは、かんたんに言うと「Chrome拡張機能の概要」を記したファイルになります!(なるほど…!)

形式は「JavaScriptのオブジェクト形式」である、「JSON形式」というもので書いていくことになります!
あまり聞きなれない形式ですが、次項で1つ1つ解説していくので安心してください…!

ファイルの階層としては、「HTMLファイル」「同じ階層」に作成すれば大丈夫です!

「manifest.json」のソースコード解説!

{
	"manifest_version": 2,
	"name": "Hello!",
	"version": "1.0",

	"browser_action": {
		"default_icon": {
		"16": "icon.png"
		},
		"default_popup": "index.html"
}

必須項目

"manifest_version": "ここにバージョンの数字を入力",

「manifest.json」自体のバージョン

 

"name": "ここにChrome拡張機能の名前を入力",

「Chrome拡張機能の名前」の設定

 

"version": "1.0",

「Chrome拡張機能」自体のバージョン
(はじめて作成する方は1.0で大丈夫だと思います!)

 

機能に応じた項目

"browser_action": {
		"default_icon": {
		"アイコン画像のサイズ": "アイコン画像の指定"
		},

アイコン画像を指定します。
(アイコンの画像サイズは基本的に16×16で問題ないと思います。)

 

"default_popup": "表示させたいポップアップの中身のファイルを指定"

アイコンをクリックしたら表示される「ポップアップ」の中身のファイル(HTMLファイル)を指定することが出来ます。

 

 

感想・まとめ

今回は「manifest.json」について、書いていきました…!

いかがだったでしょうか?

「Chrome拡張機能」を作るとき、あまり見ないファイルを作成したりするので最初は戸惑うかもしれませんが、慣れればそんなに難しくないので、おさかなと一緒に丁寧にチャレンジしていきましょう~!

(おさかなも頑張ります…!)

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

 

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

この記事は役に立ちましたか?

タイトルとURLをコピーしました