크롬 확장프로그램 구글 예제 및 등록(확인)방법

👀 크롬 확장 프로그램

📍 크롬 브라우저를 이용하는 사용자에게 제공되는 확장 프로그램이다.

📍 잘 이용하면 크롬을 200% 사용할 수 있다. 

📍 일반인도 직접 제작할 수 있으며 본인만 업로드 해서 사용할 수 있다.

📍 추가적으로 스토어에 올릴 수도 있으나 5$정도 개발자 등록 비용이 필요하다.

 

🚧

chrome.google.com/webstore/category/extensions?hl=ko

링크를 타고 들어가면 다양한 크롬 확장 프로그램을 볼 수 있다. 

 

---

 

👀 구글에서 제공하는 예제[Chrome Extensions samples]

구글링해서 나온 한국 예제들은 대부분 간단한 팝업예제가 대부분이라 내가 찾던 인터페이스 예제는 찾을 수 없었다.

더 찾아보던 중 구글에서 샘플 예제들을 올려놓은 깃허브를 찾게 되었다.

 

🚧

developer.chrome.com/docs/extensions/

여긴 크롬에서 제작한 확장프로그램(Extensions) Documentation이다.

한글로 번역하면 어찌저찌 잘 따라해 볼 수 있을 거 같다.

 

 

🚧

github.com/GoogleChrome/chrome-extensions-samples

여기가 샘플예제를 올려놓은 깃허브 이다. 

apps / samples / 로 들어가면 샘플 예제를 볼 수 있다. 

 

apps

samples

🚧

github.com/GoogleChrome/chrome-extensions-samples/tree/main/apps/samples

이건 바로 samples 예제로 가는 링크이다.

 

꽤 많은 예제가 등록되어있다.

 

 

calculator에 들어가 보았다.

이렇게 소스코드가 정리되어있다.

 

 

밑에는 이렇게 스크린샷도 첨부되어 있어 본인이 만들고 싶은 형태의 인터페이스를 간단하게 찾을 수 있다. 

 

---

👀 예제(samples) 실습 [vsc]

직접 sample을 가져와서 크롬에 설치해보겠다. 

visual studio code를 사용할 예정이므로 설치가 안된 사람은 설치하고 진행해 주기 바란다. 

 

🚧 

code.visualstudio.com/

비주얼 스튜디오 설치 링크이다. 

 

🚩 프로젝트 링크를 복사해 온다. 

위 프로젝트 링크를 타고 들어가서 프로젝트를 복사한다. 

전체 파일을 받아오는 것이 아니라 실행할 샘플 폴더만 다운받아올 것이다. 

 

 

🚩 cmd창을 연다.

📌cd 이동할 폴더명 (하위 폴더이동)

📌cd .. (상위 폴더 이동)

📌dir (폴더내 파일 검사)

 

 

명령어를 입력하여 클론받을 폴더로 이동한다.

 

🚩 순서대로 따라한다.

//sample_cal폴더 만들기
mkdir sample_cal 

//sample_cal로 이동
cd sample_cal

git init

git config core.sparsecheckout true

//아까 복사한 레파지토리 주소
git remote add -f origin https://github.com/GoogleChrome/chrome-extensions-samples.git

//dart폴더만 클론 dart 폴더의 위치
echo apps/samples/dart/* > .git/info/sparse-checkout

git pull origin main

복사할 폴더명

저 코드를 그대로 복사해서 cmd창에 입력하면 된다. 

나는 dart 예제를 복사했다.

다른 예제를 클론하고 싶다면 apps/samples/다른예제명/* 으로 작성해 주면 된다.

 

 

프로젝트가 커서 좀 오래걸린다. 

 

 

모두 완료되면 sample_cal에 폴더가 모두 업로드 된 것을 알 수 있다. 

처음에는 위에 계산기 예제를 하려고 했는데 dart가 재밋어보여서 폴더명 변경하는 것을 깜빡 했다. 

 

🚩 크롬에 업로드 한다. 

 

확장 프로그램 탭으로 이동한다.

 

 

🚧

chrome://extensions/

 

 

 

아까 만들었던 폴더를 선택해 준다.

선택할 폴더는 꼭 예제의 이름임을 명시하자.

sample_cal/apps/samples/dart

 

 

플러그인이 생긴 것을 볼 수 있다. 

 

🚩 실행해 본다.

 

최근에 추가한 앱에 dart가 생긴 것을 확인 할 수 있다. 

최근 추가한 앱에 보이지 않는다면

AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Chrome 앱

대충 여기쯤에 설치되어 있다.

 

 

오 생각보다 더 귀여운 프로그램인 거 같다. 

 

🚩 코드 확인

코드는 visual studio에서 확인하는게 편리하다.

 

 

본인이 직접 코드를 수정할 수도 있다. 

추가로 alt + b를 누르면 웹에서 실행하는 것을 볼 수 있다.

 

 

---

크롬 확장 프로그램에 대해 알아보았다.

본인이 만들고 싶은 것을 빠르게 만들어 볼 수 있을 거 같다. 

 

🚧

opentutorials.org/course/2473/14086

크롬 확장 기능 만들기 - 생활코딩

많이들 참고한다고 하는 생활코딩 크롬 확장 프로그램 강좌이다. 

 

모르는 내용은 질문👀