Chrome 拡張機能 - 環境セットアップ

ブラウザにおかしな機能が欲しいです。単純な拡張機能で追加できるでしょうか？存在しませんが、自分で書くのは簡単ですよね?

それは私が数日前に思ったことです。 完全に間違っていたわけではありませんが、開発プロセスの一部には予想よりも少し時間がかかりました。難しいとは言いませんが、入手可能なドキュメントを使用して理解するのはかなり困難です。 API ドキュメント、中心的な概念などは、developer.chrome.com で非常にわかりやすく説明されていますが、私は特定の開発者エクスペリエンスが必要でした。

• Chrome 名前空間を適切に型指定した TypeScript
• コードを複数のファイルに分割し、必要なものをインポート/エクスポートする
• 単純な console.log やデバッガを使用してコードをデバッグする
• manifest.json のオートコンプリート
• ノードモジュールにバンドラーやインターネットの半分を必要としないシンプルなセットアップ
• ブラウザで拡張機能を更新してテストする簡単な方法

良くも悪くも、思い通りに物事を組み立てることができました。この投稿では、一般的な拡張機能の概念を簡単に説明し、私が開発環境をどのようにセットアップしたかを示します。次の 1 ～ 2 回の投稿では、単純なページオーディオ拡張機能の実装の詳細に焦点を当てます。

TLDR:
コードだけが必要な場合は、定型リポジトリは次のとおりです:

ブードゥー教 / クロム拡張ボイラープレート

Chromium 拡張ボイラープレート

このリポジトリは、Chrome 拡張機能の開発の出発点となることを目的としています。

可能な限り最小限ですが、事前構成されたものが付属しています:

• manifest.json のオートコンプリート
• ts フォルダーから dist ディレクトリへの TypeScript のトランスパイル
• Chrome 名前空間のタイプ
• エクスポートとインポートが適切に機能する (正しい自動インポート形式の VS Code ワークスペース設定を使用)
• manifest.json の例

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

GitHub で表示

ℹ️ 私は以下のどこでも Windows 11、MS Edge、VS Code、npm を使用しています ℹ️

---

拡張機能の簡単な紹介

一般的な拡張機能の概念に関する短期集中コースから始めましょう。

すべての拡張機能には、その名前、バージョン、必要な権限、および使用されるファイルを定義するmanifest.json ファイルがあります。拡張機能は、いくつかの異なる方法で機能を提供できます。

• ポップアップ経由 - 拡張機能ポップアップは、拡張機能バーの拡張機能アイコンをクリックすると開くこの小さなウィンドウです。
• コンテンツ スクリプト経由 - Web サイトに直接挿入され、DOM アクセスを持つスクリプト
• バックグラウンド (サービスワーカー) スクリプト経由 - スクリプトは開かれた Web サイトから独立した別のコンテキストで実行されます

他にも方法はありますが、このガイドではこれら 3 つの方法に固執します。

もう 1 つの重要な概念は、メッセージングです。通常、上記の方法にはそれぞれ異なる制限があるため、これらを組み合わせる必要があります。たとえば、バックグラウンド スクリプトは開いているタブに依存せず、状態を保持するのにより便利ですが、Web サイトの DOM にはアクセスできません。したがって、バックグラウンド スクリプトから拡張機能全体のデータを取得し、メッセージを使用してそれをコンテンツ スクリプトに渡し、そこから Web サイトを変更する必要がある場合があります。

権限に関するいくつかの基本を理解することも役立ちます。つまり、manifest.json で正しいアクセス許可が指定されていない場合、一部の API は期待どおりに動作しません。たとえば、「タブ」権限を指定しない場合、タブ API から返されるオブジェクトには URL フィールドがありません。一方で、あまりにも多くの権限を要求すべきではありません。拡張機能が公開される場合、ユーザーは、あまりにも多くのものへのアクセスを許可することを懸念する可能性があります。

---

単純な拡張機能の作成

https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world からインスピレーションを得た

ポップアップにテキストを表示するだけの非常にシンプルな拡張機能を使用して、開発ワークフローの中核概念を理解することから始めましょう。

ファイル

まず、manifest.json ファイルが必要です。

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

name、description、version、manifest_version はおそらく一目瞭然です。 action.default_popup は、拡張機能アイコンをクリックすると表示される HTML ファイルへのパスです。 default_icon は拡張アイコンへのパスです。どちらのパスも、manifest.json の場所に対する相対パスです。

次に、icon.png (たとえば、これ) ファイルと hello.html ファイルを、manifest.json と同じディレクトリに追加します。
hello.html は次のようになります:

<!-- hello.html -->
<p>Hello world</p>

ディレクトリ全体は次のようになります。

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

拡張機能を有効にする

拡張機能を有効にするには:

1. edge://extensions/ に移動します
2. 左側のサイドバーで、「開発者モード」を有効にします。
   • 「他のストアからの拡張機能を許可する」も必要な場合があります
3. 拡張機能リストの上にある「解凍してロード」をクリックします
4. 拡張ファイルが含まれるフォルダーを選択します
5. 拡張機能が拡張機能ツールバーのリストとそのアイコンに表示されるはずです?

アイコンをクリックすると、「Hello world」というテキストが含まれた小さなポップアップが表示されます。

これは最も重要な基本をカバーしています。もっと面白いことに移りましょう。

---

Page-Audio拡張環境のセットアップ

マニフェスト.json のオートコンプリート

manifest.json と空のディレクトリからもう一度始めます。

manifest.json ファイルを書くときにオートコンプリートがあれば素晴らしいですよね。幸いなことに、これは明確に定義された標準であり、https://json.schemastore.org/chrome-manifest に JSON スキーマがあります。必要なのは、manifest.json の先頭にある「$schema」キーの下にあるだけです:

<!-- hello.html -->
<p>Hello world</p>

そして、VS Code は、フィールド名を提案し、必須フィールドが欠落している場合は警告を表示することで、すぐに私たちを支援し始めます。すごい!?

セットアップをテストするために何かを機能させるには、次のように manifest.json を使用します。

.
├── hello.html
├── icon.png
└── manifest.json

• アイコン - 拡張機能アイコンを指定する別の方法です
• 背景セクション - Service Worker JS ファイルのパスとそのタイプを指定します。コードは後でエクスポートとインポートを使用するため、これはモジュールです

TypeScript

TypeScript の使用...そうですね、TypeScript が必要です。インストールしていない場合は、
から始めてください。

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest"
}

基本構成

物事を整理しつつ、複雑になりすぎないように、.ts ソース ファイルを ts ディレクトリに保存します。これらはトランスパイラーによってそこから取得され、.js ファイルとして dist ディレクトリに置かれます。

これは、次の .tsconfig で説明されています:

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest",
    "name": "Page Audio",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "icons": {
        "16": "icons/logo16x16.png",
        "32": "icons/logo32x32.png",
        "48": "icons/logo48x48.png",
        "128": "icons/logo128x128.png"
    },
    "background": {
        "service_worker": "dist/background.js",
        "type": "module"
    }
}

最も重要なビットは、compiler.rootDir と COMPILER.OUTDir です。他のフィールドには異なる値を設定することも、(少なくとも一部は) 完全に削除することもできます。

これが基本的な構成です。ts ディレクトリにいくつかのファイルを配置し、ルート ディレクトリで tsc を実行すると、対応する .js ファイルが dist に作成されます。ただし、重要な部分が 1 つ欠けています。それは、使用する chrome 名前空間のタイプです。最も簡単な解決策は、npm 経由で追加することです。

クロムタイプの追加

括弧だけを使用して空の package.json を作成します。

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

そしてコマンドラインで次を実行します:

<!-- hello.html -->
<p>Hello world</p>

tsc ビルドを監視モードで実行するスクリプトを追加することもできます。最終的な package.json は次のようになります:

.
├── hello.html
├── icon.png
└── manifest.json

ℹ️ あなたの場合、chrome-types のバージョンが高くなる可能性があります。 ℹ️

型を追加した後、TypeScript にそれらの型を知らせる必要があります。これを行うには、.tsconfig.json:
を更新するだけです。

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest"
}

セットアップが正しく機能するかどうかをテストするには:

1. ts フォルダーに、次の内容の background.ts ファイルを作成します
   

   // manifest.json
   {
       "$schema": "https://json.schemastore.org/chrome-manifest",
       "name": "Page Audio",
       "version": "0.0.0.1",
       "manifest_version": 3,
       "icons": {
           "16": "icons/logo16x16.png",
           "32": "icons/logo32x32.png",
           "48": "icons/logo48x48.png",
           "128": "icons/logo128x128.png"
       },
       "background": {
           "service_worker": "dist/background.js",
           "type": "module"
       }
   }
   
   

2. コマンドラインで、次を実行します
   

   npm install -g typescript
   

3. dist ディレクトリが作成され、background.js ファイルがそこに表示されたかどうかを確認します

4. ts/background.ts ファイルの console.log 文字列を変更して保存します

5. dist/background.js が自動的に更新されたかどうかを確認します。

それがうまくいけば、素晴らしいですね!ほぼすべての設定が完了しました?

ディレクトリ構造が次のようになっているかどうかを確認することもできます。

// .tsconfig
{
    "compilerOptions": {
        "target": "ES6",
        "module": "ES6",
        "outDir": "./dist",
        "rootDir": "./ts",
        "strict": true,
    }
}

輸入と輸出

前述したように、コードを小さなファイルに分割したいと考えています。これを行うには、エクスポートとインポートが正しく機能する必要があります。

その方向への 1 つのステップは、manifest.json で service_worker を "type": "module" として指定することでした。ただし、モジュールを操作する場合、TypeScript と JavaScript の間には 1 つの違いがあります。TypeScript ではインポート時にファイル拡張子が必要ありませんが、JavaScript では必要です。たとえば、次の import:

// package.json
{
}

TS では動作しますが、JS には
が必要です

npm i -D chrome-types

TS トランスパイラーはインポート パスに対して何もしないことを理解することも重要です。そして、file.js からインポートするときに file.ts も探す必要があることを理解できるほど「賢い」のです。

これらすべてを組み合わせると、TS は JS スタイルのインポートにも対応し、file.js からインポートするときに対応する TS ファイルを使用します。 私たちがしなければならないことは、TS ファイル内のすべてのインポートに .js 拡張子が付いていることを確認することです。 VS Code で自動化するには:

1. CTRL を押して設定を開きます
2. 「ワークスペース」タブに切り替えます
3. typescript.preferences.importModuleSpecifierEnding を検索します
4. 「.js / .ts」オプションに設定します

これで、VS Code を使用して自動インポートするたびに、ファイル名に .js が追加されます ?

正常に動作するかどうかをテストするには:

1. 次の内容の ts/hello.ts ファイルを作成します
   

   // package.json
   {
       "scripts": {
           "build": "tsc",
           "watch": "tsc -w"
       },
       "devDependencies": {
           "chrome-types": "^0.1.327"
       }
   }
   

2. ts/background.ts で現在の console.log 行を削除し、「hello」と入力し始めます

3. Tab で提案を受け入れた後、VS Code がオートコンプリートして正しいインポートを追加する必要があります

4. 最終的に、ファイルは次のようになります:
   

   // manifest.json
   {
     "name": "Hello World",
     "description": "Shows Hello World text",
     "version": "1.0",
     "manifest_version": 3,
     "action": {
       "default_popup": "hello.html",
       "default_icon": "icon.png"
     }
   }
   

インポートは .js 拡張子で終わることに注意してください。 dist/background.js をチェックすると拡張機能も存在し、これによりすべてが正しく動作します。

同じ段階にあることを確認するために、ディレクトリ構造を比較できます。

<!-- hello.html -->
<p>Hello world</p>

Service Worker 用の開発ツール

わかりました、私たちはまともな開発経験があります。 console.log 呼び出しもいくつか追加しました...しかし、どこで見つければよいでしょうか?

コンテンツ スクリプト内に console.log を追加すると、コンテンツ スクリプトは挿入先のページと同じコンテキストで動作するため、Dev Tools を開くだけでそこにログが表示されます。ただし、バックグラウンド スクリプトの console.log はもう少し隠されます。

1. まだ拡張機能をロードしていない場合は、edge://extensions/ を開いて拡張機能をロードします
2. リストで拡張機能を見つけます

3. 「ビューの検査」行の「Service Worker」リンクをクリックします。

   

4. 新しい開発ツール ウィンドウが開き、そこに Service Worker からのログが表示されます

   • ログが表示されない場合は、[ビューの検査] の下にある [再読み込み] をクリックしてください

タイルの下部にある 3 つのリンクも非常に重要です

• 「再ロード」 - 拡張機能全体 (manifest.json への変更を含む) を更新します。この表をチェックして、いつリロードが必要になるかを理解してください
• 「削除」 - 拡張機能を削除します
• 「詳細」 - 拡張機能に関する詳細情報 (権限など) が表示されます
• (オプション) 「エラー」 - Service Worker のインストール時にエラーが発生した場合、このリンクが表示され、エラーのリストが表示されます

ふぅ。しばらく時間がかかりましたが、最終的に環境が適切にセットアップされました。これからは、

するだけです。

1. npm run watch を実行します (停止した場合)
2. コードを ts ディレクトリに書き込みます
3. (オプション) 拡張機能タブから拡張機能をリロードします

拡張機能は自動的に更新されます。 ⚙️

（複雑なハッキングなしで）自動的に「リロード」する方法をご存知の場合は、コメント欄でお知らせください

まとめ

環境の準備ができました!

• オートコンプリートはmanifest.jsonで機能するため、正しい値が何であるかを推測する必要はありません
• TypeScript は Chrome API を正しく使用するのに役立ちます
• コードはより小さな論理ファイルに分割できます
• ts フォルダーに記述したコードは自動的に更新されます
• Service Worker とコンテンツ スクリプト用の開発ツールの場所はわかっています

次のパートでは、私の小さな「Page audio」拡張機能の実装の詳細について説明します。

読んでいただきありがとうございます!

以上がChrome 拡張機能 - 環境セットアップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。