확장 프로그램이란?

확장 프로그램들은 브라우징 경험을 커스터마이징하는 작은 소프트웨어 프로그램이다. 이를 통해서 사용자는 Chrome의 기능과 동작을 개인의 필요나 기호에 따라 조정할 수 있다. 확장 프로그램은 HTMTL, CSS, JavaScript같은 웹 기술을 기반으로 한다.

확장 프로그램은 확실하게 정의되고 이해하기 쉬운 단일 목적을 충족시켜야 한다. 하나의 확장 프로그램은 모든 컴포넌트와 기능들이 공통 목적에 기여한다면, 여러 컴포넌트와 기능들을 가질 수 있다.

사용자 인터페이스(User Interface)는 최소한이면서 의도가 있어야 한다. 확장 프로그램은 아래 Google Mail Checker 확장 프로그램처럼 간단한 아이콘으로 전체 페이지를 덮어 쓸 수도(overriding) 있다.

확장 프로그램 파일들은 사용자가 다운로드하고 설치하는 .crx 패키지로 압축된다. 이 말은 확장 프로그램이 일반 웹앱과 다르게 웹의 컨텐츠에 의존하지 않는다는 것이다.

확장 프로그램은 Chrome 개발자 Dashboard를 통해서 배포되고, Chrome 웹 스토어에 퍼블리싱된다. 더 많은 정보를 원한다면 store 개발자 문서를 참고해라.

확장 프로그램 맛보기

확장 프로그램 퀵 스타트 예제를 통해서 확장 프로그램을 위한 단계를 밟아라. 확장 프로그램 파일을 저장하기 위한 디렉토리를 만들거나, 샘플 페이지에서 다운로드 받아서 시작하자.

이제, manifest.json 파일을 만들고, 다음 코드를 작성해라.

 {
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2
  }

대부분의 확장 프로그램은 manifest로 많은 것을 할 필요가 없지만, 모든 확장 프로그램은 manifest를 필요로 한다. 이 퀵 스타트 예제는, browser_action 필드에 선언된 팝업 파일과, 아이콘이 있다.

{
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    }
  }

여기서 hello_extensions.png를 다운받고, hello.html을 만들어라.

  <html>
    <body>
      <h1>Hello Extensions</h1>
    </body>
  </html>

이제 확장 프로그램은 아이콘이 클릭될 때, hello.html을 보여준다. 다음 단계는 manifest.json에 명령어를 포함시켜 키보드 단축키를 사용할 수 있게 만드는 것이다. 이번 단계는 재밌지만, 필수적이진 않다.

{
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    },
    "commands": {
      "_execute_browser_action": {
        "suggested_key": {
          "default": "Ctrl+Shift+F",
          "mac": "MacCtrl+Shift+F"
        },
        "description": "Opens hello.html"
      }
    }
  
  }

마지막 단계는 자신의 로컬 컴퓨터에 확장 프로그램을 설치하는 것이다.

크롬 브라우저 주소창에 chrome://extensions를 입력한다. 그리고 나서 액세스 허용 창에서 허용을 누른다.
토글 버튼을 개발자 모드로 변경한다.
압축해제된 확장 프로그램을 로드합니다 버튼을 누르고 새로 만든 확장 프로그램이 든 디렉토리를 선택한다.

khg0712/ChromeExtensionDocs.md

확장 프로그램이란?

확장 프로그램 맛보기