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 기능을 제품에 통합하려는 개발자와 SaaS 기업가를 위한 판도를 바꾸는 플랫폼입니다. AI/ML API는 NLP부터 컴퓨터 비전까지 모든 분야를 포괄하는 200개 이상의 최첨단 AI 모델에 대한 단일 액세스 지점을 제공합니다.
개발자를 위한 주요 기능:
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
IndexedDB는 파일/BLOB을 포함하여 상당한 양의 구조화된 데이터를 클라이언트 측에 저장하기 위한 하위 수준 API입니다. IndexedDB는 자바스크립트 기반의 객체지향 데이터베이스입니다.
주요 개념과 사용법에 대해 자세히 알아보세요. https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
Chrome 확장 프로그램을 구축하려면 확장 프로그램의 구조, 권한, 웹페이지와 상호작용하는 방식을 이해해야 합니다. 개발 환경을 설정하고 확장 프로그램에 필요한 기본 파일을 생성하는 것부터 시작하겠습니다.
코딩을 시작하기 전에 다음 사항을 확인하세요.
최소 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 확장 프로그램에 대한 아이콘을 생성해 보겠습니다. 다양한 크기에 대해 하나의 아이콘을 사용하겠습니다(완전히 괜찮습니다).
다음 프롬프트를 입력하세요:
'소리내어 읽기' Chrome 확장 프로그램에 대한 흑백 아이콘을 생성합니다. 이 확장 프로그램을 사용하면 사용자는 웹사이트의 특정 텍스트를 강조 표시하고 들을 수 있습니다. AI 기반 Chrome 확장 프로그램입니다. 배경은 흰색이고 단색이어야 합니다.
ChatGPT가 아이콘(이미지)을 생성할 때까지 몇 초 정도 기다립니다. 다운로드를 클릭하고 이름을 icon.png로 바꿉니다. 그런 다음 아이콘 폴더 안에 넣으세요.
모든 필드가 올바르게 정의되면 매니페스트.json을 통해 브라우저가 확장 프로그램을 이해하고 올바르게 로드할 수 있습니다.
scripts.js 파일에는 확장 프로그램의 작동 방식을 제어하는 논리가 포함되어 있습니다. 스크립트를 구현해야 하는 주요 기능에 대해 간략하게 설명하겠습니다.
필요한 변수를 설정하는 것부터 시작하세요.
mkdir my-first-chrome-extension cd my-first-chrome-extension
확장 프로그램은 사용자가 웹페이지에서 텍스트를 선택할 때를 감지해야 합니다.
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와 상호 작용하려면 다음 네 가지 기본 함수를 만들어야 합니다.
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 확장 프로그램을 구축한 것을 축하합니다! 이 프로젝트는 웹 기술과 강력한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
