AI/ML API, Deepgram Aura 및 IndexedDB 통합을 사용하여 처음부터 Chrome 확장 프로그램 구축

소개

AI 기술을 활용하는 Chrome 확장 프로그램을 구축하면 강력한 기능을 브라우저에 직접 추가하여 사용자 경험을 크게 향상할 수 있습니다.

이 튜토리얼에서는 설정부터 배포까지 AI/ML API, Deepgram Aura 및 IndexDB를 사용하여 Chrome 확장 프로그램을 처음부터 구축하는 전체 프로세스를 다룹니다. 필요한 도구 설치 및 프로젝트 구성을 포함하여 개발 환경을 설정하는 것부터 시작하겠습니다. 그런 다음 Chrome 확장 프로그램의 핵심 구성 요소에 대해 자세히 살펴보겠습니다. 매니페스트.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 확장 프로그램은 Google Chrome 웹 브라우저의 기능을 수정하거나 향상시키는 작은 소프트웨어 프로그램입니다. 이러한 확장 프로그램은 HTML, CSS 및 JavaScript와 같은 웹 기술을 사용하여 구축되었으며 단일 목적을 제공하도록 설계되어 이해하고 사용하기 쉽습니다.

Chrome 웹 스토어를 찾아보세요. https://chromewebstore.google.com/

딥그램 아우라

Deepgram Aura는 실시간 대화형 AI 에이전트 및 애플리케이션을 위해 설계된 최초의 텍스트 음성 변환(TTS) AI 모델입니다. 비교할 수 없는 속도와 효율성으로 인간과 같은 음성 품질을 제공하여 응답성이 뛰어나고 처리량이 높은 음성 AI 경험을 구축하는 데 획기적인 변화를 가져옵니다.

기술 세부정보에 대해 자세히 알아보세요. https://aimlapi.com/models/aura

인덱스DB

IndexedDB는 파일/BLOB을 포함하여 상당한 양의 구조화된 데이터를 클라이언트 측에 저장하기 위한 하위 수준 API입니다. IndexedDB는 자바스크립트 기반의 객체지향 데이터베이스입니다.

주요 개념과 사용법에 대해 자세히 알아보세요. https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

Chrome 확장 프로그램 시작하기

Chrome 확장 프로그램을 구축하려면 확장 프로그램의 구조, 권한, 웹페이지와 상호작용하는 방식을 이해해야 합니다. 개발 환경을 설정하고 확장 프로그램에 필요한 기본 파일을 생성하는 것부터 시작하겠습니다.

개발 환경 설정

코딩을 시작하기 전에 다음 사항을 확인하세요.

• 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: 웹페이지에 삽입할 스크립트와 스타일을 정의합니다.
• 아이콘: 다양한 크기의 확장 프로그램 아이콘을 제공합니다.

핵심 필드 설명

• manifest_version: 최신 Chrome 확장 기능을 사용하려면 3으로 설정하세요.
• 이름: 기능을 반영하여 확장 프로그램의 이름을 "소리내어 읽기"로 지정하겠습니다.
• 버전: "1.0"으로 시작하는 것은 최초 릴리스를 나타냅니다.
• 설명: "모든 탭의 내용을 소리내어 읽기"는 사용자에게 확장 프로그램의 목적을 알려줍니다.
• host_permissions: 와일드카드 *://*.aimlapi.com/*를 사용하면 확장 프로그램이 API 호출에 필요한 aimlapi.com의 모든 하위 도메인과 통신할 수 있습니다.
• 권한: "activeTab"을 사용하면 확장 프로그램이 현재 탭의 콘텐츠와 상호 작용할 수 있습니다.
• content_scripts: scripts.js 및 styles.css가 모든 웹페이지("")에 삽입되도록 지정합니다.
• icons: 확장 프로그램에 대한 아이콘 파일을 참조합니다(아이콘 디렉토리에 적절한 아이콘 파일이 있는지 확인하세요).

아이콘 생성 중

브라우저를 열고 chatgpt.com으로 이동하세요. 이제 Chrome 확장 프로그램에 대한 아이콘을 생성해 보겠습니다. 다양한 크기에 대해 하나의 아이콘을 사용하겠습니다(완전히 괜찮습니다).

다음 프롬프트를 입력하세요:

'소리내어 읽기' Chrome 확장 프로그램에 대한 흑백 아이콘을 생성합니다. 이 확장 프로그램을 사용하면 사용자는 웹사이트의 특정 텍스트를 강조 표시하고 들을 수 있습니다. AI 기반 Chrome 확장 프로그램입니다. 배경은 흰색이고 단색이어야 합니다.

ChatGPT가 아이콘(이미지)을 생성할 때까지 몇 초 정도 기다립니다. 다운로드를 클릭하고 이름을 icon.png로 바꿉니다. 그런 다음 아이콘 폴더 안에 넣으세요.

매니페스트.json 마무리 중

모든 필드가 올바르게 정의되면 매니페스트.json을 통해 브라우저가 확장 프로그램을 이해하고 올바르게 로드할 수 있습니다.

---

scripts.js 개발

scripts.js 파일에는 확장 프로그램의 작동 방식을 제어하는 ​​논리가 포함되어 있습니다. 스크립트를 구현해야 하는 주요 기능에 대해 간략하게 설명하겠습니다.

변수 및 초기화

필요한 변수를 설정하는 것부터 시작하세요.

• API 키: 요청을 인증하려면 AI/ML API 플랫폼의 API 키가 필요합니다.
• 오버레이 요소: 오버레이 및 "소리내어 읽기" 버튼을 위한 DOM 요소를 생성합니다.
• 선택 변수: 사용자가 선택한 텍스트와 위치에 대한 정보를 저장합니다.

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

텍스트 선택 처리

확장 프로그램은 사용자가 웹페이지에서 텍스트를 선택할 때를 감지해야 합니다.

• 이벤트 리스너: 문서에 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 요청: 텍스트 음성 변환을 위해 선택한 텍스트와 함께 AI/ML API에 POST 요청을 보냅니다.

// 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 사용

오디오 파일을 효율적으로 관리하려면:

• 데이터베이스 열기: 오디오 블롭을 저장할 IndexedDB 데이터베이스를 생성하거나 엽니다.

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

• 오디오 저장: 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에서 오디오 블롭을 가져옵니다.

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 함수 구현

IndexedDB는 파일 및 Blob을 포함한 대량의 데이터를 저장할 수 있는 강력한 클라이언트측 저장소 시스템입니다.

구현 기능

IndexedDB와 상호 작용하려면 다음 네 가지 기본 함수를 만들어야 합니다.

• openDatabase(): 데이터베이스에 대한 연결을 열고 개체 저장소가 없으면 개체 저장소를 만듭니다.

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

• saveAudioToIndexedDB(): 고유 ID로 오디오 blob을 저장합니다.

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(): 재생 후 오디오 블롭을 삭제합니다.

// 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"라는 개체 저장소를 사용하겠습니다.
• 오류 처리: 예기치 않은 동작을 방지하려면 항상 데이터베이스 작업 오류를 처리하세요.

---

styles.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 폴더를 선택하세요. (p.s. 제 경우는 aimlapi-tutorial-one 입니다.)

• 설치 확인: 이제 확장 프로그램이 이름 및 아이콘과 함께 목록에 표시됩니다.

테스트 기능

• 웹페이지로 이동: 기사나 블로그 게시물과 같은 텍스트 콘텐츠가 포함된 웹페이지를 엽니다.
• 텍스트 선택: 단락이나 문장을 강조표시합니다.
• 오버레이 상호작용: '로드 중…' 오버레이가 선택한 텍스트 위에 나타나야 합니다. 텍스트 음성 변환 프로세스를 시작하는 동안 몇 초 정도 기다리십시오.
• 듣기: 짧은 처리 기간이 지나면 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에 확장 프로그램을 배포하고 라이브 웹 페이지에서 해당 기능을 검증했습니다.
• 논의된 모범 사례: 확장 프로그램 개발 시 보안, 사용자 경험 및 오류 처리의 중요성을 강조했습니다.

---

다음 단계

튼튼한 기초를 바탕으로 확장을 더욱 강화할 수 있습니다.

• 사용자 정의 옵션 추가: 사용자가 다양한 음성이나 언어를 선택할 수 있습니다.
• 오류 처리 개선: API를 사용할 수 없는 경우 사용자에게 친숙한 메시지와 대체 옵션을 제공하세요.
• 성능 최적화: 캐싱 전략을 구현하거나 API 요청을 최적화하여 지연 시간을 줄입니다.
• 확장 프로그램 게시: Chrome 웹 스토어에 게시하여 다른 사람들과 창작물을 공유하세요.

---

결론

고급 AI 기능을 통합하는 Chrome 확장 프로그램을 구축한 것을 축하합니다! 이 프로젝트는 웹 기술과 강력한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!