크롬 확장 프로그램 만들기
서론
현재 수강 중인 기계 학습 심화 수업에서 프로젝트를 진행 중인데, 우리 팀의 주제는 문자 captcha solver 만들기다,,, 나는 그 중 captcha solver 모델을 주입한 크롬 확장 프로그램 만들기를 맡았다,,,,, 확장 프로그램 개발에 관심 있었지만, 한 번도 해본 적 없었어서 바로 내가 하겠다고 했다! 어차피 확장 프로그램 개발 경험이 있는 사람이 없어서 누군가 나서야 하는 상황이었다
오늘은 그 과정을 정리해보겠다. 크롬 확장 프로그램 만드는 게 처음이라 살짝 쫄았는데 그냥 웹 페이지 만드는 작업이랑 거의 똑같다. 어렵지 않다. 다만, ai 모델을 주입하는 게 살짝 어려울 것 같지만 이는 내일 마무리 작업할 것 같다!
본론
가장 먼저 내가 작업중인 리포지토리다!
Chrome-Extension
Captcha-Recognition-Team • Updated May 23, 2023
1. 정의
확장 프로그램을 개발할 때 보통은 프론트 로직으로만 구현하기도 하고, db 저장이 필요하거나 하면 백엔드쪽도 붙는 거 같다. 웹 개발을 해본 사람들이라면 분명 쉽게 적응할 수 있다. 도전해보자!
2. 과정
- manifest.json ← 확장 프로그램 만드는 데 꼭 필요한 녀석이다. 이 녀석을 통해 만든 웹페이지를 확장 프로그램 형식으로 올릴 수 있다.
- popup.html
- popup.js
- 따로 만드는 이유 : 크롬확장프로그램은 보안상 html에 inline방식으로 js 코드를 넣을 수 없다!! 실제로 inline으로 js코드를 넣어보면 동작하지 않는 걸 확인할 수 있다. 하지만, 이렇게 js 파일을 분리해 넣어주면 넣어진다!
- 아래 코드는 나는 캡처 기능을 만들어 보고 싶어 넣은 코드인데, 간단한 확장 프로그램 만들기 테스트만 해보고 싶은 사람은 그냥 popup.js 파일 자체를 만들지 말자!
- background.js
- 이 부분도 나는 추가적인 작업을 위해 만들어둔 것인데, 간단한 테스트만 원하는 사람은 만들지 말자!
3. 실행
결론적으로 manifest.json과 popup.html 만 있으면 사실상 확장프로그램 하나 뚝딱 만들 수 있다. 물론 세부 기능은 부족하겠지만,, 실행하는 법은 매우매우 간단하다!
크롬 오른쪽 상단에 퍼즐모양을 누르면 확장프로그램 팝업이 뜨는데 거기서 가장 하단을 보면
확장 프로그램 관리라는 페이지로 들어갈 수 있다. 해당 페이지에서
압축 해제된 확장프로그램을 로드합니다 를 클릭하고 html, js 파일들이 들어있는 폴더 자체를 선택해 로드해주면 끝이다! 다시 퍼즐모양을 누르면 확장프로그램 팝업 속에 내가 만든 확장프로그램이 올라와있다! 이를 클릭해서 만든 걸 확인하면 끝이다.
만일 코드를 수정하고 새 버전을 다시 확인하고 싶다면
확장 프로그램 관리 페이지에 다시 들어가보면 내가 올려둔 확장프로그램이 목록에 있을텐데 그 프로그램의 새로 고침 버튼을 눌러주면 끝이다!결론
오늘은 단순히 팝업창을 띄우는 것만 했지만, 내일은 팝업창을 띄우고 기존 탭 페이지에 조작을 가해보겠다. 이도 크게 어렵지 않다.
