chromeの拡張機能開発を少し触ったので忘備録として書きます

あくまで忘備録なので他人に優しくありません…ごめんね

chrome拡張機能に必要な知識

・JavaScript
・HTML（設定画面など作るなら）
基本的にはこれだけです。

手順（簡略版）

  1. 必要な設定をmanifest.jsonに記述する。
  2. やりたい動作を.jsに記述する。
  3. 自分で使うだけならそのままパッケージ化されてない拡張機能を読み込む（デベロッパーモードon）

手順（詳細）

1. 必要な設定をmanifest.jsonに記述する。

{
    "manifest_version": 3,
    "name": "拡張機能の名前",
    "version": "1.0.0",
    "description": "拡張機能の説明",
    "icons": {
        "48":"img/icon48.png",
        "128":"img/icon128.png"
    },
    "permissions": ["使うchrome.* API(contextMenusなど)"],
    "option_page": "options.html",	// オプション画面を作るなら
    "background": {
        // バックグラウンドで動く（ページ単位ではなく常に動作）機能で作るなら
        "service_worker": "background.js"
    },
    "content_scripts":[
        {
        	// ページ単位で動かすなら
            "matches": ["<all_urls>"],					// 特定のサイトでのみ動かすならここを変更
            "js": ["jquery-3.7.1.min.js","content.js"],	// jqueryも使える
            "run_at": "document_start"					// 動かすタイミング
        },
        {
            // 2つ以上記述するならこうやる
        }
    ]
}

上のような感じで書いていきます。
触りしかやってないので詳しくは書けないですが用途によって書き方に違いが結構あります。

2. やりたい動作を.jsに記述する。

これはそのままですね。
content_scriptでやる場合などは普通のhtml作成のときと同じ感覚で書きます。
バックグラウンドだとchromeのAPIを使うことが多くなるのでまだ良くわかりません。
chrome.contextMenusなどを使えば右クリックの中身を増やしたり出来ます。

3. 自分で使うだけならそのままパッケージ化されてない拡張機能を読み込む（デベロッパーモードon）

これもそのままです。
拡張機能をストア以外から入れたことある人ならいつものやつです。
入れたことない人は調べてね。

+α オプションページ

options.htmlの部分です。
ここは普通のhtmlと同じようにscriptはhtml内で読み込みます。
データの保存や読み込みを行う場合は
"permissions": ["storage"]を追加します。
js内で

chrome.storage.sync.set(Object);					// 保存
chrome.storage.sync.get('key').then(data => {...});	// 取得

のように保存/取得を行います。
※ただし、注意点がありどうやらObject形式しか対応していないようです。