즐겨찾기 사이트 모음 및 관리 서비스 만들기(3) - 크롬 확장프로그램 만들기1 (Building a favorite site management service - Building Chrome extension 1)
즐겨찾기 사이트 모음 및 관리 서비스 만들기(3) - 크롬 확장프로그램 만들기1 (Building a favorite site management service - Building Chrome extension 1)
1시간 만에 만든다고 한건 허세로 들통났다. 내가 생각했던 것보다 간단한 서비스가 아니었다. 고민 끝에 크롬 확장프로그램을 만들어서 이 서비스를 만들어야겠다고 생각했다. 그래서 먼저 크롬 확장프로그램을 만드는 법을 찾아보았다.
생활코딩의 이고잉님 강의 + 문서를 참고하고 나온 결과물. 크롬 확장프로그램 개발을 시작하는 방법.
How to start to building a Chrome extension
에디터를 준비한다. IDE도 괜찮고 텍스트 편집기도 좋다. 나는 이번 기회에 Visual Studio Code 를 다운받아서 사용해보았다. 이유는 c9으로 작업하기에는 개발을 하면서 실시간으로 체크하는 것이 어려워서 로컬로 개발 해야했고 가장 가벼운 에디터를 사용하고 싶어서 찾아보니 한 블로그에서 VS CODE 를 추천하길래 사용하게 되었다. Visual Studio 랑은 관련이 없다고 한다.
Visual Studio Code 로 작업환경을 만드는 방법은 아래 포스팅을 참고하면 된다.
Visual Studio CODE(VS CODE) 설치, 사용하는 방법
에디터 준비가 완료가 됐으면 작업 폴더에 manifest.json , popup.html, script.js , icon.png 를 만들어준다. 이 때 icon.png 는 아이콘이 될 이미지 파일을 넣어준다.
그리고 manifest.json 파일에 아래 코드를 복사해서 붙여넣는다.
{
"manifest_version": 2,
"name": "Awesome Bookmark Manager",
"description": "You can easily find bookmark that you want to go by using this program ! ",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
그 다음 popup.html 파일에 기본적인 HTML 구성을 넣어준다
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Hello World !</h2>
</body>
</html>
그리고 Chrome 에서 확장프로그램에 들어간 뒤 개발자 모드를 누르고 압축해제 된 확장프로그램 로드를 누른다
그리고 작업하고 있는 폴더를 클릭해서 넣어주면 끝 !
그러면 오른쪽 상단에 확장프로그램이 생길 것이다. 그러면 진짜 끝 !
댓글
댓글 쓰기