Chrome Extention 개발하기

Chrome Extension API

크롬 익스텐션 개발 공식 문서를 참고하여 Momentum이나 Surfit같이 브라우저의 새 탭을 열었을 때, 익스텐션 페이지가 열리도록 하는 크롬 익스텐션을 개발하려 합니다.

크롬 익스텐션 개발은 JS로 하며, 여느 웹 개발과 동일합니다. 차이점은 브라우저 자체에서 제공하는 크롬 익스텐션 API를 추가로 사용하는 점에서 약간의 차이가 있습니다.

Manifest 만들기

크롬 익스텐션 개발은 manifest를 만드는 것에서부터 시작됩니다. 가장 먼저 프로젝트 생성을 위해 아래와 같이 폴더와 manifest.json을 생성합니다.

mkdir my-chrome-extension & cd $_
touch manifest.json

Manifest File Format에서 어떠한 키와 값을 쓸 수 있는지 확인 할 수 있습니다. 아래의 코드가 가장 기본이 되는 설정입니다. 이름, 버전 그리고 설명에 대해 정의합니다.

{
	"name": "Getting Started Example",
	"version": "1.0",
	"description": "Build an Extension!",
	"manifest_version": 2
}

manifest_version의 경우 Chrome 18을 기준으로 2를 사용하는 것을 권장합니다. 자세한 설명은 공식 문서에서 확인할 수 있습니다.

만들어진 manifest를 등록하면 쉽게 크롬 익스텐션을 만들 수 있습니다. 아래의 순서로 만들어진 manifest파일을 브라우저에 추가 해봅시다.

Extension Management page에 들어갑니다.
Developer mode를 토글하여 개발자 모드를 활성화합니다.
LOAD UNPACKED를 눌러 만든 프로젝트에 들어가 manifest.json이 담긴 프로젝트 폴더를 로드합니다.

유저 인터페이스

제공되는 유저 인터페이스는 아래와 같습니다.

수정 가능한 익스텐션 유저 인터페이스

Name	Tags
Browser Actions	Add an icon, tooltip, badge, and popup to the toolbar.
Commands	Add keyboard shortcuts that trigger actions.
Context Menus	Add items to Google Chrome's context menu.
Omnibox	Add keyword functionality to the address bar.
Override Pages	Create a version of the New Tab, Bookmark, or History page.
Page Actions	Dynamically display icons in the toolbar.

새 탭 페이지 덮어 씌우기
- Override Pages

Floating Button with Sidebar

Content Scripts

아래의 설정을 추가하면 모든 URL에 대해 아래의 contentScript.js와 myStyles.css를 추가한다.

"permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["myStyles.css"],
      "js": ["contentScript.js"]
    }
  ]

아래와 같이 DOM을 페이지에 추가할 수 있게 된다.

const p = document.createElement("p");
p.innerText = "Hello";
document.body.appendChild(p);

북마크 불러와서 저장
- Manifest for storage area
브라우저 북마크 관리
- chrome.bookmarks
컨텍스트 메뉴로 링크 저장할 수 있게
- chrome.contextMenus
화면 좌상단 혹은 우상단에 뱃지를 통해 리딩 리스트 사이드바 불러오기 기능 → 뱃지가 아니었음 .. . 쥬루룩
- chrome.browserAction#badge