한번쯤은 내가 만든 확장 프로그램을 사용해보고 싶다는 마음을 가지고 있었습니다. 그러다가, 크롬 앱 만들기 강좌를 찾았습니다. 따라 하다 보면 크롬 확장 프로그램은 만들 수 있겠다 싶어서 들어봤습니다.
수업 내용은 나름 괜찮았습니다. 몰랐던 자바스크립트 기능도 알게되고, 무엇보다 강사의 코딩 스타일이 유용해 보였습니다. 하지만, 끝까지 크롬 확장 프로그램 만드는 얘기는 하지 않더라고요. 그래서 시작한 김에 크롬 확장 프로그램 만드는 방법을 찾아봤습니다.
확장 프로그램 작성
hello world 크롬 확장프로그램을 만들기 위해서 필요한 것은 세 가지입니다.
- manifest.json
- icon image
- 확장프로그램에서 실행할 파일 ( 여기서는 html 파일 )
manifest.json
manifest.json 파일은 확장 프로그램의 정보를 기록하는 파일입니다. 여기에는 확장 프로그램의 이름, 설명, 그리고 어떤 파일이 실행될지, 어떤 권한을 가지고, 어떻게 동작하는지에 대한 정보를 담고 있습니다. 여기서는 단지 Hello World 메시지만 보여줄 것이기에, 간단히 프로그램 정보와 실행될 파일과 아이콘 이미지만 지정합니다.
{
"name": "Hello World",
"description" : "Hello World Chrome Extension",
"version": "1.0",
"browser_action": {
"default_popup": "hello.html",
"default_icon": {
"16":"hello1.png",
"32":"hello2.png"
}
},
"manifest_version": 2
}
icon image
이 이미지는 툴바에서 보일 버튼 아이콘 이미지입니다. 기본으로 16 x 16 사이즈의 이미지와 32 x 32 사이즈의 이미지를 가지는 것을 권장하며, 추가로 48 x 48, 128 x 128 사이즈의 이미지를 등록할 수 있습니다. 여기서는 16 x 16, 32 x 32 이미지 파일 2개를 준비했습니다.
확장 프로그램에서 실행할 파일
manifest.json에서 실행하도록 등록하는 파일입니다. 여기서는 html을 렌더링 해서 보여주는 것이 전부이므로, HTML 태그에서 helloworld를 출력하도록 하는 것이 전부입니다.
<!DOCTYPE html>
<html>
<head>
<title> Hello World </title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
위의 세 종류의 파일을 모두 준비했으면, 확장 프로그램의 등록을 위한 준비는 모두 마쳤습니다. 위 4개의 파일을 동일한 폴더에 저장합니다.
확장 프로그램의 실행
확장 프로그램을 실행하려면, 우선 브라우져의 개발자 옵션을 활성화시켜야 합니다. 먼저 확장 프로그램 페이지에 접속합니다. 주소창에 다음과 같이 입력합니다.
chrome://extensions확장 프로그램 페이지의 우측 상단에 개발자 모드를 활성화 해줍니다.
활성화하고 나면 보이는 "압축 해제된 확장 프로그램을 로드합니다" 버튼을 클릭하여 아까 저장한 파일들이 위치한 폴더를 선택해 줍니다. 선택하게 되면 위에서 작성한 확장 프로그램이 로드되고 등록되는 것을 확인할 수 있습니다.
그리고 툴바에서 Hello World 확장 프로그램의 버튼을 누르면 "Hello World"가 똭 보입니다.
Hello world 확장 프로그램은 잘 등록되었고, 또 잘 동작하는 것을 봤습니다. 간단한 파일 몇 개로도 확장 프로그램이 잘 동작하는 것을 보았습니다.
그렇지만, 잘 아시겠지만, 확장 프로그램으로 Hello world를 띄웠다고 해서, 멋진 확장 프로그램을 뚝딱 만들 수 있는 것은 아닙니다. 하지만, 미리부터 겁먹고 시도조차 하지 않았었는데, 막상 해보니 그렇게 어려운 일은 아니었습니다. (웹스토어에 등록하는 것도 이렇게 쉬울지는 모르겠습니다. ) 튜토리얼도 꽤나 상세히 나와있는 것 같으니, 관심 있으시면 한번 시도해 보시면 좋을 것 같습니다.
참고 : https://developer.chrome.com/extensions
What are extensions? - Google Chrome
Chrome Extend the Browser What are Extensions? Get Started Tutorial Overview Manifest Format Manage Events Design User Interface Content Scripts Declare Permissions and Warn Users Give Users Options Developer Guide Reach Peak Performance Protect User Priva
developer.chrome.com