導入

このブログでは、TypeScript、React、Tailwind CSS、Webpack を使用して Chrome 拡張機能をセットアップおよび開発する方法を説明します。私たちの理解をテストするために、「NoteMe」?? という最小限の拡張機能を作成します。私たちの拡張機能には次の機能が含まれます:

• ユーザーが特定の Web サイトに複數(shù)のメモを追加できるようにします
• ユーザーが特定の Web サイトの保存されたメモを表示できるようにします
• 特定の Web サイトのメモを削除するオプションを提供します
• メモをブラウザのストレージにローカルに保存します
• オプションでメモをクラウド ストレージのバックエンドと同期します

おさらい

このブログでは、最新のテクノロジーを使用して Chrome 拡張機能を構(gòu)築する方法を?qū)Wびます。このガイドは、ローカル開発中に拡張機能を構(gòu)築して Chrome にアップロードする方法にすでにある程度慣れていることを前提としています。これを初めて使用する場合、または基本の詳細なウォークスルーが必要な場合は、私の以前のブログをチェックすることをお勧めします: Link

拡張機能のスニークピーク

拡張機能には次のコンポーネントが含まれます:

• トグルボタン: サイドバーを開閉するボタンです。
• サイドバー: ユーザーが次のことができる多用途パネルです。 新しいメモを書きます。 保存されたメモを表示します。 保存したメモを削除します。 ノートをバックエンドと同期します (コード內(nèi)で利用可能なプロビジョニングが可能ですが、現(xiàn)在バックエンドは接続されていません)。
• ポップアップ: ユーザーがトグル ボタン (サイドバーの開閉に使用) を畫面上の事前に指定した位置に再配置できるようにする小さなウィンドウ 注: この実裝にはバックエンドの統(tǒng)合はありませんが、コードには將來バックエンドを接続するための規(guī)定が含まれています。

以下は、拡張機能が完了したときにどのように表示されるかを示すスクリーンショットです:

前提條件

このチュートリアルに入る前に、次のツールがシステムにインストールされていることを確認してください:

• Node.js (v18.16 LTS 以降)
• NPM (ノード パッケージ マネージャー、Node.js にバンドルされています)
• TypeScript
• ウェブパック
• VS コード エディタ (または任意のコード エディタ)

40,000フィートからの延長

上の図は、この拡張機能の內(nèi)部動作の概要を示しています。この図から導き出せるいくつかの重要なポイントを次に示します:

• コンテンツ スクリプトは、親 Web ページの DOM と直接対話し、ページのコンテンツを変更できるようにします。
• ポップアップ、バックグラウンド、およびコンテンツ スクリプトは、Chrome のランタイム メッセージング システムを通じて相互に通信します。
• Chrome ストレージまたはバックエンド API 呼び出しに関連するタスクの場合、コンテンツ または ポップアップ スクリプト は、ランタイム メッセージング システムを使用して バックグラウンド ワーカー に責任を委任します。
• バックグラウンド スクリプトは、アプリのバックエンドと Chrome のストレージとの唯一の仲介者として機能します。また、通知がある場合は、ランタイム メッセージングを使用して他のスクリプトに通知を中継します。
• ポップアップ と コンテンツ スクリプト は、Chrome のランタイム メッセージング システムを通じて直接情報を交換します。

拡張機能のセットアップ

Chrome 拡張機能プロジェクトでは特定のプロジェクト構(gòu)造は必須ではありませんが、manifest.json ファイルがビルド ディレクトリのルートに配置される必要があります。この柔軟性を利用して、さまざまなスクリプトを効果的に整理するのに役立つカスタム プロジェクト構(gòu)造を定義します。この構(gòu)造により、スクリプト間でのコードの再利用が向上し、重複が最小限に抑えられ、開発プロセスが合理化されます。

ステップ 1: プロジェクトの基本ディレクトリ構(gòu)造を作成する

まず、プロジェクトの基本的なディレクトリ構(gòu)造をセットアップします。次の bash スクリプトを使用して、manifest.json ファイルとともに基本構(gòu)造を作成できます。

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
? ? if [ ! -d "" ]; then
? ? ? ? mkdir 
? ? fi
}

create_file () {
? ? if [ ! -e "/" ]; then
? ? ? ? touch /
? ? fi
}

create_public_directories () {
? ? for public_path in "${public_paths[@]}";
? ? do
? ? ? ? create_directory $public_path
? ? done
}

create_source_directories () {
? ? for source_path in "${source_paths[@]}";
? ? do
? ? ? ? create_directory $source_path
? ? done
}

execute () {
? ? echo "creating project struture at "${bash_script_absolute_path}
? ? create_directory $project_name
? ? cd $bash_script_absolute_path"/"$project_name
? ? create_public_directories
? ? create_source_directories
? ? create_file $manifest_file $public_directory_path
? ? echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

ディレクトリ構(gòu)造が以下のスクリーンショットに示されているものと似ていることを確認してください。

ステップ 2: パブリック ディレクトリにある manifest.json ファイルは、以下に示すように構(gòu)造化されている必要があります。

{
? ? "manifest_version": 3,
? ? "name": "NoteMe",
? ? "version": "1.0",
? ? "description": "A Chrome extension built with React and TypeScript using Webpack.",
? ? "action": {
? ? ? "default_popup": "popup.html",
? ? ? "default_icon": "app-icon.png"
? ? },
? ? "background": {
? ? ? "service_worker": "background.js",
? ? ? "type": "module"
? ? },
? ? "content_scripts": [
? ? ? {
? ? ? ? "matches": ["<all_urls>"],
? ? ? ? "js": ["content.js"],
? ? ? ? "run_at": "document_end"
? ? ? }
? ? ],
? ? "permissions": [
? ? ? "storage",
? ? ? "activeTab",
? ? ? "scripting",
? ? ? "webNavigation"
? ? ],
? ? "host_permissions": ["<all_urls>"],
? ? "web_accessible_resources": [
? ? ? {
? ? ? ? "resources": ["styles.css", "sidebar-open.png", "sidebar-close.png"],
? ? ? ? "matches": ["<all_urls>"]
? ? ? }
? ? ]
? }

注意事項:

• .ts ファイルは .js ファイルにコンパイルされるため、ファイル拡張子は .js になります。これは、Chrome 環(huán)境での実行時に必要となります。
• 一致フィールドは を使用します。その値を値として指定すると、拡張機能が Chrome に読み込まれた任意の Web ページで動作できるようになります。
• app-icon.png、sidebar-open.png、sidebar-close.png の 3 つの畫像ファイルが參照されています。これらのファイルは、このブログの最後にリンクされているリポジトリにあります。
• プロジェクトのビルド後、manifest.json ファイルは dist ディレクトリのルート レベルに配置する必要があります。これを確実に行うには、ビルド プロセス中に適切に移動するように Webpack 設(shè)定を構(gòu)成する必要があります。

ステップ 3: npm を初期化し、依存関係をインストールする

• まず、次のコマンドを使用してプロジェクト內(nèi)の npm を初期化します: npm init -y
• 必要な開発依存関係をプロジェクトの devDependency セクションに追加します。次のコマンドを?qū)g行します。 npm i --save-dev @types/chrome @types/react @types/react-dom autoprefixer copy-webpack-plugin css-loader mini-css-extract-plugin postcss postcss-loader style-loader tailwindcss ts-loader typescript webpack webpack-cli webpack-dev-server
• プロジェクトの実行に必要なランタイム依存関係を追加します。 npm i --save 反応反応-dom

ステップ 4:manifest.json で參照されるファイルを作成する

manifest.json で參照される次のファイルを作成します: backgroun.ts、content.ts、popup.html。

• background.ts: このファイルを src/scripts/background ディレクトリに作成します
• content.ts: このファイルを src/scripts/content ディレクトリに作成します
• Popup.html このファイルをパブリック ディレクトリに作成します

ステップ 5: ポップアップと背景のコードを更新する

パブリック ディレクトリの Popup.html ファイルに次のコードを追加します。

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
? ? if [ ! -d "" ]; then
? ? ? ? mkdir 
? ? fi
}

create_file () {
? ? if [ ! -e "/" ]; then
? ? ? ? touch /
? ? fi
}

create_public_directories () {
? ? for public_path in "${public_paths[@]}";
? ? do
? ? ? ? create_directory $public_path
? ? done
}

create_source_directories () {
? ? for source_path in "${source_paths[@]}";
? ? do
? ? ? ? create_directory $source_path
? ? done
}

execute () {
? ? echo "creating project struture at "${bash_script_absolute_path}
? ? create_directory $project_name
? ? cd $bash_script_absolute_path"/"$project_name
? ? create_public_directories
? ? create_source_directories
? ? create_file $manifest_file $public_directory_path
? ? echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

注:

上記のコードは 2 つのリスナーをインストールします:

1. chrome.runtime.onInstalled.addListener によって登録された関數(shù)は、拡張機能がブラウザにインストールされるたびに実行されます。これを使用して、Chrome ストレージまたはバックエンド (該當する場合) を事前定義された狀態(tài)で初期化できます。
2. chrome.runtime.onMessage.addListener によって登録された関數(shù)は、バックグラウンド スクリプトがコンテンツまたはポップアップ スクリプトからメッセージを受信するたびに実行されます。

さらに、import ステートメントは src/lib ディレクトリからリスナーを取り込みます。アプリのコア ロジックは src/lib に構(gòu)築されており、さまざまなコンテキスト (コンテンツやバックグラウンド スクリプトなど) での再利用が可能です。

ステップ 6: src/lib ディレクトリのチュートリアル

src/lib ディレクトリには、拡張機能のコア ロジックが格納されています。以下はその構(gòu)造と主要コンポーネントの概要です:

• コンポーネントディレクトリ: 拡張機能で使用されるすべての React コンポーネントが含まれています。
• lib/components/ContentApp.tsx: コンテンツ スクリプトのコンテナ コンポーネントとして機能します。
• lib/components/NoteMePosition.tsx: ポップアップ スクリプトを擔當するコンポーネントが含まれています。
• helpers.ts: 拡張機能全體で使用されるヘルパー関數(shù)が含まれています。
• ストレージモデル.ts: Chrome のローカル ストレージとのやり取りを管理します。保存されるデータの構(gòu)造の詳細については、types.ts.
とともにこのファイルを參照してください。
• types.ts: 拡張機能で使用されるカスタム タイプを定義します。
• worker.ts: バックグラウンド イベント リスナーのコールバックが含まれます。

詳細な実裝については、リポジトリ內(nèi)の実際のコードを參照してください。

ステップ 7: React コンポーネントのマウント

このステップでは、レンダリング用に React コンポーネントをマウントします。これらのコンポーネントは、src/scripts/content/content.ts と src/scripts/popup/popup.ts の 2 つの異なるスクリプトにマウントされます。

ポップアップ スクリプト: src/scripts/popup/popup.ts にあります。

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
? ? if [ ! -d "" ]; then
? ? ? ? mkdir 
? ? fi
}

create_file () {
? ? if [ ! -e "/" ]; then
? ? ? ? touch /
? ? fi
}

create_public_directories () {
? ? for public_path in "${public_paths[@]}";
? ? do
? ? ? ? create_directory $public_path
? ? done
}

create_source_directories () {
? ? for source_path in "${source_paths[@]}";
? ? do
? ? ? ? create_directory $source_path
? ? done
}

execute () {
? ? echo "creating project struture at "${bash_script_absolute_path}
? ? create_directory $project_name
? ? cd $bash_script_absolute_path"/"$project_name
? ? create_public_directories
? ? create_source_directories
? ? create_file $manifest_file $public_directory_path
? ? echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

コンテンツ スクリプト: src/scripts/content/content.ts にあります。

{
? ? "manifest_version": 3,
? ? "name": "NoteMe",
? ? "version": "1.0",
? ? "description": "A Chrome extension built with React and TypeScript using Webpack.",
? ? "action": {
? ? ? "default_popup": "popup.html",
? ? ? "default_icon": "app-icon.png"
? ? },
? ? "background": {
? ? ? "service_worker": "background.js",
? ? ? "type": "module"
? ? },
? ? "content_scripts": [
? ? ? {
? ? ? ? "matches": ["<all_urls>"],
? ? ? ? "js": ["content.js"],
? ? ? ? "run_at": "document_end"
? ? ? }
? ? ],
? ? "permissions": [
? ? ? "storage",
? ? ? "activeTab",
? ? ? "scripting",
? ? ? "webNavigation"
? ? ],
? ? "host_permissions": ["<all_urls>"],
? ? "web_accessible_resources": [
? ? ? {
? ? ? ? "resources": ["styles.css", "sidebar-open.png", "sidebar-close.png"],
? ? ? ? "matches": ["<all_urls>"]
? ? ? }
? ? ]
? }

重要なポイント:

• 個別のマウント スクリプト: ポップアップ スクリプトとコンテンツ スクリプトは異なるコンテキストで動作します
• ポップアップ スクリプト: ロードされる Popup.html Web ページのコンテキスト內(nèi)で実行されます。 ?
• コンテンツ スクリプト: ブラウザにロードされたメイン Web ページのコンテキスト內(nèi)で実行されます。
• コンテンツ スクリプトのシャドウ DOM: ?
  • コンテンツ スクリプトによって挿入されたスタイルは、親 Web ページの外観に影響を與える可能性があります。 ?
  • これを防ぐために、Shadow DOM を使用してスタイルをカプセル化し、拡張機能內(nèi)でスタイルが分離されたままになるようにします。 ?
  • ポップアップ スクリプトは獨自の隔離された環(huán)境 (popup.html) で動作するため、これは必要ありません。

ステップ 8: コンパイルとビルドのための構(gòu)成

拡張機能のコンパイルとビルドに必要な構(gòu)成の追加

拡張機能を正常にコンパイルしてビルドするには、次のファイルを構(gòu)成する必要があります:

1. postcss.config.js
2. tailwind.config.js
3. tsconfig.json
4. webpack.config.js

重要なポイント:

• デフォルト設(shè)定: プロセスを簡素化し、完全に機能する拡張機能の構(gòu)築という主な目標に集中できるように、可能な限りデフォルト設(shè)定が提供されています。
• リポジトリの詳細: これらのファイルの完全な構(gòu)成と詳細な設(shè)定については、コード リポジトリを參照してください。

これらの構(gòu)成は、TypeScript のコンパイル、Tailwind CSS 統(tǒng)合、および拡張機能の Webpack ビルド プロセス全體を処理します。

拡張機能のテスト

1. dist ディレクトリを生成します: 次のコマンドを?qū)g行して dist ディレクトリを作成します: npm run build
2. Chrome にアップロード: ? ?
   • Chrome を開き、chrome://extensions/ に移動します。 ? ?
   • 右上隅にある開発者モードを有効にします。 ? ?
   • Load Unpacked をクリックし、dist ディレクトリを選択します。
3. インストールの確認:
   • ロードされると、デフォルトで拡張機能のアイコンが各ページの右下隅に表示されます。
4. 機能チェック:
   • 位置コントロール: ポップアップ內(nèi)のコントロールを使用して、アイコンの位置を変更します。
   • メモ機能: メモは Web サイトごとに個別に保存され、他のサイトに影響を與えることなく特定のサイトについて削除できます。
5. バックエンド シミュレーション:
   • 現(xiàn)在バックエンドは接続されていませんが、コードにはバックエンドと統(tǒng)合するための規(guī)定が含まれています。
   • 現(xiàn)在の実裝は、setTimeout を使用してバックエンド接続を模倣し、非同期対話をシミュレートすることを約束します。

拡張機能のテスト中にキャプチャされたスクリーンショットをいくつか示します。

重要なポイント

このブログから重要なポイントをいくつか紹介します。

• コンテンツ スクリプト、ポップアップ スクリプト、バックグラウンド ワーカーなど、Chrome 環(huán)境のさまざまなコンポーネントが Chrome のランタイム メッセージング システムを使用してどのように相互に通信するかを調(diào)査しました。
• プロジェクト構(gòu)造のセットアップ、依存関係のインストール、コア機能の作成など、Chrome 拡張機能を最初から構(gòu)成して構(gòu)築する方法を?qū)Wびました。
• 次のようないくつかの優(yōu)れた実踐方法を発見しました。
  • 保守性とスケーラビリティのために、スクリプト間でのコードの再利用性を強化します。
  • コンテンツ スクリプトで Shadow DOM を利用して、親 Web ページとのスタイルの競合を防ぎます。

先を垣間見る

將來的には、完全に機能する Chrome 拡張機能を Chrome ウェブストアに公開するプロセスを調(diào)査する別のブログに取り組む予定です。このブログの目標は次のとおりです:

• 現(xiàn)実世界の問題を解決するのに十分な拡張機能複合體を開発します。
• 拡張機能を Chrome ウェブストアに公開する手順を段階的に説明します。

このブログを読んでいただきありがとうございます!あなたの関心とサポートは私にとってとても意味があります。この旅を続ける中で、さらに多くの洞察を共有できることを楽しみにしています。

コーディングを楽しんでください!

github リンク: https://github.com/gauravnadkarni/chrome-extension-starter-app

この記事はもともと Medium に公開されたものです。

以上がChrome 拡張機能の開発 - TypeScript、React、Tailwind CSS、Webpack を使用して最小限のアプリを開発しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。