1. 준비사항
- Javascript
- HTML
- Chrome Browser
- Google extension api documentation : https://developer.chrome.com/extensions/api_index
2. Chrome Extension 예제
→ 간단한 샘플 프로그램 만들기
→ https://developer.chrome.com/extensions 를 방문하면 다양한 것을 익힐 수 있다.
2.1. manifest.json 만들기
manifest.json은 확장 프로그램의 정보가 담긴다. 확장 프로그램의 이름, 설명, 어떠한 파일들을 사용하는지, 브라우저의 어떤 퍼미션을 필요로 하는지 등을 기술한다.
{
"manifest_version": 2,
"name": "tetoda_robot_chromeExtension",
"description": "Print Hello, World! message",
"version": "1.0.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"<all_urls>"
]
}2.2. 버튼
브라우저 우측 상단에 프로그램을 작동시키는 버튼이 될 작은 이미지 파일이다. 구글에서는 19x19 픽셀 사이즈를 권장한다.
그림판에서 간단한 아이콘을 만들 수 있다.
그림판 → 속성 → 픽셀을 설정한 후, "ctrl + 마우스 휠 ↑ " 하면 확대된 컨버스를 볼 수 있다. 간단하게 아이콘을 만든 후 icon.png 확장자로 저장하면 된다.
주의해야할 점은 파일 이름이 위의 manifest.json에 default_icon에 명시된 파일 이름과 같아야 한다.
2.3. 팝업창 만들기
버튼을 클릭하면 뜰 팝업창의 내용이 담긴 파일이다. 단순 HTML 파일이며, popup.html 파일을 다음과 같이 새로 작성하여 저장한다.
버튼의 경우와 같이, 파일 이름이 manifest.sjon 에 default_popup에 명시된 파일 이름과 같아야 한다.
<!DOCTYPE html>
<html>
<head>
<style>
BODY {width : 520px; min-height:250px;}
</style>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>2.4. 프로그램 만들기
이제 실제 작동할 프로그램이다. popup.js 파일을 다음과 같이 새로 작성한다. 여기서도 파일명은 popup.html의 <script> 태그에 src속성에 명시된 파일명과 같아야 한다.
function sayHello(){
document.body.innerText = "Hello, World!";
}
window.onload = sayHello;주의할 점은 window.onload = sayHello; 대신에 그냥 sayHellp();를 호출하면 페이지가 완전히 로딩되기 전에 함수가 호출되어 함수가 잘못 실행되거나 실행되었더라도 그 결과를 확인할 수 없다.
이는 다른 자바스크립트 프로그래밍에서도 적용되는 이야기이다. 네트워크에 물린 프로그래밍의 특수성이라고 한다.
2.5. 크롬에서 테스트하기
이제 프로그램을 크롬에 등록하고 실행하면 된다. 확장 프로그램을 배포하기 전에 미리 내 컴퓨터에서만 테스트를 해보는 것이다.
작성한 파일들을 같은 디렉토리에 묶어두고 다음의 프로세스를 따르면 된다.
- 주소줄에 chrome://extensions 를 입력하여 확장 프로그램 관리 페이지로 이동한다.
- 페이지 오른쪽 위에 개발자모드 체크박스에 체르를 한다.
- 개발자 모드 체크박스에 체크를 하면, 압축해제된 확장 프로그램 로드... 라는 버튼이 나타난다. 이를 눌러 뜨는 창에서 아까 묶어두었던 디렉토리를 찾아 확인 버튼을 클릭한다.
- 브라우저 오른쪽 상단에 버튼이 새로 나타나는 것을 확인할 수 있다. 버튼을 클릭하면 팝업창이 뜨면서 Hello, World!가 출력되는 것을 확인할 수 있다.
2.6 동작 설명
확장 프로그램 버튼을 누르면 popup.html이 작은 창에 로딩된다. popup.html이 로딩되면서 <script>내에 명시된 popup.js가 로딩되어 실행된다.
참고 : http://hodol.kr/xe/note/17558
'개발레시피 > └ Front-End' 카테고리의 다른 글
| [Angular] 관계성이 없는 Component간의 통신 (0) | 2018.09.06 |
|---|---|
| Angular 기본 (0) | 2018.05.30 |
| HTML 이론 및 개념 (0) | 2017.06.06 |
| Angular 1.x와 Angular 2의 차이점 (0) | 2017.06.05 |
| [Chrome Extension] manifast.json 파헤치기 (0) | 2017.05.27 |
Comments