Chrome 拡張機能(v3)を自作してみる
Post : 2021/9/7 Update : 2021/9/7
今回はChromeの開発機能を開発してみる。
どうやら、拡張機能は最新版げVersion3があるので今回はv3で開発してみる。
ディレクトの構成は以下
まずは下のようにmanifest.jsonを新規作成
ChromeExtension-v3(root)
└ manifest.json
{
"name":"Chrome Extension v3 Sample",
"description":"テスト",
"version": "0.1.0",
"manifest_version":3
}
manifest.json
manifest.jsonとは拡張機能のバージョン情報やアプリの名前などの情報が含まる。
name
nameはアプリの名前
decrption
descriptionは拡張機能の説明
version
アプリのバージョン。ストアに公開する場合は更新するたびにVersionを上げる必要がある。
manifest_version
今回のVersionを3に設定。
読み込み方法
まずchromeから拡張管理を開く。

デベロッパーモードを有効にして、パッケージ化されていない拡張機能を読み込むから,manifest.jsonが含まれているフォルダーを選択。

作成した拡張機能が読み込まれる。

ポップアップの表示
拡張機能の読み込みができたので、ポップアップの表示を試してみる。
popup.htmlを下記ディレクトリに新規作成。
ChromeExtension-v3(root)
├ manifest.json
└ popup.html
popup.htmlに以下を追加。
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>Hello,World</h1>
</body>
</html>
manifest,jsonに3行をを追加
{
"name":"Chrome Extension v3 Sample",
"description":"テスト",
"version": "0.1.0",
"manifest_version":3,
"action":{
"default_popup":"popup.html"
}
}
拡張機能のリロードをする。

Popup機能クリックするとHello Worldが表示される。

htmlで動いているので結構簡単に作成ができそう。
ただ、最近流れで結構セキュリティが厳しいので変なところで引っかかりそうで怖いですね。