안녕하세요 상구너입니다.

이번시간에는 예고와 같이 크롬 확장앱을 만들고 적용하는 방법을 공유하려고 합니다.

부족한 필력으로 시작하는 첫 강좌니까, 부담없이 재밌게 봐주세요! :D

이전 강좌 보기

크롬 확장앱 만들어보기 (프롤로그)

크롬 확장앱 만들어보기 (2/3)

크롬 확장앱 만들어보기 (3/3)

사실상 "크롬 확장앱 만들기" 라고 하면 무언가 거창해보이고 어려워 보일 수도 있지만 그건 사실이 아닙니다.

크롬 확장앱은, 새로운 언어도 아니고 그냥 몇가지 제공되는 크롬 api를 이용할수있도록 끼워넣는 HTML, CSS, JS 로 구성된 부품입니다.

그렇다고 그능력이 별거 아닌건 아니에요,

브라우저 내부의 코드를 제어할수도있고,

브라우저 자체의 기능을 (제한적으로)실행하는 역할도 할수있어요

https://chrome.google.com/webstore/category/extensions

우선 크롬 웹스토어에 들어가보면,

화면캡쳐 앱부터, 애버노트 클리퍼, 이메일 리더, 텍스트 읽어주는 앱까지 매우 다양합니다.

우리는 그중에서도 방문 사이트의 html코드를 js로 제어하고 요소를 추가하는 앱을 만들어볼거에요.

https://developer.chrome.com/extensions

크롬 개발자 가이드의 확장 부분 메뉴를 보면,

뭔놈에 manifest 니 폴더구조니 해서 여러모로 귀찮게해요.

저도 여기서 시작했다가 귀찮아서 그만두려고 했는데, 아주 바람직한 사이트를 발견했어요.

https://extensionizr.com/

익스텐션을 성격별로, 적용방법별로 만들어주는 빌더 사이트에요.

Name your extension 에서 확장앱의 타입을 선택하고,

Fine Tuning 에서 적당한 옵션들을 선택합니다.

우리 앱은 취지에 걸맞게, 히든 익스텐션에 다른 설정에는 No, 컨텐트 스크립트만 둘다 체크하고 

URL퍼미션엔 해당 익스텐션이 실행될 url들을 넣어주세요.

그리고 퍼미션에는 아무것도 안넣어주었습니다.

이상태로 Download ready! 를 누르면

생성된 샘플코드를 zip형식으로 다운받게됩니다.

압축을 풀어주세요.

압축파일을 들여다보면 위와같은 구조를 확인할 수 있습니다.

우리는 여기부터 시작할거에요,

다음시간에는 실제적으로 내부 js와 css 구조짜는 방법을 함께 해보겠습니다.

그럼 다음 강좌에서 만나요!

안녕하세요 오랜만에 돌아온 상구너입니다.

앞으로 몇개 포스트에 걸쳐서 크롬 확장앱을 만들고 적용하는 방법에대해 공유해보고자 합니다.

해당 강좌는 3개의 포스트에 걸쳐 진행될 예정입니다.

재밌게 봐주세요.

(5월 8일에 옵니다)

강좌 보기

크롬 확장앱 만들어보기 (1/3)

크롬 확장앱 만들어보기 (2/3)

크롬 확장앱 만들어보기 (3/3)