[chrome-extension] 크롬 확장프로그램에 Prompt API 활용하기 (1)

공부/extension

버번통 2025. 1. 2. 00:15

24년도 SSAFY 수료하고 나서 온전히 만들어보고 싶은 것을 만들어보자고 생각했었고, 크롬 익스텐션 개발이 첫 프로젝트가 될 것 같다.

내가 구상하고 있었던 건 예전부터 머릿 속으로는 생각했던 네이버 블로그로 맛집 검색 시 광고나 후원 받은 글이라면 광고글인지 알려주는 익스텐션인데..

그래도 24년도 12월 1일 이전 글들에서는 써먹을 수 있으니까..! 그래도 만들어보려고 함.

일단 구상하는 방식은 아래와 같음.

1. 해당 사이트가 네이버 블로그(https://blog.naver.com/*)인지 확인

- chrome의 재미나이 AI를 활용하는 거라 엄한데 토큰을 쓰는걸 방지

2. 해당 사이트 내 이미지 및 태그를 정리

- 굳이 판별할 필요 없는 부분은 제외하는 게 중요할 것 같다.

3. 프롬프트 API를 통해 광고여부 판별

4. 광고로 판별 시 기존 아이콘을 광고 찾음 아이콘으로 변경시키기

- 다른 사이트로 이동 시 다시 아이콘 변경

이 될 것 같음.

프롬프트 API가 어디까지 될지 모르니 일단 만들어보면서 가다듬어야 할 듯

Chrome 확장 프로그램의 Prompt API | AI on Chrome | Chrome for Developers

Chrome 확장 프로그램에서 Prompt API의 무한한 가능성을 살펴보세요.

developer.chrome.com

이걸 보고 일단 크롬 확장 프로그램에서 프롬프트 API를 활용해볼 예정이다.

그런데 아무런 생각 없이 저기 Prompt API 오리진 트라이얼로 들어가게 되면

이런 404 에러를 확인할 수 있다.

처음엔 구글 일 안하네 생각했는데, 나중에 생각해보니 ko 패러미터의 문제가 아닐까 싶은 생각이 들어서

이런 식으로 원하는 페이지로 이동이 됬다. 역시 언제나 문제는 한글 ㅎ..

여기서 REGISTER로 넘어가면 아래 페이지가 나옴

나머지는 적당히 원하는 대로 체크하면 되는데 여기서 Web Origin이 의문일 사람들이 있을 것인데, 아래와 같은 걸 의미함

근데 사실 나는 이번이 처음으로 크롬 익스텐션을 만드는 거여서 이 의미를 몰랐는데

요래 확장 프로그램 관리 쪽에서 있는 ID 값을 의미한다.

확장 프로그램 ID는 내가 만들고자 하는 확장 프로그램을 로드하면 나오는데 이 값은 동적이다.

manifest에 key를 넣어 ID를 고정할 수 있다고 하는데, 찾아보니 웹 스토어 Developer에 등록(5$)을 해야되서 일단 패스.

하여튼 manifest.json이 있는 폴더로 확장 프로그램을 로드해서 나온 ID 값을 넣어 신청하면 요래 토큰이 발급된다.

이제 시작할 준비는 완료된거라 보면 된다.

음.. 그렇다고 한다.

chrome://flags/#optimization-guide-on-device-model 에 들어가서 말하는대로 변경하고 크롬 다시 실행!

음 이제 사용하면 된단다.

그래서 코드를 어디다 쓰는건지 안쓰여있어서 background.js에다가 쓰는건가 하고서 낑낑 댔었음..

그런데 계속 오류가 떠서 그냥 예시 소스 코드를 통해 확인함(진작 이럴껄..)

사실 이 이후로는 이 소스코드에서 README에서 말하는대로 예시 manifest.json에서 토큰을 자신의 것으로 바꾸고 key를 지우면 아래와 같이 잘 작동한다.

예시코드가 아니라 내가 하는건 (2)에서 올릴 예정.
익스텐션이라 생각치 못한 부분인 bundler로 최적화 및 폴더 구조 나누는 게 생각치도 못한 부분을 예시 소스코드에서 알게되어 그거까지 다 적용해볼듯