ホームページ >ウェブフロントエンド >jsチュートリアル >Chrome 拡張機能 - 環境セットアップ

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

DDDオリジナル: 2025-01-04 15:51:39689ブラウズ

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

それは私が数日前に思ったことです。 完全に間違っていたわけではありませんが、開発プロセスの一部には予想よりも少し時間がかかりました。難しいとは言いませんが、入手可能なドキュメントを使用して理解するのはかなり困難です。 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 を使用しています ℹ️

拡張機能の簡単な紹介

Chrome extension - environment setup

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

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

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

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

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

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

単純な拡張機能の作成

Chrome extension - environment setup

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"
  }
}

拡張機能を有効にする

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

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

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

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

Chrome extension - environment setup

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

Chrome extension - environment setup

マニフェスト.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"
}

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

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"
    }
}

コマンドラインで、次を実行します
```
npm install -g typescript
```
dist ディレクトリが作成され、background.js ファイルがそこに表示されたかどうかを確認します
ts/background.ts ファイルの console.log 文字列を変更して保存します
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 で自動化するには:

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

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

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

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

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

ts/background.ts で現在の console.log 行を削除し、「hello」と入力し始めます
Tab で提案を受け入れた後、VS Code がオートコンプリートして正しいインポートを追加する必要があります

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

// 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 はもう少し隠されます。

まだ拡張機能をロードしていない場合は、edge://extensions/ を開いて拡張機能をロードします
リストで拡張機能を見つけます
「ビューの検査」行の「Service Worker」リンクをクリックします。
新しい開発ツールウィンドウが開き、そこに Service Worker からのログが表示されます
- ログが表示されない場合は、[ビューの検査] の下にある [再読み込み] をクリックしてください

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

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

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

するだけです。

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

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

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

まとめ

Chrome extension - environment setup

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

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

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

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

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Big O Notation を使用した JavaScript の配列とオブジェクトのパフォーマンスの詳細次の記事：Big O Notation を使用した JavaScript の配列とオブジェクトのパフォーマンスの詳細

続きを見る