크롬 익스텐션이란?
크롬 익스텐션은 구글 크롬 브라우저에 추가 기능을 제공하는 작은 소프트웨어 프로그램입니다. 사용자가 웹 브라우징 경험을 향상시키거나 웹 페이지에 기능을 추가하는 데 사용됩니다. 익스텐션은 크롬 웹 스토어에서 다운로드하고 쉽게 설치할 수 있으며 개발자들이 자신의 익스텐션을 만들고 배포할 수 있습니다.
만들고자 하는것이 브라우저를 사용하면 크롬 익스텐션이 활용도가 높은것 같습니다. 간단하게 만들고 배포하기 좋기 때문에 이번에 크롬 익스텐션을 공부하면서 개발하려고 합니다. 여기서 원래라면 기존 바닐라 코드로 만들려고 했었는데 이번에는 가장 익숙한 리액트로 해보려고 합니다. 개발하기 전에 워밍업겸 튜토리얼을 먼저 공부해보려고 합니다
튜토리얼의 원문은 구글 developer에서 확인하실 수 있습니다
Chrome Extensions getting started guides - Chrome Developers
Overview of all Chrome Extensions getting started guides.
developer.chrome.com
매니페스트(manifest.json)
이 파일은 익스텐션의 기본 설정 및 정보를 포함하는 가장 중요한 파일입니다. 익스텐션의 이름, 버전, 아이콘, 권한 등이 여기에 기재됩니다.
매니페스트는 중요한 메타데이터를 기록하고, 리소스를 정의하고, 권한을 선언하고, 백그라운드와 페이지에서 실행할 파일을 식별합니다.
서비스 워커(service worker)
확장 서비스 워커는 브라우저 이벤트를 처리하고 수신 대기합니다. 새 페이지로 이동, 북마크 제거, 탭 닫기 등 다양한 유형의 이벤트가 있습니다. 확장 서비스 워커는 모든 Chrome API를 사용할 수 있지만 웹페이지의 콘텐츠와 직접 상호 작용할 수는 없으며 이는 콘텐츠 스크립트가 담당합니다.
콘텐츠 스크립트
콘텐츠 스크립트는 웹페이지의 컨텍스트에서 자바스크립트를 실행합니다. 또한 삽입된 페이지의 DOM을 읽고 수정할 수도 있습니다. 콘텐츠 스크립트는 Chrome API의 일부만 사용할 수 있지만 확장 프로그램 서비스 워커와 메시지를 주고받음으로써 나머지에 간접적으로 액세스할 수 있습니다.
팝업 및 기타 페이지
확장 프로그램에는 팝업, 옵션 페이지 및 기타 HTML 페이지와 같은 다양한 HTML 파일이 포함될 수 있습니다. 이러한 모든 페이지에는 Chrome API에 대한 액세스 권한이 있습니다.
위 설명만보면 어떤건지 감이 안잡히기 때문에 간단한 샘플을 보면서 감을 익히는게 더 좋을 것 같습니다
아래 구글이 만들어 놓은 익스텐션 예제를 테스트해볼 수 있습니다.
GitHub - GoogleChrome/chrome-extensions-samples: Chrome Extensions Samples
Chrome Extensions Samples. Contribute to GoogleChrome/chrome-extensions-samples development by creating an account on GitHub.
github.com
아래는 익스텐션이 사용하고 있는 대부분의 파일 구조입니다
- manifest.json : 익스텐션의 기본적인 설정 정보를 작성
- background.js : 백그라운드에서 돌아가는 코드, 탭과 상관없이 최초1회만 동작
- popup : 팝업창
- icon : 크기별 아이콘
실제 크롬에서 가장 기본적인 예제를 가지고 테스트 해보죠
https://github.com/rjs5730/chrome-extention-tutorial
GitHub - rjs5730/chrome-extention-tutorial: chrome extension tutorial
chrome extension tutorial. Contribute to rjs5730/chrome-extention-tutorial development by creating an account on GitHub.
github.com
위 git으로 들어가서 1. color-change를 다운 받고
2. chrome//extensions에 접근합니다
3. '압축해제된 확장 프로그램을 로드합니다' 버튼 클릭 후 해당 파일을 추가해줍니다.
4. 오른쪽 상단에 크롬 익스텐션 아이콘을 클릭후 실행해봅니다
5. 코드를 변경하면 자동으로 익스텐션에 바로 반영되니 자유롭게 가지고 노시면 됩니다.
익스텐션 아이콘 클릭 후 옵션을 클릭하면 popup.html이 나타납니다.
그후 색상 변경이 가능합니다
코드는 이 change-color보시면 이해하기 쉬우실겁니다.
자세한 코드는 생략하려고 하며 수정하면서 테스트해보시길 바랍니다
'프로그래밍 > React|Next.js' 카테고리의 다른 글
| [DeepDive] 1장 - 자바스크립트: 데이터 타입과 함수 (0) | 2024.03.11 |
|---|---|
| gatsby의 이미지 컴포넌트 비교(StaticImage, GatsbyImage) (0) | 2023.08.08 |
| emotion/css 와 emotion/react의 css사용 차이는 뭘까? (0) | 2023.07.23 |
| storybook 7.0.26 부터 next.js의 NextImage 지원 (0) | 2023.07.07 |
| nextjs 13.4 버전에서 storybook 7버전 실행시 오류 발생 (0) | 2023.07.07 |
