Chrome拡張機能を作る3 - せたろーのブログ

今までは表示されているサイト上で実行される拡張機能を作りました。

今回はChrome拡張機能で右上に固定された拡張機能が選択されたときに実行される機能を作ってみます。

まずはmanifest.jsonに以下の記述を追加します。

{
    "manifest_version": 3,
    "name":"拡張機能の名前",
    "version": "1.0.0",
    "description": "拡張機能の説明",
    "action": {
        "default_popup": "popup.html"
    }

}

今までと違うのはactionを設定しているところです。

これは右上に固定された拡張機能を選択した時にポップアップとして表示されます。

例えばpopup.htmlをこのように設定して

<!DOCTYPE html>
<meta charset="UTF-8">
<html>

<head>
    <script src="test.js"></script>
</head>

<body>
    <button id="settingbtn">設定</button>
</body>

</html>

実際に実行をしてみると

このように表示されます。

javasctiptも問題なく実行されますが、開いているページを操作はできません。

開いているページを操作する方法は別の記事で紹介します。