Chrome 확장 | 기초

개요

Chrome 확장의 기초

Chrome 확장이란?

HTML, JavaScripot, CSS 등에 의해 브라우저의 기능을 변경·강화한다.
Chrome 확장에는 사용자 인터페이스가 거의 없습니다.

Chrome Web Store에 게시하기 위해 Chrome Developer Dashboard에서 Chrome 확장 프로그램을 배포할 수 있습니다.

구성

manifest file

manifest file은 JSON 형식의 메타데이터를 설명하는 파일입니다.
파일 이름은 manifest.json입니다.

manifest file이 다루는 항목

version

Chrome 확장 이름

Chrome 확장 설명

actions

browserAction : 주소 표시 줄의 오른쪽 메뉴 아이콘으로 설정합니다

pageAction : 주소 표시 줄 안에 메뉴 아이콘을 설정합니다

permissions

tabs : 브라우저의 탭 시스템에 대한 권한을 얻습니다.

activeTab : 사용자가 Chrome 확장을 실행할 때 활성 탭의 사용 권한을 가져옵니다.

샘플

내가 공개하고,
qiita (˘ω˘)노"Y☆Yヾ(˘ω˘) twitter
의 manifest file 입니다.

{
  "name": "qiita ( ˘ω˘)ﾉ\"Y☆Yヾ(˘ω˘ ) twitter",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "You can easily get one's qiita article.",
  "icons": {
    "16": "icons/icon-16.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "browser_action": {
    "default_icon": "/icons/icon-48.png"
  },
  "background": {
    "scripts": ["js/jquery-2.1.1.min.js", "js/background.js"]
  },
  "content_scripts": [{
    "matches": ["https://twitter.com/*"],
    "js": ["js/jquery-2.1.1.min.js", "js/contentscript.js"]
  }],
  "permissions": [
    "tabs"
  ]
}

매니페스트 파일의 자세한 형식은 아래를 참조하십시오.

매니페스트 파일 형식

Load the extension

Extension을 로드하는 방법.

chrome://extensions/ 열기

오른쪽 상단에 있는 '개발자 모드' 확인란 사용

패키징되지 않은 확장 프로그램 로드, 선택

직접 만든 Chrome 확장 선택

※드래그 & 드롭도 가능

완료

이제 내가 만든 Chrome 확장 프로그램을로드 할 수 있습니다.

외부 자료

What are extensions?