Angular 2とTypeScriptを使用して独自のChrome拡張機能を構築する

このチュートリアルでは、新しいタブページ内でブックマークを直接管理するために、Angular 2とTypeScriptを使用してChrome拡張機能を構築することを示しています。 デフォルトの新しいタブエクスペリエンスの機能と視覚的魅力の両方を強化します。

主要な機能：

は、構造化された保守可能なコードベースのAngular 2とTypeScriptをレバレッジします。

ブックマークを新しいタブページに直接統合し、カスタマイズされたユーザーエクスペリエンスを提供します。
• テキストエディター、NPM、およびGoogle開発者アカウントを使用して合理化された開発環境を提供します（公開用）。
Angular 2のコンポーネントベースのアーキテクチャを採用して、シンプルなブックマークコンポーネントから始めて、複数のブックマークを管理するためのリストコンポーネントに拡張します。
• Angular Servicesとローカルストレージを利用して、アプリケーションの状態を管理し、セッション全体で[ブックマークデータを保持します。
現在のページをブックマークに追加するブラウザアクションアイコンを含めます。
• デフォルトの新しいタブページをカスタムブックマークマネージャーに置き換えます。
クロムウェブストアの配布のテスト、パッケージング、および準備をカバーし、
• 。
• プロジェクトの構造とセットアップ：
• このプロジェクトは、ディレクトリを作成し、必須ファイルを使用することで開始されます：
（typeScriptコンパイラ構成）、
• （npm依存関係とスクリプト）、およびmanifest.json（Chrome Extension Metadata）。
ファイルには、コンピレーションおよび開発サーバーのセットアップ用のAngular 2依存関係とNPMスクリプトが含まれています。 初期

ファイルには、基本的な拡張情報が含まれています

チュートリアルでは、角度コンポーネントの作成をガイドします：

（個々のブックマーク用）およびtsconfig.json（ブックマークリストの管理用）。 これらのコンポーネントは、apackage.jsonと相互作用して、ローカルストレージを使用してデータの持続性を処理します。 manifest.jsonには、個々のブックマークをレンダリングし、編集と削除を可能にするためのhtmlテンプレート（package.json）が含まれています。 manifest.jsonは、テンプレート（

）を使用してブックマークリストを表示し、

を使用してブックマークを反復します。 デフォルトのブックマークデータは、。

で提供されます

bookmark.component.tslist.component.ts list.service.ts bookmark.componentbookmark.html list.componentlist.htmlChrome Extension Integration：*ngForlist.data.constant.ts

チュートリアルでは、Chrome Extension機能を追加する方法について説明しています

• ブラウザアクションアイコン：アイコンがChromeツールバーに追加され、ユーザーが現在表示されているWebページをブックマークとして追加できるようにします。 この機能は、ChromeAPIおよびanbrowserActionスクリプトを使用して実装されています。 eventPage.ts
新しいタブのオーバーライド：
• デフォルトの新しいタブページは、Angularで構築されたカスタムブックマークマネージャーに置き換えられます。これは、プロパティを使用してファイル内で構成されています。 manifest.json "chrome_url_overrides" ファイルは、アイコン、ブラウザのアクションの詳細、コンテンツセキュリティポリシー、アクセスタブにアクセスするためのアクセス用）、および新しいタブページのオーバーライドを含むように更新されています。

テストと配布：

manifest.json

このチュートリアルは、

の「ロード解除された拡張機能」機能を使用して、Chrome内の拡張機能をテストする手順で終了します。 また、必要なライブラリをコピーし、Chrome Web Storeを介して配布用のプロジェクトをファイルに圧縮するためのNPMスクリプトを提供します。

さらなる機能強化：

chrome://extensions/ .zipチュートリアルでは、機能（たとえば、配色、ブックマークのインポート）、UX強化、ユニットとエンドツーエンドのテスト、より堅牢なビルドプロセス、Chrome Webストアへの公開など、改善のためのいくつかの領域を提案しています。 また、さらに学習するための関連リソースへのリンクを提供します。 包括的なFAQセクションは、Angular 2を使用したChrome拡張機能の構築に関連する一般的な質問に対処します。

以上がAngular 2とTypeScriptを使用して独自のChrome拡張機能を構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。