それでは、実際に拡張機能を作ってみましょう。
作るものは、アイコンをクリックすると「Hello World!」と表示される、最もシンプルな拡張機能です。
まずはデスクトップなど任意の場所に新しいフォルダを作成し、名前を first-extension（何でもOKです）としてください。
このフォルダの中に「manifest.json」、「popup.html」という２つのファイルを作成します。
テキストエディタ（メモ帳やVS Codeなど）を開いて、以下のコードをコピー＆ペーストして保存してください。
■manifest.json （設定ファイル）
{
"name": "初めての拡張機能",
"version": "1.0",
"manifest_version": 3,
"description": "popup.htmlを使ったシンプルな拡張機能です",
"action": {
"default_popup": "popup.html"
}
}
１． manifest_version: 3
「この拡張機能は最新のルール（バージョン3）で作られています」という宣言です。
ネット上の古い記事だとここが 2 になっていることがありますが、現在は 3 と書くのが必須です。
２．name
拡張機能の名前です。Chromeウェブストアや、ブラウザの管理画面に表示されます。
３．version
拡張機能のバージョン番号です。1.0 や 0.0.1 など、自由に決められます。
機能を更新して再公開するときは、この数字を大きくする必要があります。
４．description
拡張機能の「短い説明文」です。
「これは何をするツールなのか？」を132文字以内で簡潔に書きます。
ここに入力した文章は、Chromeウェブストアの検索結果や、ブラウザの拡張機能管理ページに表示されます。ユーザーがインストールするかどうかを決める大切なアピールポイントになります。
５．action
「アイコンをクリックした時」の振る舞いです。
“default_popup”: “popup.html” と書くことで、「クリックされたら popup.html という画面を表示してください」と指示しています。
■popup.html （表示画面）
クリックした時に表示される小さなウィンドウの中身です。普通のWebページと同じHTMLで作ります。
<!DOCTYPE html> <html> <body> <p>Hello World!</p> </body> </html>
このコードは、Webサイトを作るときに使う通常のHTMLと全く同じです。
Chrome拡張機能だからといって、特別なタグやルールを覚える必要はありません。
１． <!DOCTYPE html> と <html>
「これはHTML（Webページを作るための言語）で書かれたファイルですよ」という宣言です。
決まり文句として書いておけばOKです。
２． <body> ～ </body>
このタグに囲まれた部分が、実際にポップアップ画面として表示されるエリアです。
ここに文字を書いたり、ボタンを配置したりすることで、拡張機能の見た目を作っていきます。
３． <p> ～ </p>
Paragraph（パラグラフ）の略で、文章の段落を表すタグです。
今回はここに「Hello World!」と書いたので、その文字が画面に表示されました。
これらのファイルを拡張機能として登録することで、タグの中に書いた文字が、ポップアップ画面に表示されます。
具体的な方法については次のステップで解説します。