본문 바로가기

스크립트/Chrome

Chrome extension 만들기

[1. 개요]

구글 크롬 확장 프로그램은 구글 크롬 브라우저를 수정하는 브라우저 확장 프로그램이다.

HTML, CSS, JavaScript 를 기반으로 사용하여 작성한다. (위키백과)

 

 

[2. 필요한 파일]

  1. manifest.json (필수)
    - json 형식의 파일
    - 확장 프로그램의 이름과 버전과 같은 메타 데이터를 포함한다.
    - 실행 할 html 파일 등을 명시한다.
    - 기타 권한 등을 명시한다.
  2. .html (optional)
    - 아이콘 클릭 시 출력 할 페이지
  3. .css (optional)
    - css 파일
  4. .js (optional)
    - 프로그램의 기능을 위한 javascript 작성

 

[3. manifest.json]

# ref1 => https://github.com/GoogleChrome/chrome-extensions-samples

# ref2 => https://developer.chrome.com/docs/extensions/mv3/manifest/

 

ex1)

  • name
    확장 프로그램의 이름을 명시한다.

  • manifest_version
    # manifeset version 은 주로 2 또는 3을 작성한다.
    # 그런데, 이 버전에 따라서 manifest.json 파일 작성을 위한 keyword 가 조금 씩 차이가 있다.

  • background
    # 개별 페이지의 LifeCycle 과 관계없이 특정 작업을 하고 싶을 때 background 에서 처리한다.
    # manifest version2 를 기준으로 "scripts": [] 를 통해 javascript 파일을 추가 할 수 있다.
    # manifest version3 을 기준으로 "service_work" 를 사용한다

  • permissions
    # 플러그인에서 사용 될 권한들을 명시한다.
    # 주로 tabs, storage, webRequest 등을 사용한다.

ex2)

  • action
  • host_permissions
  •  

ex3)

  • commands
  • options_page
    # 옵션 페이지에 대해서 정의
    # 보통 permissions 에 stroage 를 추가하여, storage API 를 사용 해 설정을 저장하고 복구한다.

  • content_security_policy

  • browser_action
    # 확장 프로그램 설치 후 우측 상단에 표시되는 아이콘을 클릭했을 때 출력 할 팝업 창(html) 을 명시

  • content_scripts
    # 페이지마다 동작 할 스크립트를 정의
    # 해당 스크립트가 언제 실행되고
    # 어느 사이트에 적용될 것인지 설정 할 수 있다.
    # 파일 경로는 manifest.json 을 기준으로 한다.