Chrome拡張を crxjs と vite に助けてもらってつくりはじめる

ChatGPT と crxjs/vite のおかげで本当にカンタンになった。

npm init

プロジェクトの作成はこちらの通りにやればよい。

• Create a project | CRXJS Vite Plugin

npm init vite@^2.9.4

cd ../
npm install
npm install --save-dev vite-plugin-solid@1 solid-js

• solid-js, vite-plugin-solid は開発中に HMR をやってくれるやつで、これがあるとサクサクなので便利だった
  • @crxjs/vite-plugin が要求している vite が古いので、 vite-plugin-solid@1 を入れる。

デフォルトで生成されるファイルは使わないので消して良い。

rm -f ./src/{style.css,main.ts}

vite.config.ts

最低限だとこれくらいの設定で動く。

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
import { crx, defineManifest } from "@crxjs/vite-plugin";

const manifest = defineManifest({
  // 拡張機能を公開するならこの辺りもちゃんと設定する
  name: "...",
  description: "...",
  version: "0.0.1",
  manifest_version: 3,
  // Chromeに権限を要求する系の処理がある場合に、このへんも設定/実装が必要
  // permissions: ["identity", "storage"],
  // background: {
  //   service_worker: "src/background.ts",
  // },
  // action: {},
  content_scripts: [
    {
      // 拡張機能を動作させるドメインやパスの設定
      matches: ["https://...../*"],
      // 拡張機能のエントリポイントになるファイル名をここに書く
      js: ["src/content-script.ts"],
      // 実行タイミングを変更したりもできる(デフォルトは)
      // run_at: "document_start"
    },
  ],
});

export default defineConfig({
  // solidPlugin は開発中に HMR してもらうためのもの
  plugins: [solidPlugin(), crx({ manifest })],
});

content-script.ts

エントリポイントとなるファイル。ページが読み込まれて、本来のスクリプトが動いた後、ブラウザが塩梅を見て実行される。(document_idle で検索すると説明がでてくる)

プロジェクト生成直後はまず動作してることが確認するためのコードを置いておいたりしている。

console.log("test");

dev/build

# ./dist 配下にChrome拡張のフォーマットに沿ったコードが出力される
$ npm run dev

chrome

開発者モード/デベロッパーモードを ON にして読み込む。

• URL にいれると拡張機能管理画面になる
  • chrome://extensions/
• 「パッケージかされていない拡張機能を読み込む」
• ./dist ディレクトリを指定

edge も読み込みボタンの名前が「展開して読み込み」だが、同じような手順でできる。