自分専用の雑すぎるChrome拡張機能を最速で有効化するメモ

2022年3月18日

3年に1回くらいChrome拡張機能を作りたいなと思う瞬間があって、毎回ほぼ完全に知識がリセットされた状態から「Chrome エクステンション作成」といったキーワードで情報収集するところから始まるのですが、時間がもったいなく感じるのでメモを置いておきます。

特に自分だけがパッと使いたい用途だと、ただページを開いたタイミングでJSを実行してくれれば良いことがほとんどです。

というわけで以下が、特定のURLを開いたらページタイトルを変更するだけの拡張機能を作るコマンドです。
実行すると manifest.json と main.js の2ファイルを含むディレクトリが作成されるので、 main.js を適当に編集したあと、Chromeの「拡張機能を管理」→「デベロッパーモード」ON→「パッケージ化されていない拡張機能を読み込む」からディレクトリを指定すれば設定完了です！

mkdir ~/my_extension_`date "+%Y%m%d%H%M"` && cd ~/my_extension_`date "+%Y%m%d%H%M"`

cat << EOD > manifest.json
{
  "manifest_version": 3,
  "name": "My Extension `date "+%Y%m%d%H%M"`",
  "version": "0.0.1",
  "content_scripts": [
    {
      "matches": ["https://mofg-in-progress.com/*"],
      "js": ["main.js"]
    }
  ]
}
EOD

cat << EOD > main.js
const handler = () => {
  document.title = 'My Extension loaded';
  console.log("My Extension loaded");
};

if (document.readyState !== "loading") {
  handler();
} else {
  document.addEventListener("DOMContentLoaded", handler);
}
EOD

Google Chrome Extensions Manifest V3に関する詳細情報はこちらから。
https://developer.chrome.com/docs/extensions/mv3/