[Web] Chrome extension 개발

크롬 웹 extension으로 서비스를 개발하기 위해 해당 내용을 간략히 정리해보려고 한다. 

Chrome extension

Chrome extension은 크롬 브라우저의 확장성을 제공해주는 소프트웨어 프로그램으로 웹과 동일하게 HTML, Javascript 및 CSS와 같은 웹 기술을 기반으로 제공한다. 

아래의 링크를 통해 시작하기 튜토리얼을 확인하며 시작하면 좋을 것 같다. 

https://developer.chrome.com/docs/extensions/get-started?hl=ko

확장 프로그램 / 시작하기  |  Get started  |  Chrome for Developers

 

구성

 

위와 같은 폴더구조를 가진다. 

 

- manifest.json

 

• 크롬 익스텐션의 메타데이터를 정의하는 필수 파일, 해당 파일을 기준으로 크롬에서 파일이 로드 된다
• 익스텐션의 이름, 버전, 권한, 브라우저에서 실행될 스크립트 파일 등을 설정합니다.
• 핵심 역할:
  • 익스텐션 실행의 기본 설정.
  • 권한 및 실행 환경 지정(예: 브라우저 페이지 접근 권한, API 사용 권한 등).

background.js

• 크롬 익스텐션의 중심에서 항상 실행되는 서비스.
• 이벤트 리스너를 통해 사용자 동작이나 메시지를 처리, 필요할 때만 로드 됨
  • 익스텐션 설치 시 초기화 작업 수행.
  • content.js나 popup.js에서 전달된 데이터를 수신하거나 처리.
  • 데이터 간의 통신 중개 역할을 수행

Scripts/ : 동작 스크립트를 포함하는 폴더

 

  content.js

 

• 웹 페이지에 삽입되어 DOM(Document Object Model)을 직접 조작하거나 데이터를 크롤링하는 스크립트.
• 크롬 익스텐션이 로드된 웹 페이지에서 동작.
• 이 파일에서:
  • 특정 클래스(.review-class)를 가진 리뷰 데이터를 크롤링.
  • 크롤링한 데이터를 background.js 또는 popup.js로 전달

 

react.production.min.js

• React 기반 UI 설계를 지원하는 라이브러리로, React 컴포넌트를 활용해 복잡한 UI를 구성
•  확장 프로그램에서 React를 사용할 때 필요.

popup/: 팝업 창 관련 파일, 익스텐션 클릭시 주 화면이라고 생각하면 됨

popup.html

• 크롬 익스텐션의 팝업 창의 기본 UI 구조를 정의.
• 팝업에서 보여줄 콘텐츠의 레이아웃과 DOM 요소를 포함.
• 이 파일에서 popup.js와 popup.css를 연결, 즉 메인 페이지라고 생각하면 됨 

popup.js

• 팝업 창에서 실행되는 JavaScript 로직.
• 이번 프로젝트에서:
  • 서버에서 가져온 요약 데이터를 UI에 표시.
  • Flask 서버로 크롤링된 리뷰 데이터를 전송.
  • content.js 또는 background.js로부터 메시지를 수신하여 데이터를 처리.

popup.css

• 팝업 창의 스타일(디자인)을 정의.

images/

icon-16.png, icon-32.png, icon-48.png, icon-128.png

• 크롬 익스텐션의 아이콘 파일.
  • 16px: 주소창 옆 아이콘.
  • 32px: 크롬 확장 프로그램 설정 페이지에 표시.
  • 48px, 128px: 크롬 웹 스토어나 고해상도 환경에서 사용

 

확장프로그램 실행

1. chrome://extensions/ 으로 접속

2. 개발자 모드 키기

 

 

3. 압축해제된 확장프로그램(내 프로그램) 로드하기 

4. 실행하기