크롬 확장프로그램 만들기 (1)

안녕하세요. 뉴핀입니다.

이번 포스팅에선 크롬 확장프로그램 제작 및 등록 방법을 알아보겠습니다.
저도 처음 만들어 보면서 블로그를 작성하는 거라 이렇게 만드는구나 정도로만 생각하시면서 봐주시면 감사하겠습니다.

이번 프로젝트의 최종 목표는 크롬 확장 프로그램을 통해 IPFS에 파일을 업로드, 다운로드할 수 있는 기능을 만들어 보려고 합니다. IPFS에 관한 내용은 해당 부분 개발할 때 추가로 설명하겠습니다.

 

---

 

1. 크롬 확장 프로그램이란?

 

Extension 이라고도 부르는 크롬 확장 프로그램은 사용자의 브라우징 경험을 향상하는 작은 프로그램(small software programs that customize the browsing experience)입니다. - 크롬 공식 문서

저는 네이버 웨일 브라우저 상에서 확장 프로그램을 개발을 진행해볼 텐데 크롬, 엣지, 사파리, 오페라 등등 크로미움 기반 브라우저라면 어떤 브라우저를 이용하셔도 상관없습니다. 모두 확장 프로그램을 지원하기 때문이죠.

 

---

 

2. 크롬 확장프로그램 구조

 

 

• popup.html
  • index.html 같은 역할을 합니다.
  • 확장 프로그램 탭에서 확장프로그램 아이콘을 누르면 나타나는 팝업입니다.
  • 최소한의 필수 기능만 포함한 간결한 UI를 만드는 것을 권장합니다.
• popup.js
  • popup.html 에 필요한 이벤트를 제어하는 자바스크립트입니다.
  • background.js, contentscript.js 파일들과 메세지를 주고받을 수 있습니다.
• background.js
  • 브라우저 부분에서 동작하는 자바스크립트입니다.
  • 확장프로그램의 전체적인 이벤트 핸들러입니다. 이벤트 발생시 코드를 수행합니다.
  • 이벤트 발생시에만 동작하고 평소에는 사용되지 않게끔 만드는 것을 권장합니다.
  • popup.js, contentscript.js 파일들과 메세지를 주고받을 수 있습니다.
• contentscript.js
  • 방문한 웹페이지에서 동작하는 스크립트입니다.
  • 방문한 페이지의 DOM 파일의 구성요소를 CRUD 할 수 있습니다.
  • backgroud.js, popup.js 파일들과 메세지를 주고받을 수 있습니다.
• manifest.json
  • 플러그인의 이름, 버전 등의 기본 정보를 포함하고 있는 파일입니다.
  • 프로그램의 메타 정보를 보유하고 있습니다.

 

---

 

3. 확장프로그램 등록하기

 

이번 포스팅에서는 아주 간단하게 개발자 모드에서 확장 프로그램을 등록하는 방법을 알아보겠습니다.
진짜 확장 프로그램 개발에 대한 내용은 다음 포스팅에서 이어서 하겠습니다!

확장 프로그램을 만드는 방법은 생각보다 간단합니다. 컴퓨터 내의 원하는 위치에 폴더를 만들고 Visual Studio Code를 통해 폴더를 열어주세요.

> mkdir extension_ipfs && cd extension_ipfs
> code

extesion_ipfs라는 폴더를 만들어주고 code 명령어를 통해 Visual Studio Code 프로그램을 열어주었습니다.

Visual Studio Code에서 manifest.json 파일을 추가해준 후, 아래 코드를 입력하고 저장해줍니다.(manifest_version 제외하고는 개발자 여러분들 입맛에 맞는 이름으로 입력해주세요!)

{
  "name": "IPFS_EXTENSION",
  "version": "1.0.0",
  "description": "Jack's IPFS Extension",
  "manifest_version": 2
}

 

저장을 완료하셨다면 크롬 계열 브라우저의 주소창에 chrome://extensions를 입력하고 이동해주세요. 

이렇게 개발자 모드를 킬 수 있는 버튼이 있을 거예요. 저는 웨일 브라우저라 하단에 위치했는데 크롬은 아마 우측 상단에 있을 거예요!
버튼을 클릭해서 개발자 모드를 실행해주세요.

그럼 이렇게 두 개의 버튼이 생기는데 그중 압축해제 된 확장앱 설치 버튼을 클릭해줍니다.

아까 만든 폴더를 업로드해주면 확장 앱 등록 끝입니다.

👏👏👏 여러분 자신만의 확장 프로그램이 만들어졌습니다. 아직 아무런 동작을 안하겠지만 아래처럼 확장프로그램이 등록된 걸 확인할 수 있습니다.

 

---

 

4. 마치며

이번엔 확장 프로그램이 어떤 것인지 알아보고 등록 방법에 대해 알아보았습니다. 실제로 확장 프로그램을 등록하려면 5달러의 비용도 발생하고 크롬 측에 검사를 받아 승인을 받아야 등록이 가능합니다! 계속 이어서 확장 프로그램을 만들고 실제 배포를 진행해서 동작하는 모습을 보여드리겠습니다.

저도 처음 해보는 개발이라 모르는 게 많습니다...ㅜㅅㅜ
그래서 더 흥미롭기도 하고 간단하게 내가 만든 프로그램이 보이게 돼서 좋은 프로젝트인 것 같습니다.
감사합니다:)