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 機能を製品に統合したいと考えている開発者や SaaS 起業家のための、革新的なプラットフォームです。 AI/ML API は、NLP からコンピューター ビジョンまであらゆるものをカバーする、200 を超える最先端の AI モデルへの単一アクセス ポイントを提供します。
開発者向けの主な機能:
AI/ML API ドキュメントを詳しく解説します。 https://docs.aimlapi.com/
Chrome 拡張機能は、Google Chrome Web ブラウザの機能を変更または強化する小さなソフトウェア プログラムです。これらの拡張機能は、HTML、CSS、JavaScript などの Web テクノロジーを使用して構築されており、単一の目的を果たすように設計されているため、理解しやすく、使いやすくなっています。
Chrome ウェブストアを参照; https://chromewebstore.google.com/
Deepgram Aura は、リアルタイムの会話型 AI エージェントおよびアプリケーション向けに設計された初のテキスト読み上げ (TTS) AI モデルです。人間のような音声品質を比類のない速度と効率で実現し、応答性の高い高スループットの音声 AI エクスペリエンスを構築するための革新的な製品となります。
技術的な詳細についてはこちらをご覧ください。 https://aimlapi.com/models/aura
IndexedDB は、ファイル/BLOB を含む大量の構造化データをクライアント側で保存するための低レベル API です。 IndexedDB は、JavaScript ベースのオブジェクト指向データベースです。
主要な概念と使用法について詳しく学びます。 https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
Chrome 拡張機能を構築するには、その構造、権限、Web ページとのやり取り方法を理解する必要があります。まず、開発環境をセットアップし、拡張機能に必要な基本ファイルを作成します。
コーディングを始める前に、以下のものがあることを確認してください:
最小限の Chrome 拡張機能には少なくとも 3 つのファイルが必要です:
プロジェクト用のディレクトリを作成し、これらのファイルを設定しましょう。
ステップ 1: 新しいディレクトリを作成する
ターミナルを開き、次のコマンドを実行して拡張機能用の新しいフォルダーを作成します:
mkdir my-first-chrome-extension cd my-first-chrome-extension
ステップ 2: 必須ファイルを作成する
新しいディレクトリ内に必要なファイルを作成します:
touch manifest.json touch scripts.js touch styles.css
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"
}
}
manifest.json には少なくとも以下を含める必要があります:
必須フィールド以外に、以下を追加します。
ブラウザを開いて、chatgpt.com にアクセスします。次に、Chrome 拡張機能のアイコンを生成しましょう。異なるサイズに 1 つのアイコンを使用します (まったく問題ありません)。
次のプロンプトを入力します:
「Read Aloud」Chrome 拡張機能の白黒アイコンを生成します。この拡張機能を使用すると、ユーザーは Web サイト内の特定のテキストをハイライトして聞くことができます。 AI を活用した Chrome 拡張機能です。背景は白と無地である必要があります。
ChatGPT がアイコン (画像) を生成するまで数秒待ちます。 「ダウンロード」をクリックし、名前を icon.png に変更します。次に、アイコンフォルダーの中に入れます。
すべてのフィールドが適切に定義されていると、manifest.json によってブラウザが拡張機能を理解し、正しく読み込めるようになります。
scripts.js ファイルには、拡張機能の動作を制御するロジックが含まれています。スクリプトに実装する必要がある主要な機能の概要を説明します。
必要な変数を設定することから始めます:
mkdir my-first-chrome-extension cd my-first-chrome-extension
拡張機能は、ユーザーが Web ページ上でテキストを選択したときを検出する必要があります:
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
}
ユーザーが「読み上げ」ボタンをクリックすると:
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();
}
}
// 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
}
オーディオ ファイルを効率的に管理するには:
// Disable the button askButton.disabled = true; askButton.innerText = 'Loading...';
// 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
})
});
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.');
}
// 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 は、ファイルや BLOB などの大量のデータを保存できる強力なクライアント側ストレージ システムです。
IndexedDB と対話するには、次の 4 つの主要な関数を作成する必要があります。
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
}
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();
}
}
AI/ML API および Deepgram Aura モデルと対話するには、API キーが必要です。
mkdir my-first-chrome-extension cd my-first-chrome-extension
次に API キーを入力します:
touch manifest.json touch scripts.js touch styles.css
しかし、すぐにはうまくいきません。 Chrome 拡張機能で .env を使用するには、他の追加の設定が必要です。これについては今後のチュートリアルで説明します。
{
"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 ブラウザにロードして実際の動作を確認します。
開発者モードを有効にする: 右上隅にある「開発者モード」スイッチを切り替えます。
このチュートリアルでは次のことを行いました:
しっかりした基礎があれば、拡張機能をさらに強化できます:
高度な 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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
