크롬 확장 프로그램 만들기 Get Started 부터 읽어보자.

크롬 확장 프로그램을 만들기 위해 필요한 것이 있다면 구글에서 제공하는 Get Started 페이지를 읽어보는 것이다. 크롬 확장 프로그램에 대한 간단한 설명부터 샘플 코드까지 안내하고 있으며, 최근 매니페스트 정보가 버전 3으로 업그레이드 되면서 버전 2에서 버전 3으로의 마이그레이션 방법도 제공해 주고 있다. 샘플코드와 튜토리얼은 많이 있으니 구글의 Get Started 페이지를 한번 읽어보고 따라해 보자.

크롬 확장 프로그램 만들기 Get Started 부터 시작하자

개발자라면 크롬 웹브라우저의 확장 프로그램에 관심이 있을 것이다.

만들어보고 싶지만 시간은 없고, 할 여력도 없기에 엄두를 내지 못할 수도 있다.

본인 또한 마찬가지 였으며, 최근 크롬 확장 프로그램에 대해 관심을 가지고 스터디를 진행하고 있다.

과거의 것과는 다르게 크롬 웹브라우저의 확장 프로그램은 업그레이드가 되었으며 매니페스트 ( manifest ) 파일은 버전 3로 업그레이드 되었다.

현재 무수히 많은 크롬 확장 프로그램 예제들은 버전 2 이기 때문에 최신 버전의 크롬 웹브라우저에서 실행되지 않을 수 있다.

실망은 이르다. 우리에겐 Get Started 페이지가 있다.

일단 방문하고 확인해 보자.

Get Started 무엇

프로그램을 공부하기 위해 우리가 하는 것은 관련 강좌를 찾아 보거나 따라하거나 혹은 공식홈페이지를 방문하는 것이다.

구글 확장 프로그램도 마찬가지이며, 구글은 친절하게 안내페이지를 서비스하고 있다.

영어라서 문제이며, 그놈의 깃헙 ( GitHub ) 으로 코드를 제공하고 있다.

Get Started 는 프로그램을 처음 시작하는 사람들을 위해 개략적인 내용을 제공하고 안내를 보여주는 페이지이다.

구글에서 제공하는 크롬 확장 프로그램을 위한 Get Started 페이지는 아래와 같다.

• https://developer.chrome.com/docs/extensions/mv3/getstarted/

어쩌구저쩌구 영어로 블라블라 하고 있지만 우리에겐 AI 도 있고, 번역기도 있다.

과감하게 물어보고 과감하게 번역해서 읽어보자.

크롬 웹브라우저의 번역

구글 Bard 에 물어봤다. 3가지 답변을 준다.

Manifest Version 3

매니페스트 ( manifest ) 파일은 json 형태로 되어 있으며 크롬 웹브라우저의 확장 프로그램에 반드시 필요한 파일이다.

manifest.json 으로 구성되어 있으며 현재 버전 3 로 업그레이드 되어 있다.

최신의 크롬 웹브라우저의 경우 확장 앱의 매니페스트 파일이 최소 버전 3 이상을 요구하기도 한다.

위에서 언급한 Get Started 페이지에 접속해보면 매니페스트 V2 를 V3로 마이그레이션하는 부분이 보인다.

마이그레이션에 대한 부분은 필수는 아니지만 권고사항이다.

하지만, 가급적 버전을 업그레이드하도록 유도하고 있다.

마이그레이션 권고사항이기도 하다.

샘플 보기

크롬 웹브라우저 확장 프로그램을 만들기에 필요한 지식이 있다면 웹 기술이다.

웹 기술은 html, css, javascript, web api 정도가 될 수 있다.

html 은 화면을 구성하고, css 는 화면을 꾸미고, javascript 는 동작을 만든다. 그리고 web api 를 사용하여 기능적인 부분들을 확장하여 사용할 수 있다.

이런 기능들은 샘플에서 확인할 수 있지만 인터넷에 공개된 다른 사람들의 것들을 보는 것도 도움이 된다.

매니페스트 버전 3 에 대한 샘플 파일은 다음과 같다.

• https://developer.chrome.com/docs/extensions/mv3/samples/

선행 지식은 학습해 두자.

샘플보기에서 이미 언급했지만 크롬 확장 프로그램 만들기에 필요한 사전 지식은 html, css, javascript 정도이다. web api 는 기능을 확장하기 위한 도구들에 가깝기에 일단 제외하자.

html, css, javascript 정도는 기본적으로 알아두고 시작하면 편하겠지만, 성격 급하신 분들은 크롬 확장 프로그램 예제를 같이 따라하는 것이 시간을 줄일 수 있다.

어차피 같이 진행되고 중복되는 내용들이 있기 때문에 튜토리얼을 따라하면서 그때그때 익혀두는 것도 방법이다.

html, css, javascript 를 공부하기에 가장 부담없는 곳이 https://www.w3schools.com/ 이기도 하다.

따라하고 업로드하자.

개요도 살펴보고, 샘플파일도 볼 수 있다면 이제 따라하면 그만이다.

깃헙 ( GitHub ) 을 이용해 파일을 내려받은 후 크롬 확장 프로그램 관리 화면에서 앱을 등록하고 살펴보자.

즉각적으로 확인해 볼 수 있기에 이해가 빠를 것이다.

크롬 확장프로그램에 익숙해지면 이것저것 많은 것을 할 수 있고, 프로그램을 제작하고 배포하는데 편의성과 용의성이 높다.

중요한 것은 샘플 코드로 학습을 하고 어설프고 간단한 것 하나 만들어 보고 업로드해 보도록 하자.

간단한 계산기 정도 만들어도 좋고, 메모장을 만들어도 좋다.

어떤 것이라도 만들어서 올리는게 중요하다.