팀원들과 팀프로젝트 주제를 놓고 브레인스토밍 중,
사용자로 부터 입력받은 여행 계획 정보를 한번에! 한페이지에! 보여주는 크롬 확장 프로그램 개발 아이디어가 나왔습니다.
여행에 관련된 소재여서 인기가 좋았고, 웹페이지가 아닌 형태를 개발하는 거여서 무척 신선하게 느껴졌습니다!
🦋 크롬 확장 프로그램은 웹 브라우저와는 확실히 다릅니다!
-> 비슷해보이지만 다른 점이 정말 많고, 구글이 정해준 규칙 을 따라야만 했습니다. (그리고 이 부분이 가장 흥미로운 부분이기도 합니다 🙌 )
- 크롬 확장 프로그램은 컴퓨터에 설치됩니다
크롬 확장 프로그램은 컴퓨터의 하드 드라이브에 설치됩니다, 특히 사용자의 크롬 사용자 프로필 디렉토리 내에 위치하게 됩니다. 이 디렉토리는 사용자가 크롬을 설치한 후 생성되며, 사용자의 북마크, 확장 프로그램, 설정 등 사용자의 데이터를 저장합니다.
- 크롬 확장 프로그램의 목적과 기능이 다릅니다
구글은 크롬 웹 브라우저를 인터넷 콘텐츠를 검색하고 탐색하기 위한 플랫폼으로 개발했으며, 크롬 확장 프로그램은 이 웹 브라우저의 기능을 확장하고 사용자 경험을 개선하기 위한 목적으로 설계되었습니다.
- 그러니 구글이 정한 규칙에 맞춰 개발해야 합니다!
=> 개발 가이드 공식 사이트
https://developer.chrome.com/docs/extensions/develop?hl=ko
🌝 가장 중요한 규칙
-> manifest.json에 권한 설정하는 것 입니다!
manifest.json 파일은 크롬 확장 프로그램(Chrome Extension)이나 웹 앱(PWA)의 필수 구성요소로, 확장 프로그램의 메타 데이터를 포함합니다. 이 파일은 확장 프로그램의 이름, 버전, 권한, 백그라운드 스크립트, 콘텐츠 스크립트, 팝업 HTML 파일, 아이콘 등 확장 프로그램이 작동하는 데 필요한 다양한 정보를 정의합니다.
🤔 개발 첫번째 난관
-> 저희가 만들고 싶은 크롬 확장 프로그램의 모습은 '새 창'으로 실행되는 것이었습니다.
극복 방법: manifest.json에 권한 설정하기 😇
//manifest.json
{ ...
"permissions": [
"window",
],
"background": {
"service_worker": "background.js"
},
"action": {},
}
//background.js
chrome.action.onClicked.addListener(function () {
chrome.windows.create({
url: 'index.html',
type: 'popup',
width: 1280,
height: 900,
});
});브라우저가 실행되면 background.js가 실행됩니다.
background.js는 index.html을 지정된 사이즈의 새 창으로 띄워주는 함수를 click이벤트로 연결합니다.
그럼, 확장프로그램 아이콘을 클릭했을 때 manifest.json의 action이 비어져있으므로 background.js에서 연결합 함수가 실행됩니다!
"background": { "service_worker": "background.js" } 부분은 background.js 파일을 서비스 워커로 사용하여 백그라운드에서 실행될 스크립트를 지정합니다. 서비스 워커는 웹 애플리케이션, 페이지, 또는 브라우저가 닫혀 있을 때도 백그라운드에서 실행될 수 있는 스크립트로, 이는 크롬 익스텐션의 경우 브라우저가 시작될 때 자동으로 실행되는 의미를 가집니다.
"action": { "default_popup": "popup.html" }로 설정되어 있고, background.js에서 chrome.action.onClicked 이벤트 리스너를 사용하여 클릭 이벤트가 연결되어 있다면, 일반적으로는 default_popup이 정의된 팝업이 우선적으로 나타납니다
( default_popup이 설정되어 있으면 그것이 우선적으로 적용되며, background.js의 클릭 이벤트 리스너는 무시됩니다.)
이렇게 해서 index.html을 새 창으로 띄웠습니다!
리액트는 번들링을 통하여 모든 코드들을 index.html로 만들어주니
저희가 구현하고자 하는 기능들은 웹페이지 만들듯이 구현하면 됩니다! (과연?)
