AI/ML API、Deepgram Aura、IndexedDB 統合を使用して Chrome 拡張機能をゼロから構築する

導入

AI テクノロジーを活用した Chrome 拡張機能を構築すると、強力な機能をブラウザに直接追加することで、ユーザー エクスペリエンスを大幅に向上させることができます。

このチュートリアルでは、AI/ML API、Deepgram Aura、IndexDB を使用して Chrome 拡張機能を最初から構築する、セットアップからデプロイメントまでのプロセス全体を説明します。まず、必要なツールのインストールやプロジェクトの構成など、開発環境をセットアップします。次に、Chrome 拡張機能のコア コンポーネントについて詳しく説明します。manifest.json には拡張機能に関する基本的なメタデータが含まれ、scripts.js には拡張機能の動作方法が含まれ、styles.css にはスタイルを追加します。 AI/ML API を通じてこれらのテクノロジーを Deepgram Aura と統合し、生成されたオーディオ ファイルの一時ストレージとして IndexDB を使用する方法を検討します。その過程で、Chrome 拡張機能の構築、ユーザー クエリの処理、データベースへのデータの保存に関するベスト プラクティスについて説明します。このチュートリアルを終了するまでに、Chrome 拡張機能を構築するための強固な基礎が得られ、AI を利用した Chrome 拡張機能を構築するための十分な準備が整っていることになります。

これから利用するテクノロジーの概要を見てみましょう。

AI/ML API

AI/ML API は、最先端の AI 機能を製品に統合したいと考えている開発者や SaaS 起業家のための、革新的なプラットフォームです。 AI/ML API は、NLP からコンピューター ビジョンまであらゆるものをカバーする、200 を超える最先端の AI モデルへの単一アクセス ポイントを提供します。

開発者向けの主な機能:

• 広範なモデル ライブラリ: 迅速なプロトタイピングと展開のための 200 の事前トレーニングされたモデル
• カスタマイズ オプション: 特定のユースケースに合わせてモデルを微調整します
• 開発者に優しい統合: スタックへのシームレスな組み込みのための RESTful API と SDK
• サーバーレス アーキテクチャ: インフラストラクチャ管理ではなく、コーディングに重点を置きます

AI/ML API ドキュメントを詳しく解説します。 https://docs.aimlapi.com/

Chrome拡張機能

Chrome 拡張機能は、Google Chrome Web ブラウザの機能を変更または強化する小さなソフトウェア プログラムです。これらの拡張機能は、HTML、CSS、JavaScript などの Web テクノロジーを使用して構築されており、単一の目的を果たすように設計されているため、理解しやすく、使いやすくなっています。

Chrome ウェブストアを参照; https://chromewebstore.google.com/

ディープグラム・オーラ

Deepgram Aura は、リアルタイムの会話型 AI エージェントおよびアプリケーション向けに設計された初のテキスト読み上げ (TTS) AI モデルです。人間のような音声品質を比類のない速度と効率で実現し、応答性の高い高スループットの音声 AI エクスペリエンスを構築するための革新的な製品となります。

技術的な詳細についてはこちらをご覧ください。 https://aimlapi.com/models/aura

インデックスDB

IndexedDB は、ファイル/BLOB を含む大量の構造化データをクライアント側で保存するための低レベル API です。 IndexedDB は、JavaScript ベースのオブジェクト指向データベースです。

主要な概念と使用法について詳しく学びます。 https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

Chrome 拡張機能を使ってみる

Chrome 拡張機能を構築するには、その構造、権限、Web ページとのやり取り方法を理解する必要があります。まず、開発環境をセットアップし、拡張機能に必要な基本ファイルを作成します。

開発環境のセットアップ

コーディングを始める前に、以下のものがあることを確認してください:

• Chrome ブラウザ: 拡張機能をロードしてテストするブラウザです。
• テキスト エディターまたは IDE: コードの編集には、Visual Studio Code、Sublime Text、Atom などのツールが適しています。このチュートリアルでは Visual Studio Code を使用します。
• HTML、CSS、JavaScript の基本知識: Chrome 拡張機能を構築するには、これらのテクノロジーに精通していることが不可欠です。

プロジェクト構造の作成

最小限の Chrome 拡張機能には少なくとも 3 つのファイルが必要です:

• manifest.json: 拡張機能のメタデータと構成が含まれています。
• scripts.js: 拡張機能の動作を定義する JavaScript コードを保持します。
• styles.css: 拡張機能の UI 要素のスタイルが含まれます。

プロジェクト用のディレクトリを作成し、これらのファイルを設定しましょう。
ステップ 1: 新しいディレクトリを作成する
ターミナルを開き、次のコマンドを実行して拡張機能用の新しいフォルダーを作成します:

mkdir my-first-chrome-extension
cd my-first-chrome-extension

ステップ 2: 必須ファイルを作成する
新しいディレクトリ内に必要なファイルを作成します:

touch manifest.json
touch scripts.js
touch styles.css

マニフェスト.json を理解する

manifest.json ファイルは Chrome 拡張機能の中心です。これは、拡張機能、その機能、必要な権限についてブラウザーに伝えます。このファイルを適切に構成する方法を詳しく見てみましょう。

{
  "manifest_version": 3,
  "name": "Read Aloud",
  "version": "1.0",
  "description": "Read Aloud anything in any tab",
  "host_permissions": [
    "*://*.aimlapi.com/*"
],
  "permissions": [
      "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["scripts.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon.png",
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  }
}

マニフェスト.json の必須フィールド

manifest.json には少なくとも以下を含める必要があります:

• manifest_version: マニフェスト ファイル形式のバージョンを指定します。 Chrome は現在バージョン 3 を使用しています。
• name: ユーザーに表示される拡張機能の名前。
• version: セマンティック バージョニングに従った、拡張機能のバージョン番号。

メタデータと権限の追加

必須フィールド以外に、以下を追加します。

• 説明: 拡張機能の機能の簡単な概要。
• host_permissions: 拡張機能がアクセスできるドメインを指定します。 AI/ML API との統合には、*.aimlapi.com へのアクセスが必要です。
• 権限: アクティブなタブへのアクセスなど、必要な特別な権限を宣言します。
• content_scripts: Web ページに挿入するスクリプトとスタイルを定義します。
• アイコン: さまざまなサイズの拡張機能のアイコンを提供します。

キーフィールドの説明

• manifest_version: 最新の Chrome 拡張機能を使用するには、3 に設定します。
• 名前: 拡張機能の機能を反映して「Read Aloud」という名前を付けます。
• バージョン: 「1.0」で始まるものは、初期リリースを示します。
• 説明: 「任意のタブの内容を読み上げる」は、拡張機能の目的についてユーザーに通知します。
• host_permissions: ワイルドカード *://*.aimlapi.com/* を使用すると、拡張機能は API 呼び出しに必要な aimlapi.com のサブドメインと通信できます。
• 権限: 「activeTab」により、拡張機能が現在のタブのコンテンツと対話できるようになります。
• content_scripts: scripts.js とstyles.css をすべての Web ページ (「」) に挿入する必要があることを指定します。
• icons: 拡張機能のアイコン ファイルを参照します (アイコン ディレクトリに適切なアイコン ファイルがあることを確認してください)。

アイコンを生成中

ブラウザを開いて、chatgpt.com にアクセスします。次に、Chrome 拡張機能のアイコンを生成しましょう。異なるサイズに 1 つのアイコンを使用します (まったく問題ありません)。

次のプロンプトを入力します:

「Read Aloud」Chrome 拡張機能の白黒アイコンを生成します。この拡張機能を使用すると、ユーザーは Web サイト内の特定のテキストをハイライトして聞くことができます。 AI を活用した Chrome 拡張機能です。背景は白と無地である必要があります。

ChatGPT がアイコン (画像) を生成するまで数秒待ちます。 「ダウンロード」をクリックし、名前を icon.png に変更します。次に、アイコンフォルダーの中に入れます。

マニフェスト.json を完成させています

すべてのフィールドが適切に定義されていると、manifest.json によってブラウザが拡張機能を理解し、正しく読み込めるようになります。

---

scripts.jsの開発

scripts.js ファイルには、拡張機能の動作を制御するロジックが含まれています。スクリプトに実装する必要がある主要な機能の概要を説明します。

変数と初期化

必要な変数を設定することから始めます:

• API キー: リクエストを認証するには、AI/ML API プラットフォームからの API キーが必要です。
• オーバーレイ要素: オーバーレイと「読み上げ」ボタン用の DOM 要素を作成します。
• 選択変数: ユーザーが選択したテキストとその位置に関する情報を保存します。

mkdir my-first-chrome-extension
cd my-first-chrome-extension

テキスト選択の処理

拡張機能は、ユーザーが Web ページ上でテキストを選択したときを検出する必要があります:

• イベント リスナー: ユーザーがテキストの選択を終了したときを検出するために、mouseup イベント リスナーをドキュメントにアタッチします。

mkdir my-first-chrome-extension
cd my-first-chrome-extension

• 選択範囲の検出: 選択したテキストが空でないかどうかを確認し、保存します。

touch manifest.json
touch scripts.js
touch styles.css

• オーバーレイの位置: 選択したテキストの近くになるようにオーバーレイを配置する場所を計算します。

{
  "manifest_version": 3,
  "name": "Read Aloud",
  "version": "1.0",
  "description": "Read Aloud anything in any tab",
  "host_permissions": [
    "*://*.aimlapi.com/*"
],
  "permissions": [
      "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["scripts.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon.png",
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  }
}

• オーバーレイ管理: 新しいオーバーレイを追加する前に、既存のオーバーレイがすべて削除されていることを確認してください。

// Set your AIML_API_KEY key
const AIML_API_KEY = ''; // Replace with your AIML_API_KEY key

// Create the overlay
const overlay = document.createElement('div');
overlay.id = 'read-aloud-overlay';

// Create the "Read Aloud" button
const askButton = document.createElement('button');
askButton.id = 'read-aloud-button';
askButton.innerText = 'Read Aloud';

// Append the button to the overlay
overlay.appendChild(askButton);

// Variables to store selected text and range
let selectedText = '';
let selectedRange = null;

完全なコード:

document.addEventListener('mouseup', (event) => {
  console.log('mouseup event: ', event);
  //...code
}

AI/ML API とのやり取り

ユーザーが「読み上げ」ボタンをクリックすると:

• 入力の検証: 選択したテキストが長さの要件を満たしているかどうかを確認します。

const selection = window.getSelection();
const text = selection.toString().trim();
if (text !== '') {
  const range = selection.getRangeAt(0);
  const rect = range.getBoundingClientRect();

• ボタンを無効にする: 処理中にボタンを無効にして、複数のクリックを防止します。

// Set the position of the overlay
overlay.style.top = `${window.scrollY + rect.top - 50}px`; // Adjust as needed
overlay.style.left = `${window.scrollX + rect.left + rect.width / 2 - 70}px`; // Adjust to center the overlay

selectedText = text;
selectedRange = range;

• API リクエスト: テキスト読み上げ変換用に選択したテキストを含む POST リクエストを AI/ML API に送信します。

// Remove existing overlay if any
const existingOverlay = document.getElementById('read-aloud-overlay');
if (existingOverlay) {
  existingOverlay.remove();
}

// Append the overlay to the document body
document.body.appendChild(overlay);
} else {
  // Remove overlay if no text is selected
  const existingOverlay = document.getElementById('read-aloud-overlay');
  if (existingOverlay) {
    existingOverlay.remove();
  }
}

• エラー処理: API リクエスト中に発生したエラーを適切に処理します。

// Function to handle text selection
document.addEventListener('mouseup', (event) => {
  console.log('mouseup event: ', event);
  const selection = window.getSelection();
  const text = selection.toString().trim();
  if (text !== '') {
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();

    // Set the position of the overlay
    overlay.style.top = `${window.scrollY + rect.top - 50}px`; // Adjust as needed
    overlay.style.left = `${window.scrollX + rect.left + rect.width / 2 - 70}px`; // Adjust to center the overlay

    selectedText = text;
    selectedRange = range;

    // Remove existing overlay if any
    const existingOverlay = document.getElementById('read-aloud-overlay');
    if (existingOverlay) {
      existingOverlay.remove();
    }

    // Append the overlay to the document body
    document.body.appendChild(overlay);
  } else {
    // Remove overlay if no text is selected
    const existingOverlay = document.getElementById('read-aloud-overlay');
    if (existingOverlay) {
      existingOverlay.remove();
    }
  }
});

• オーディオ再生: オーディオを受信したら、ユーザーに再生します。

if (selectedText.length > 200) {
// ...code
}

ストレージに IndexedDB を使用する

オーディオ ファイルを効率的に管理するには:

• データベースを開く: オーディオ BLOB を保存するための IndexedDB データベースを作成または開きます。

// Disable the button
askButton.disabled = true;
askButton.innerText = 'Loading...';

• オーディオの保存: オーディオ BLOB を API から受信した後、IndexedDB に保存します。

// Send the selected text to your AI/ML API for TTS
const response = await fetch('https://api.aimlapi.com/tts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${AIML_API_KEY}`, // Replace with your actual API key
  },
  body: JSON.stringify({
    model: '#g1_aura-asteria-en',  // Replace with your specific model if needed
    text: selectedText
  })
});

• オーディオの取得: 再生のために IndexedDB からオーディオ BLOB を取得します。

try {

  // ...code

  if (!response.ok) {
    throw new Error('API request failed');
  }

  // ...code

} catch (error) {
  console.error('Error:', error);
  askButton.disabled = false;
  askButton.innerText = 'Read Aloud';
  alert('An error occurred while fetching the audio.');
}

• オーディオの削除: 再生後にデータベースからオーディオ blob を削除して、スペースを解放します。

// Play the audio
audio.play();

クリーンアップとユーザーエクスペリエンス

• オーバーレイの削除: ユーザーが他の場所をクリックするかテキストの選択を解除した場合、オーバーレイを削除します。

// Open IndexedDB
const db = await openDatabase();
const audioId = 'audio_' + Date.now(); // Generate a unique ID for the audio

• ボタンを再有効化: 処理が完了した後、[読み上げ] ボタンが再度有効になっていることを確認します。
• ユーザー フィードバック: ボタンのテキストを「読み込み中…」に変更するなど、視覚的な合図を提供して、処理が進行中であることをユーザーに知らせます。

完全なコード:

// Save audio blob to IndexedDB
await saveAudioToIndexedDB(db, audioId, audioBlob);

---

IndexedDB 関数の実装

IndexedDB は、ファイルや BLOB などの大量のデータを保存できる強力なクライアント側ストレージ システムです。

実装する機能

IndexedDB と対話するには、次の 4 つの主要な関数を作成する必要があります。

• openDatabase(): データベースへの接続を開き、オブジェクト ストアが存在しない場合は作成します。

mkdir my-first-chrome-extension
cd my-first-chrome-extension

• saveAudioToIndexedDB(): オーディオ BLOB を一意の ID で保存します。

touch manifest.json
touch scripts.js
touch styles.css

• getAudioFromIndexedDB(): ID を使用してオーディオ BLOB を取得します。

{
  "manifest_version": 3,
  "name": "Read Aloud",
  "version": "1.0",
  "description": "Read Aloud anything in any tab",
  "host_permissions": [
    "*://*.aimlapi.com/*"
],
  "permissions": [
      "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["scripts.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon.png",
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  }
}

• deleteAudioFromIndexedDB(): 再生後にオーディオ BLOB を削除します。

// Set your AIML_API_KEY key
const AIML_API_KEY = ''; // Replace with your AIML_API_KEY key

// Create the overlay
const overlay = document.createElement('div');
overlay.id = 'read-aloud-overlay';

// Create the "Read Aloud" button
const askButton = document.createElement('button');
askButton.id = 'read-aloud-button';
askButton.innerText = 'Read Aloud';

// Append the button to the overlay
overlay.appendChild(askButton);

// Variables to store selected text and range
let selectedText = '';
let selectedRange = null;

主要な概念

• トランザクション: IndexedDB とのすべての対話はトランザクション内で発生します。正しいトランザクション モード (読み取り専用または読み取り書き込み) を指定していることを確認してください。
• オブジェクト ストア: SQL データベースのテーブルと同様に、オブジェクト ストアはデータを保持します。 「audios」という名前のオブジェクト ストアを使用します。
• エラー処理: 予期しない動作を防ぐために、データベース操作のエラーを常に処理します。

---

style.css を使用したスタイル設定

シームレスなユーザー エクスペリエンスを提供するには、拡張機能にはクリーンで直感的なインターフェイスが必要です。

オーバーレイとボタンのスタイルを設定する

次のスタイルを定義します:

• オーバーレイの位置: 選択したテキストの近くにオーバーレイを配置する絶対位置。

document.addEventListener('mouseup', (event) => {
  console.log('mouseup event: ', event);
  //...code
}

• ボタンの外観: オーバーレイと一致し、簡単にクリックできるように「読み上げ」ボタンのスタイルを設定します。

const selection = window.getSelection();
const text = selection.toString().trim();
if (text !== '') {
  const range = selection.getRangeAt(0);
  const rect = range.getBoundingClientRect();

• ホバー効果: ボタンのホバー効果でユーザー インタラクションを強化します。

// Set the position of the overlay
overlay.style.top = `${window.scrollY + rect.top - 50}px`; // Adjust as needed
overlay.style.left = `${window.scrollX + rect.left + rect.width / 2 - 70}px`; // Adjust to center the overlay

selectedText = text;
selectedRange = range;

• 無効状態: ボタンが無効になっている状態を視覚的に示します。

// Remove existing overlay if any
const existingOverlay = document.getElementById('read-aloud-overlay');
if (existingOverlay) {
  existingOverlay.remove();
}

// Append the overlay to the document body
document.body.appendChild(overlay);
} else {
  // Remove overlay if no text is selected
  const existingOverlay = document.getElementById('read-aloud-overlay');
  if (existingOverlay) {
    existingOverlay.remove();
  }
}

---

API キーの取得と設定

AI/ML API および Deepgram Aura モデルと対話するには、API キーが必要です。

API キーを取得する手順

• AI/ML API プラットフォームにアクセスします: aimlapi.com に移動します。

• サインイン: [API キーを取得] をクリックし、Google アカウントを使用してサインインします。

• ダッシュボードへのアクセス: サインイン後、ダッシュボードにリダイレクトされます。

• API キーの作成: [キー管理] タブに移動し、[API キーの作成] をクリックします。

• API キーをコピーします: API キーが生成されたら、コピーします。

拡張機能での API キーの設定

• セキュリティに関する注意: 拡張機能を配布する予定がある場合は、スクリプトに API キーをハードコーディングしないでください。環境変数を使用するか、ユーザーに API キーの入力を求めるプロンプトを表示することを検討してください。

mkdir my-first-chrome-extension
cd my-first-chrome-extension

次に API キーを入力します:

touch manifest.json
touch scripts.js
touch styles.css

しかし、すぐにはうまくいきません。 Chrome 拡張機能で .env を使用するには、他の追加の設定が必要です。これについては今後のチュートリアルで説明します。

• テストの場合: scripts.js で、API リクエストの認証を処理する変数に API キーを割り当てます。

{
  "manifest_version": 3,
  "name": "Read Aloud",
  "version": "1.0",
  "description": "Read Aloud anything in any tab",
  "host_permissions": [
    "*://*.aimlapi.com/*"
],
  "permissions": [
      "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["scripts.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon.png",
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  }
}

---

拡張機能の実行とテスト

すべてのコンポーネントを配置したら、拡張機能を Chrome ブラウザにロードして実際の動作を確認します。

拡張機能のロード

• 拡張機能ページを開きます: Chrome で、chrome://extensions/ に移動します。

開発者モードを有効にする: 右上隅にある「開発者モード」スイッチを切り替えます。

• 解凍された拡張機能をロード: [解凍された拡張機能をロード] をクリックし、my-first-chrome-extension フォルダーを選択します。 (追記：私の場合は、ailapi-tutorial-one です)。

• インストールの確認: 拡張機能がその名前とアイコンとともにリストに表示されます。

機能のテスト

• Web ページに移動: 記事やブログ投稿などのテキスト コンテンツを含む Web ページを開きます。
• テキストの選択: 段落または文を強調表示します。
• オーバーレイを操作する: 選択したテキストの上に「読み込み中…」オーバーレイが表示されます。テキスト読み上げプロセスを開始する間、数秒待ちます。
• 聞く: 短い処理期間の後、AI 音声によってテキストが読み上げられるのが聞こえます。

トラブルシューティングのヒント

• オーバーレイが表示されない: content_scripts がmanifest.json で正しく指定されているかどうかを確認してください。
• オーディオ再生なし: API キーが正しく設定されており、API リクエストが成功したことを確認してください。
• コンソール エラー: ブラウザの開発者ツールを使用して、JavaScript エラーやネットワークの問題を検査します。

---

プロジェクトの概要

このチュートリアルでは次のことを行いました:

• 開発環境のセットアップ: Chrome 拡張機能に必要なプロジェクト構造とファイルを作成しました。
• 構成されたmanifest.json: 各フィールドの重要性を理解しながら、必須のメタデータと権限を定義しました。
• 開発された scripts.js: テキスト選択の処理、AI/ML API との対話、オーディオ再生の管理のためのロジックの概要を説明しました。
• IndexedDB 統合の実装: オーディオ ファイルをローカルに保存および取得するために IndexedDB を使用する方法を学習しました。
• styles.css を使用して拡張機能をスタイル設定: CSS を適用してユーザー インターフェイスを強化し、ユーザー エクスペリエンスを向上させました。
• API キーの取得とセットアップ: AI/ML API プラットフォームから API キーを取得し、拡張機能に安全に統合しました。
• 拡張機能のロードとテスト: Chrome に拡張機能をデプロイし、ライブ Web ページでその機能を検証しました。
• ベスト プラクティスについて説明: 拡張機能開発におけるセキュリティ、ユーザー エクスペリエンス、エラー処理の重要性を強調しました。

---

次のステップ

しっかりした基礎があれば、拡張機能をさらに強化できます:

• カスタマイズ オプションの追加: ユーザーが別の音声や言語を選択できるようにします。
• エラー処理の改善: API が使用できない場合に、わかりやすいメッセージとフォールバック オプションを提供します。
• パフォーマンスの最適化: キャッシュ戦略を実装するか、API リクエストを最適化してレイテンシーを削減します。
• 拡張機能を公開する: 作成した拡張機能を Chrome ウェブストアに公開して、他の人と共有します。

---

結論

高度な AI 機能を統合する Chrome 拡張機能の構築、おめでとうございます!このプロジェクトでは、Web テクノロジーと強力な API を組み合わせることで、魅力的でアクセスしやすいユーザー エクスペリエンスをどのように生み出すことができるかを紹介します。これで、この拡張機能を開発および拡張したり、AI/ML API を活用したまったく新しい拡張機能を作成したりするための知識が得られました。

完全な実装は Github で入手可能です。 https://github.com/TechWithAbee/Building-a-Chrome-Extension-from-Scratch-with-AI-ML-API-Deepgram-Aura-and-IndexDB-Integration

---

ご質問がある場合、またはさらにサポートが必要な場合は、お気軽に abdibrokhim@gmail.com まで電子メールでお問い合わせください。

以上がAI/ML API、Deepgram Aura、IndexedDB 統合を使用して Chrome 拡張機能をゼロから構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。