[Chrome extensions]크롬 확장프로그램의 구성.

크롬 플러그인이란?

   우선 크롬 확장 프로그램에 대해 소개 한다.

   크롬 확장 프로그램은 구글 크롬 브라우저에 설치해서 사용하는 부가기능을 말한다.

   크롬 확장 프로그램은 구글에서 지원하는 크롬 웹 스토어에서 받을 수 있고 개발한 확장 프로그램도 등록 할 수 있다.

 

* 크롬은 웹킷 엔진을 이용한다.

  - CSS3, HTML5 등의 지원이 뛰어나 개발에 용이하다.

  - 웹킷 엔진을 이용하는 IOS, Android에 응용 하여 사용 할 수 있다.

 

* HTML, JavaScript, CSS 등의 파일로 구성 되어 있다.

  - 웹 개발을 쉽게 할 수 있다.

  - XUL을 사용해야 하는 Mozilla Firefox 보다 개발이 편하다.

 

 

 

---

 

 

 

크롬 확장 프로그램의 구성.

   크롬 확장 프로그램은 다양한 형태로 만들 수 있다. UI적으로 구별 되는 것도 있으며, Chrome API를 사용하여 만들거나 그 이외의 다른  API를 이용하여 만들 수 있다.

 

- Browser Actions, Page Actions

  (브라우저 액션, 페이지 액션)

 

Browser Action(브라우저 액션)과 Page Action(페이지 액션)은 일반적인 형태의 확장프로그램이다.

페이지 액션은 주소 입력창 내부에 포함된 아이콘으로 표시되며, 브라우저 액션은 주소 입력창 오른쪽편에 아이콘으로 표시 된다. 그리고 둘 다 팝업 페이지를 가질 수 있다.

 

- Context Menus (보조 메뉴)

오른쪽 마우스를 클릭하면 생기는 보조 메뉴에 확장 프로그램의 기능을 추가 할 수 있다. 특정 요소를 클릭할때만 동작 하게 할 수 있다.

 

- Omnibox (옴니박스)

옴니박스는 주소창에 특정 검색어를 입력하면 나타난다. 주로 검색과 관련된 확장 프로그램에서 이용된다.

 

- Override Pages (오버라이드 페이지)

크롬에서 기본적으로 제공하는 즐겨찾기, 방문기록, 새 탭 페이지를 바꿀 수 있다.

 

- Apps (앱)

크롬 브라우저의 독립적인 탭에서 동작하는 웹 앱이다.

 

- Themes (테마)

크롬 브라우저의 외관을 바꿀 수 있다.

 

 

 

 

---

 

 

확장 프로그램 페이지

 

확장 프로그램에는 다양한 형태의 페이지를 제공 한다. 따라서 형태에 따라 필요한 페이지를 이용하여 사용 할 수 있다.

 

-Background Pages (백그라운드 페이지)

확장 프로그램 개발의 기본이 되는 HTML File 이다. 일반적으로 실행에 필요한 주요 알고리즘 내용을 포함 하며 사용자에게 보이지 않는다.

 

-Content Scripts (컨텐트 스크립트)

웹 페이지에 넣을 수 있는 JavaScript, CSS File을 말한다. 웹 페이지의 DOM(Document Object Model)을 살펴보거나 수정 하기 위해 사용 한다.

 

-Popup Pages (팝업 페이지)

Browser Action(브라우저 액션)과 Page Action(페이지 액션)의 아이콘을 클릭 하면 뜨게 되는 팝업 페이지를 사용 할 수 있는 HTML File이다.

 

-Options Pages (설정 페이지)

확장 프로그램에서 사용하는 설정 값을 사용자가 선택 할 수 있게 할 때 제공 하는 HTML File이다. 보통 LocalStorage를 이용해서 갑들을 저장 한다.

 

 

 

---

 

 

확장 프로그램 등록

주소창에 chrome://extensions 을 입력 하거나 도구>확장 프로그램 메뉴에서 개발자 모드 를 열고 압축해제된 확장 프로그램 로드... 버튼을 클릭 하고 manifest.json 파일이 저장된 폴더를 선택 해준다.

(Tip. Manifast.json 파일이 있는 디렉토리 내에 리소스 파일이라던지 사용된 HTML, JavaScript, CSS파일들을 함께 저장 해 둬야 한다.)

 

파일을 추가하거나 수정 하면 다시 프로그램을 로드 할 필요 없이 새로고침 버튼을 누르면 된다.