크롬 확장 프로그램 입문 - 내 첫 프로젝트를 만들고 올리기까지

안녕하세요. Alternative입니다.

 

제가 코딩에 대해 거의 모르는 상태에서 크롬 확장 프로그램에 대해 알아가고, 첫 프로그램을 크롬 웹스토어에 올리고 배포하기까지의 과정을 써 놓겠습니다. 생각의 흐름을 전부 서술하여 제가 '배우는 과정'이 어땠는지에 대해 알 수 있게 했습니다.

 

크롬 확장 프로그램을 만들고 싶은데 시작 방향을 모르겠다는 분들에게 도움이 되었으면 좋겠습니다.

 

0. 준비물

- 컴퓨터와 OS, 프로그래밍에 대한 기본적인 지식: 윈도우 재설치, CMD 명령어 입력 정도는 해보신 분이여야 기본적인 내용을 알 수 있겠습니다.

- 영어 실력: 모르는 내용은 검색해서 알아가는 게 필수이자 기본인데, 한국어로 된 자료와 영어로 된 자료는 양과 질적 차이가 차원을 달리합니다. 특히 Stackoverflow 문서를 못 본다면...

- 의지와 명확한 목표: 아마도 실용적인 이유로 시작하시는 경우가 대다수일 텐데, 뭔가를 해내겠다는 엔지니어적 자세가 있으면 좋습니다.

 

1. 크롬 확장 프로그램의 기본 구조

안드로이드에 .apk, 윈도우에 .exe가 있듯 크롬에도 유사한 게 있습니다. .crx 파일입니다. 확장 프로그램을 하나의 파일로 만든 걸로, 이걸 설치하면 확장 프로그램이 설치되는 겁니다. 예전에 크로미움 엣지에 크롬 확장 프로그램을 설치해 보면서 이런 파일이 있다는 건 알고 있었습니다.

 

그런데 그 crx 파일을 어떻게 만드냐. 그래서 유인원식 접근으로 'Chrome extension make crx'라고 검색했습니다.

그랬더니 뭔가 어려운 말들이 나오는데 그 중에서 'Compile Folder into .crx'라는 검색 결과가 나왔습니다. 오호...

컴파일은 프로그래밍에서 코드를 실행 가능한 단일 파일로 만드는 걸 의미합니다. 그럼 폴더를 컴파일해서 실행 가능한 crx로 만들 수 있다는 뜻이겠네요.

 

구글에 'Chrome extension folder'라고 검색합니다. 구글이 크롬 확장 프로그램을 어디에 보관해놓는지를 묻는 글들만 잔뜩 나옵니다. 검색어를 바꿔 봅니다. 'Make chrome extension folder'. 오호. 뭔가 쓸만한 결과가 보이기 시작합니다. 'How to Create Your Own Google Chrome Extension'. 제목부터 뭔가 우리가 찾는 것 같습니다.

https://www.freecodecamp.org/news/building-chrome-extension/

 

초반에 위 글의 도움을 받았습니다. 뭔가 길긴 하지만, 요약하자면 다음과 같습니다:

 

1) 크롬 확장 프로그램은 단일 폴더로 이루어집니다. 이 폴더를 압축해서 .crx 파일로 만들고 그걸 설치하는 거였습니다.

2) 코드는 Javascript, CSS, HTML 이 세 가지가 주로 사용됩니다.

3) 프로그램에 대한 기본 정보는 폴더 바로 아래 manifest.json이라는 파일에 들어 있습니다. 이름, 아이콘, 설명, 실행해야 하는 파일 등등....

4) 실제로 일을 하는 건 대체로 자바스크립트입니다. 우선 기본적으로 실행되는 background worker가 있으며, 특정 페이지에서만 실행되는 content script, 웹 페이지 내에서 작동하는 injected script 등이 있습니다. 이들은 전부 자바스크립트이긴 하지만, 사용할 수 있는 API(명령어)나 할 수 있는 일이 조금씩 다릅니다.

5) HTML은 페이지를 만들고 요소를 지정하는 역할을 합니다. 확장 프로그램에서는 대표적으로 프로그램 아이콘을 클릭했을 때 나오는 조그마한 창이 어떻게 생겼고 글이나 버튼이 어디에 있는지, 몇 개 있는지 등등을 알려 줍니다.

6) CSS는 스타일을 지정하는 코드입니다. 버튼을 예로 들자면 크기가 몇 픽셀인지, 색은 뭔지, 테두리는 어떻게 생겼는지 등등을 정할 수 있습니다. HTML에서 버튼을 만들고 어느 구역에 있을지를 정해면, CSS가 위치와 모양을 잡아 주는 겁니다.

 

2. 파일 만들기

이제 대충 어디서 시작해야 될 지 알았습니다.

적당한 위치에다가 폴더를 만듭니다. 이름도 대충 영어로 지어줍니다. 폴더 바로 아래에 파일 세 개를 만들어줍니다. 

 

- manifest.json: 프로그램의 이름과 설명, 버전 정보, 권한 등을 설정하는 기본 중 기본 파일입니다.

- background.js: 확장 프로그램이 실행되면 기본적으로 돌아가는 자바스크립트 코드입니다.

- popup.xml: 확장 프로그램 아이콘을 클릭하면 나오는 조그마한 창을 구성하는 HTML 코드입니다.

 

이 세 개가 가장 기본이 됩니다. (사실 popup.xml도 없어도 되긴 합니다.)

이 세 파일이 담겨 있는 폴더가 곧 크롬 확장 프로그램 하나가 됩니다.

 

만든 파일들의 내용은 아래 공식 문서를 보고 채워 넣으시면 됩니다.

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

(공식 문서는 교과서와 같은 존재로, 말이 딱딱하고 전문적이여서 이해하기는 힘들 수 있으나 필요한 정보가 원하는 형태로 전부 담겨 있는 고마운 존재입니다.)

 

3. 코딩 (팁)

이후부터는 실질적인 코딩의 시작입니다. manifest.json 파일을 적절하게 수정하며, background.js에 자바스크립트 코딩을 하시면 됩니다. 이 부분은 제가 대신 해 드릴 수 없습니다. 마치 여친을 대신 사귀어달라는 말과 같아요.

대신 까막눈이라도 원하는 기능을 구현하려면 어떻게 해야 하는지에 대한 팁이 있습니다.

 

1) 원하는 기능과 유사한 기능을 이미 구현한 확장 프로그램을 크롬 웹 스토어에서 찾으세요. 모방은 창조의 시작이자, 아무것도 모르는 우리들이 가장 빨리 배울 수 있는 길입니다. 구글에 '(확장 프로그램 이름) Github'라고 검색하면 해당 확장 프로그램의 원본 코드를 담은 깃허브 페이지가 있을 수 있습니다. 거기서 해당 기능을 어떻게 구현했는지 살펴보면서, 우리가 원하는 상황에 맞게 적용시키는 겁니다. 저 또한 제가 원하는 기능을 유사하게 구현한 'Don't Leave' 프로그램의 소스를 보지 못했더라면, 제 프로그램의 초기 버전을 세 시간 안에 구현하기는 힘들었을 겁니다.

 

2) 원하는 Function을 어떻게 쓰거나 알맞게 수정해야 할 지 모른다면, MDN 공식 문서(https://developer.mozilla.org/ko/)나 Chrome Extension 공식 문서(https://developer.chrome.com/docs/extensions/mv3/)를 찬찬히 뜯어보고 예제를 살펴보세요. 물론 이해도가 높은 고수라면 공식 문서만 보더라도 바로 알맞은 코드를 써낼 수 있겠지만, 우리는 예제를 수정해도 컴파일 오류가 나는 사람들입니다. 예제를 복붙한 뒤, 조금씩 맥락에 맞게 수정하면서 원하는 결과에 하나하나 다가가세요. 예제는 구글에 'OOO example' 또는 'OOO code'라고 검색하시면 찾으실 수 있습니다.

 

3) Stackoverflow(https://stackoverflow.com/)를 잘 활용하세요. 이미 전 세계에 여러분과 동일한 고민을 한 사람이 최소 몇천 명은 있습니다. 검색하면 거의 무조건 여러분과 같은 고민을 한 질문글이 스텍오버플로에 올려져 있습니다. 특히 초보자들의 질문에 대한 답변은 고수들의 친절한 설명글인 경우가 많습니다. 답변을 보고, 이해하려고 노력한 뒤, 수정해 보세요.

 

4) 스텍에서도 정 못 찾겠다면 직접 여러분의 상황을 설명하고 도움을 요청하는 질문글을 스텍에 올려 보세요. 질문글을 올릴 때에는 이미 있는 질문과 중복 질문이 아닌지 확인하고, 여러분의 상황과 코드, 발생하는 오류를 충분히 설명해야 합니다.

 

5) 구현하면서 머리가 복잡해지거나 어떻게 해야 할 지 잘 모르겠다면, 메모 앱에 필요한 단계를 차근차근 적어서 정리해 보세요. 예를 들어 '버튼을 웹 사이트에 생성한다 → 버튼의 위치와 모양을 정한다 → 버튼을 누르면 새로운 창이 열리게 하는 자바스크립트 코드를 쓴다 → 자바스크립트 코드를 웹페이지에 주입해 실행되게 한다' 라는 방식으로 정리한 후, 처음부터 하나씩 차근차근 해 나가는 겁니다. 물론 유연한 사고도 필요합니다. 원하는 기능을 구현하기 위한 방법에는 몇십, 몇백 가지가 있을 수 있습니다. 지금 하려고 하는 게 잘 되지 않는다면, 아예 다른 접근 방법도 한 번 생각해 보세요. 이때에도 다른 예제나 확장 프로그램을 찾아 참고하면 도움이 됩니다.

 

짧게 요약하자면 '잘 작동하는 코드를 참고하고, 모르는 건 Stackoverflow에 검색한다.'입니다. 간단한 듯 보이지만, 원하는 코드를 찾고 질문글을 검색하는 것도 스킬입니다. 직접 부딪혀 보면서 배우는 게 가장 빠릅니다.

 

참고로 코드를 쓸 때 사용하는 프로그램은 여러 가지가 있습니다. 저는 처음에 메모장으로도 했지만, 간편하고 보기 좋은 VS Code(https://code.visualstudio.com/)를 사용하는 걸 추천드립니다. 크롬 확장 프로그램에 쓰이는 코드인 Javascript, CSS, HTML을 전부 VS Code로 작성할 수 있습니다.

 

4. 테스트하기

코딩을 했으면 테스트를 하는 게 인지상정입니다. 크롬 확장 프로그램을 만들었으니 크롬을 이용해 테스트합니다.

 

크롬 주소창에 chrome://extensions 를 치면 확장 프로그램 관리 페이지로 들어갑니다. 여기에서 오른쪽 위의 '개발자 모드' 스위치를 켜면 여러 버튼이 보이게 되는데, 이 중 '압축해제된 확장 프로그램을 로드합니다'를 클릭하면 폴더를 선택하는 창이 열리게 됩니다. 여기에서 위에서 만든 세 파일이 담겨 있는 폴더를 선택하면 확장 프로그램이 설치되거나, (높은 확률로) 오류가 발생합니다.

 

오류가 발생했다면 화면에 있는 '오류' 버튼을 클릭해 오류 내용을 확인하고, 오류 메세지를 인터넷에 검색해 보아 해결 방법을 모색합니다. 3번에서 했던 걸 반복하게 됩니다. 

 

설치가 되었다면, 원하는 데로 작동하는지를 확인합니다. 이때도 원하는 데로 되지 않고 오류가 발생할 가능성이 높습니다. 이때는 크롬 창에서 F12 키를 눌러서 개발자 창을 열고, 아래에 있는 콘솔 창에서 오류 메세지를 확인합니다. 이후는 또 3번의 반복입니다.

 

5. 크롬 확장 프로그램 등록하기

3번, 4번을 반복해서 원하는 데로 확장 프로그램을 만들었다면, 혼자 사용할 게 아닌 이상 스토어(https://chrome.google.com/webstore/)에 등록을 해야 합니다. 저 또한 프로그램이 다른 사람들에게도 큰 도움이 되겠다 싶기도 했고, 혼자 쓰게 썩히기는 아까워서 등록을 진행했습니다.

크롬 웹 스토어에 개발자 등록을 하고 확장 프로그램을 등록하는 법은 아래 글에 자세히 설명되어 있습니다.

 

 

6. 기타

다른 사람의 코드를 가져다 사용했으면 자신의 코드도 여러 사람이 볼 수 있게 올리는 것이 인지상정입니다. 여러분이 만든 폴더를 깃허브에 올려 다른 입문자들을 도와 주는 걸 추천드립니다.

마찬가지로, 여러분이 스텍에 질문을 올리고 도움을 받았거나 해결했다면, 해결한 방법을 자세히 써서 댓글이나 답변으로 등록하는 것이 다른 사람들에게 도움이 됩니다.

---

지금까지 크롬 확장 프로그램을 만들고 등록하는 법에 대해 간략하게 알아보았습니다.

 

이 글은 정보전달성 글이기보다는 제가 어떤 과정을 거쳐 아무것도 모르는 상태에서 코딩과 등록을 할 수 있었는지, 생각의 흐름과 입문자를 위한 기초적인 코딩 방식에 대해 정리해놓은 글에 가깝습니다. 때문에 많이 간략화되고 이해가 잘 가지 않는 부분이 있을 수 있습니다.

 

앞으로도 이 글은 여러 번 수정을 거치면서 구체적인 예시와 스크린샷을 추가할 예정이니, 혹시 잘 이해가 가지 않거나 궁금한 점이 있으시다면 댓글로 말씀해 주세요!

 

여러분들의 입문이 좋은 결과물을 내놓기를 기원하겠습니다.