ChatGPT Chrome Extension 뉴스 요약기 5분 만에 만들기

byVibe on • • 2 min read
0

ChatGPT Chrome Extension 뉴스 요약기 5분 만에 만들기

ChatGPT Chrome Extension 뉴스 요약기 5분 만에 만들기

매일 읽는 외신 뉴스, 클릭 한 번으로 요약하고 싶다면

오늘 만들 것
매일 읽는 외신 뉴스, 클릭 한 번으로 요약하고 싶다면

매일 아침 외신 뉴스를 훑어보는데, 텍스트가 너무 길어서 읽기 지루할 때가 많더라구요. 매번 긁어서 번역기에 넣는 과정도 번거로운 일입니다. 그래서 브라우저에서 버튼만 누르면 지금 보고 있는 뉴스 본문을 3줄로 요약해주는 크롬 익스텐션을 직접 제작해봤거든요. 지난번 200편에서는 Notion API와 카드뉴스 파이프라인을 엮어봤는데, 이번에는 브라우저 내부에서 바로 돌아가는 진짜 '내 도구'를 만드는 과정입니다. 완성하고 나면 주소창 옆의 아이콘을 클릭해서 '요약하기' 버튼을 누르는 것만으로 요약본이 보이죠.

준비물은 간단하게 ChatGPT 하나만 있으면 됩니다

이번 작업에는 ChatGPT 하나만 있으면 충분하구요. Claude나 다른 도구를 섞어 쓸 필요 없이, ChatGPT가 짜주는 코드만 복사해서 붙여넣으면 끝납니다. OpenAI API Key만 미리 준비해주시면 바로 작동하는 익스텐션을 완성할 수 있죠.

5분 만에 뚝딱 크롬 익스텐션 조립하기

1
익스텐션의 뼈대와 화면 만들기

먼저 바탕화면에 news-summarizer라는 폴더를 새로 하나 만들구요. 그 폴더 안에 크롬 익스텐션의 설정 파일인 manifest.json과 화면을 보여줄 popup.html을 생성해야 합니다. 이 두 파일만 있으면 크롬 브라우저가 이 폴더를 하나의 앱으로 인식하기 시작하거든요. 그 다음 ChatGPT에게 아래와 같이 첫 프롬프트를 보내는 거죠.

AI에게 보낸 프롬프트
크롬 익스텐션을 만드려고 해. manifest version 3 기준으로 작성해줘. 현재 활성화된 탭의 본문을 긁어올 수 있는 권한(activeTab, scripting)이 필요해. 화면은 popup.html 파일 하나를 쓰고, 가로 300px, 세로 400px 크기의 심플한 다크 모드 디자인으로 만들어줘. 요약하기 버튼과 결과를 보여줄 영역이 있어야 해.

이 프롬프트는 익스텐션이 브라우저에서 어떤 권한을 쓸지 정의하고 기본 디자인을 잡기 위해 던진 것입니다. 그러면 ChatGPT가 manifest.json과 popup.html 코드를 즉시 제공해줄 거구요. 우선 manifest.json 파일에는 아래와 같은 형식으로 권한이 들어갔는지 눈으로 확인해봅니다. 브라우저 탭의 글씨를 긁어오기 위해서는 activeTab과 scripting 권한이 반드시 포함되어 있어야 작동하거든요. 이제 popup.html에는 깔끔한 다크 모드 스타일로 요약하기 버튼과 텍스트 영역을 만들어둡니다.

2
API로 뉴스 요약하는 로직 추가하기

이제 익스텐션의 핵심인 동작 코드 popup.js를 만들 차례입니다. 현재 탭의 글자를 전부 긁어와서 OpenAI API로 보내고 요약 결과를 받아오는 역할을 하거든요. 텍스트를 통째로 보내서 요약문을 화면에 바로 뿌려주는 로직을 작성해야 합니다. ChatGPT에게 이어서 지시를 내려보죠.

AI에게 보낸 프롬프트
popup.js 코드를 짜줘. popup.html의 요약 버튼을 누르면 chrome.scripting.executeScript를 사용해서 현재 탭의 document.body.innerText를 가져와야 해. 그 다음 OpenAI API의 chat/completions 엔드포인트에 3줄 요약 프롬프트와 함께 요청을 보내줘. API 키는 코드 상단에 변수로 넣어두고 쓸 수 있게 해줘.
⚠이 동작 코드를 구현할 때 API 요청 부분이 흔들리기 쉬우니 주의해야 하구요. API 주소가 바뀌거나 통신 에러가 나면 화면이 굳어버릴 수 있습니다. ChatGPT가 완성해 준 코드를 popup.js라는 이름으로 폴더에 담아두시구요. 코드를 열어보면 사용자가 API 키를 넣을 수 있는 const API_KEY = 'YOUR_KEY' 부분이 나타납니다. 여기에 발급받은 실제 OpenAI API Key를 큰따옴표 안에 잘 적어넣는 것이 핵심이구요.
3
크롬 브라우저에 올리고 확인하기

폴더에 파일 3개가 다 준비되었다면 브라우저에 설치할 차례입니다. 복잡한 빌드 과정 없이 마우스 클릭 몇 번이면 크롬에 올릴 수 있거든요. 크롬 브라우저 주소창에 chrome://extensions/를 쳐서 설정 화면으로 진입합니다. 우측 상단의 '개발자 모드' 스위치를 켜면 왼쪽 위에 '압축해제된 확장 프로그램을 로드합니다'라는 버튼이 보일 거구요. 이 버튼을 누르고 우리가 만든 news-summarizer 폴더를 통째로 선택해주면 즉시 설치가 완료되죠. 설치된 직후에는 주소창 옆에 우리가 등록한 익스텐션 아이콘이 나타납니다. 아무 뉴스 사이트에 들어가서 우측 상단 퍼즐 아이콘을 눌러 방금 추가한 익스텐션을 실행시키는 거죠. 요약 버튼을 눌렀을 때 3초 만에 3줄 요약이 화면에 뜬다면 성공이구요.

여기서 막히면 어떻게 해야 할까요

  • 현상: 요약 버튼을 눌렀는데 아무런 반응이 없고 멈춰 있습니다.
    원인: 브라우저 콘솔에서 에러를 확인해보면 API 키가 누락되었거나 activeTab 권한이 제대로 매핑되지 않았을 확률이 크거든요.
    해결: chrome://extensions/ 화면에서 익스텐션 카드의 '세부정보'를 누른 뒤 '사이트 데이터 읽기 및 변경' 권한이 켜져 있는지 확인하고, popup.js 상단에 API 키가 제대로 큰따옴표 안에 들어갔는지 점검해봅니다.
  • 현상: 요약 결과가 한글이 아닌 영어로 나옵니다.
    원인: ChatGPT가 API로 요청을 보낼 때 프롬프트에 한국어로 요약해달라는 명시적 제약이 누락되었기 때문이구요.
    해결: popup.js의 fetch 요청 본문에 들어가는 system 프롬프트에 "Summarize the text in Korean in 3 bullet points"라는 문구를 명확하게 추가해주는 거죠.
  • 현상: 익스텐션 아이콘을 눌렀는데 popup.html 화면이 깨지거나 버튼이 보이지 않습니다.
    원인: manifest.json에 선언된 default_popup 파일명과 실제 html 파일명이 불일치하거나 css 크기 설정이 브라우저 최소 규격을 벗어났을 수 있거든요.
    해결: manifest.json의 default_popup 설정을 다시 확인하고, popup.html 상단 style 태그 안에 body 크기가 width 300px, height 400px 등으로 확실하게 선언되어 있는지 체크합니다.

다음에 붙여볼 만한 기능과 아이디어

한 걸음 더

이 익스텐션에 요약뿐만 아니라 단어장 기능을 덧붙이면 영어 공부할 때 아주 요긴해지구요. 요약본 아래에 모르는 단어를 더블 클릭하면 자동으로 나만의 단어 대시보드에 저장되도록 빌드해보는 것을 추천합니다. 다음 편에서는 이 익스텐션을 확장해서 나만의 영단어장 저장 봇과 연동해보는 워크플로를 다뤄보죠.

관련 검색어

  • 🔍 ChatGPT 사용법
  • 🔍 ChatGPT 비교
  • 🔍 Chrome Extension 사용법
  • 🔍 Chrome Extension 비교
  • 🔍 뉴스 요약기 사용법
  • 🔍 뉴스 요약기 비교
4.94 / 169 rates

댓글 쓰기

다음 이전