에지 확장 프로그램은 에지브라우저에 프로그램을 추가하여 브라우저 기능을 확장하는 프로그램입니다.
chatGPT는 많이들 알고 계시는 대화형 인공지능 프로그램입니다.
이 글들의 목표는 에지브라우저 확장을 통해 작은 창을 띄우고 확장창에 고정 주제를 적어두고 이 메시지를 대화창에 전송하는것입니다.
만들어보게 된 이유는 chatGPT를 사용하던 중 고정 주제에 대해서 이야기 하는 경우 맥락이 안맞는 대답을 하는것 같아서 주제 고정을 위해서 간단한 확장프로그램을 만들어 보기로 했습니다.
보통 크롬확장이 많이 있지만 현재 사용환경이 에지여서 에지 확장프로그램을 만들어 보기로했습니다. 크롬 확장과도 큰차이가 없는 것으로 알고 있습니다.
Create an extension tutorial, part 1 - Microsoft Edge Development | Microsoft Learn 에 있는 확장 설정 까지 진행해보겠습니다.
설명하는 코드는 tistory_openapi/edgeGpt1 at master · a3040/tistory_openapi (github.com) 참조하시면 됩니다.
manifest.json, popup.html 두개의 파일과 에지 브라우저에 추가하는 부분까지 설명해보도록하겠습니다.
개발 환경은 vistual studio code, 에지브라우저이고, 언어는 javascript, html입니다.
에지확장프로그램의 구성
- Manifest 파일:
에지 확장 프로그램의 설정과 정보를 담는 JSON 형식의 파일입니다.
프로그램 이름, 버전, 아이콘, 권한 등의 정보를 정의합니다.
- Background Script (백그라운드 스크립트):
에지 확장 프로그램의 백그라운드에서 실행되는 JavaScript 코드입니다.
백그라운드에서 실행되는 주기적인 작업, 이벤트 처리 등을 담당합니다.
- Content Script (콘텐트 스크립트):
웹 페이지의 콘텐츠와 상호작용하기 위해 삽입되는 JavaScript 코드입니다.
웹 페이지의 DOM 요소에 접근하고 조작할 수 있습니다.
- Popup (팝업):
사용자 인터페이스를 제공하는 팝업 창입니다.
사용자의 입력을 받고 처리하는 등의 작업을 수행합니다.
이 설정 중 팝업 창과 Manifest 을 예제에서 사용했습니다.
manifest.json
{
"name": "Hello",
"version": "0.0.1",
"manifest_version": 3,
"description": "Hello",
"action": {
"default_popup": "popup.html"
}
}설정파일중 version :3, action은 popup.html 파일을 신경 써주시면 됩니다. 설정파일에 의해 확장프로그램 버튼이 클릭되면 popup.html파일이 사용자와 대화하기 위해 나타납니다. 위쪽 맨처음 이미지 참고
popup.html
<html>
hello
<br /><br /><br /><br /><br /><br />
</html>만들어진 두개의 파일을 에지브라우저의 확장프로그램으로 등록하는 방법입니다.
확장관리 > 개발자모드를 설정하시고 > 압축 풀린 파일 로드 > 방금만든 확장프로그램 폴더 선택 을 합니다.
정상적으로 로드 되면 확장관리 에 만든 확장 프로그램이 나타나게 됩니다
에지브라우저에 방금 만든 확장프로그램 아이콘이 보이지 않는 경우 .확장에서 1번 눈모양을 클릭해줍니다. 그렇게 하면 맨 처음 이미지처럼 만든 확장프로그램 아이콘이 보이게 됩니다. 이후 우리가 만든 확장아이콘을 클릭하면 작성했던 popup.html이 실행되며 hello라고 출력된 작은 인터페이스 화면이 브라우저에 나타나게 됩니다.
'사용해보기 > 브라우저에서 chatGPT Custom 대화창만들기' 카테고리의 다른 글
| 4. 에지브라우저, chatGPT Custom 대화창 추가 (0) | 2023.05.24 |
|---|---|
| 3. 에지확장프로그램에서 chatGpt와 기본 통신 (0) | 2023.05.23 |
| 2.에지확장프로그램 구조 및 디버그 로그 보기 (0) | 2023.05.23 |