Vite TS でブラウザ拡張機能を作成する

マニフェスト ファイルとサービス ワーカーのみを含む、最も基本的な拡張構造のセットアップに焦点を当てて、この演習を開始しましょう。マニフェストは構成ファイルとして機能し、拡張機能に実行を許可する内容を指定します。一方、Service Worker はバックグラウンド タスクを処理し、主にブラウザ イベントに応答します。この例では、拡張機能のインストール時にログが記録されます。

{
  "name": "Simple",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

manifest.json

console.log("Initialized background script!");

chrome.runtime.onInstalled.addListener((object) => {
  console.log("Installed background script!");
});

background.js

Service Worker は必要に応じて複雑にすることができますが、このタスクの目標はこの単純な 2 つのファイル拡張子を Vite プロジェクトに変換することであるため、今のところは単純にしておきます。

では、なぜ Vite を使用するのでしょうか?その主な理由は、コードの品質、保守性、生産性を大幅に向上させる TypeScript を使用することに決めたからです。 TypeScript を使用すると、自己ドキュメントを提供するだけでなく、実行時ではなくコンパイル時に型関連のエラーを捕捉できるため、全体的な開発エクスペリエンスが向上します。

ヴィーテ

TS コードを拡張機能に必要なバニラ JavaScript にコンパイルするには、TypeScript を使用した Node プロジェクトで十分ですが、私は Vite を選択しました。 Vite は、特にロールアップ バンドラーを備えており、ツリーシェイキングやバンドル縮小などの広範な機能を提供します。さらに、Vite の堅牢なプラグイン エコシステムにより、将来拡張機能用の UI コンポーネントを作成することにした場合でも、React を簡単に統合できます。

それを念頭に置いて、vanilla-ts テンプレートを使用して Vite プロジェクトを作成することから始めましょう。

npm create vite@latest simple-extension -- --template vanilla-ts

コマンドを実行して依存関係をインストールすると、TypeScript を使用して小さな Web プロジェクトがセットアップされます。ただし、この設定は必要なものではないため、いくつかのクリーンアップから始めます。まず、index.html ファイルは不要になったので、ルート フォルダーから削除します。次に、Vite 固有の機能の型定義を提供する vite-env.d.ts を除く、src フォルダー内のすべてのファイルを削除します。最後に、パブリック フォルダー内のすべてを削除します。

⚠️ tsconfig ファイルで不明なコンパイラ オプションに関するエラーが発生した場合は、エディタがプロジェクトにインストールされているのと同じ TypeScript バージョンを使用していることを確認してください。

次に、src フォルダーにbackground.ts という名前の新しいファイルを作成し、元のbackground.js ファイルからコードをそのファイルにコピーします。

TypeScript は適切な型がないと chrome オブジェクトを認識しないため、適切に機能するには追加のコンテキストが必要であることがすぐにわかります。これに対処するには、@types/chrome をインストールして、Chrome に必要な型定義を提供します。

{
  "name": "Simple",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

インストールすると、TypeScript エラーは表示されなくなります。ただし、onInstalled コールバックに警告メッセージが表示される場合があります。これは、Vite が TypeScript セットアップで設定した lint プロパティによるものです。

console.log("Initialized background script!");

chrome.runtime.onInstalled.addListener((object) => {
  console.log("Installed background script!");
});

tsconfig.json

使用されていないオブジェクトを定義しているので、先に進んでそれを削除しましょう。必要なのはこれだけなので、プロジェクトをコンパイルできます。

npm create vite@latest simple-extension -- --template vanilla-ts

問題があるようです。デフォルトの Vite 設定では、削除したばかりのファイルの一部をコード エントリ ポイントとしてまだ使用しようとしています。

npm i -D @types/chrome

ライブラリ モードで実行できるように Vite 構成をカスタマイズする必要があります。このプロジェクトに必要な最小限の構成は次のとおりです。

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true

vite.config.ts

上記の設定では、プロジェクトの入力を ./src/background.ts に設定し、出力ファイル名を [name].js に調整しているだけです。デフォルトでは、Vite は本番ビルドのファイル名にハッシュを追加します (background-[hash].js など)。ただし、正しく動作するには、manifest.json とファイル名が正確に一致する必要があります。

manifest.json と言えば、どこに置くべきでしょうか?この部分は簡単です。変換せずにそのまま出力フォルダーにコピーするファイルは、パブリック フォルダーに配置する必要があります。ここで、プロジェクトを再度ビルドすると、dist フォルダーにコンパイルされた 2 つのファイルのブラウザ拡張機能が見つかります。

npm run build

インストール

すべてが期待どおりに動作していることを確認してみましょう。これまでにブラウザ拡張機能をローカルでテストしたことがない場合は、次の簡単な手順に従ってください:

1. 新しいタブに chrome://extensions と入力して、拡張機能ページを開きます。
2. 開発者モードスイッチを切り替えて開発者モードを有効にします。
3. 解凍されたファイルをロード をクリックし、拡張機能ディレクトリ (Vite によって生成された dist フォルダー) を選択します。 それで終わりです！これで拡張機能がインストールされました。 Service Worker のリンクをクリックすると、この Service Worker の DevTools が開き、実際の Worker によって生成されたログを表示できます。

simple-vite-extension

以上がVite TS でブラウザ拡張機能を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。