ChatGPT API로 크롬 익스텐션 만드는 방법

새로운 급발진 프로젝트가 생각나서 이번주 안에 완성하려고 급하게 시작한다.

chat gpt api 를 활용해서 크롬 익스텐션을 만들 예정이다. 

크롬 익스텐션을 만드는 순서와 방법에 대해 설명해보도록 하겠다. 

 

크롬 익스텐션 만드는 순서

1. ChatGPT API 계정을 만들고 API key를 발급받기

• ChatGPT API 웹사이트에서 계정을 등록하고 인증 과정을 거쳐야 함

2. 크롬 익스텐션 개발 도구 설치

• 크롬 웹스토어에서 "Chrome Extension Builder"나 "Chrome Extension Developer"와 같은 개발 도구를 설치하기

3. 익스텐션 manifest 파일 생성

• 익스텐션의 구성 정보를 담고 있는 manifest 파일을 생성하기
• 익스텐션의 이름, 버전, 아이콘 등의 정보와 ChatGPT API key 등이 포함됨

4. 익스텐션 구현

• ChatGPT API를 사용하여 익스텐션을 구현
• JavaScript를 사용하여 API 요청을 보내고 결과를 처리하는 함수를 작성해야 함

5. 익스텐션 패키징

• 익스텐션을 패키징하여 크롬 웹스토어에 업로드할 수 있도록 함
• 익스텐션 파일을 압축하여 .crx 파일로 만들어야 함 (manifest 파일과 코드 파일 등)

6. 크롬 웹스토어에 익스텐션 등록

• 크롬 웹스토어의 개발자 센터에 로그인하여 익스텐션을 등록하고 업로드
• 등록 후에는 크롬 웹스토어에서 익스텐션을 검토하고 승인하면 크롬 사용자들이 설치하고 사용할 수 있음

 

API 키 발급받는 방법

https://platform.openai.com/account/api-keys

OpenAI API

 

 

사이트에 들어가면 이렇게 새로운 API key 를 만들 수 있는 창이 뜬다.

버튼을 누르고 API key 발급 후 복사하면 된다. 

 

구글 익스텐션 개발 도구 설치

https://developer.chrome.com/docs/extensions/

Extensions - Chrome Developers

공식 문서다. 

공식 문서를 읽어보자.

파이썬을 쓰려고 했지만 html css js 로 개발이 가능하다. 

 

엄청 자세하게 쉽게 나와았으니까 천천히 읽으면서 따라하면 되겠다. 

 

구글 익스텐션 만드는 방법

1. 개발 환경 설정

구글 익스텐션을 개발하기 위해서는 구글 크롬 브라우저와 텍스트 에디터가 필요하다.

구글 크롬 브라우저는 이미 설치되어 있어야 하며, 텍스트 에디터는 Visual Studio Code, Sublime Text 등을 사용할 수 있다.

2. 익스텐션 기본 구조 생성

구글 익스텐션을 만들기 위해 먼저 익스텐션의 기본 구조를 생성해야 한다.

구글 익스텐션은 manifest.json 파일을 포함한 폴더 구조로 이루어져 있다.

manifest.json 파일은 익스텐션에 대한 정보와 설정을 담고 있다.

3. manifest.json 파일 작성

manifest.json 파일은 익스텐션의 이름, 버전, 아이콘, 권한 등의 정보를 포함한다.

또한 익스텐션에서 사용하는 자바스크립트, HTML 및 CSS 파일들을 지정할 수도 있다.

4. 익스텐션 코드 작성

구글 익스텐션에서 동작하는 코드는 자바스크립트로 작성된다.

익스텐션에서 사용되는 자바스크립트 파일은 manifest.json 파일에서 지정한 파일들을 포함하여 작성된다.

익스텐션에서는 DOM 조작, 이벤트 처리, HTTP 요청 등의 작업을 수행할 수 있다.

5. 익스텐션 테스트 및 배포

익스텐션을 완성하면, 크롬 웹 스토어에 등록하여 배포할 수 있다.

익스텐션을 배포하기 전에 반드시 테스트를 수행하여 오류를 검출하고 수정해야 한다.

 

 

시작 코드

이 코드를 manifest.json 파일에 넣어주면 Hello world 가 출력된다.

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}