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で動いているので結構簡単に作成ができそう。

ただ、最近流れで結構セキュリティが厳しいので変なところで引っかかりそうで怖いですね。