google-chrome-extension 튜토리얼
google-chrome-extension 시작하기

비고

절대 최소 예

모든 Chrome 확장 프로그램은 압축 해제 된 확장 프로그램 (확장 파일을 포함하는 폴더)으로 시작합니다.

포함해야하는 파일 중 하나는 확장 기능의 기본 속성을 설명하는 manifest.json 입니다. 이 파일의 많은 속성은 선택 사항이지만 절대 최소 manifest.json 파일은 다음과 같습니다.

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0"
}

어딘가에 폴더 (예 : myExtension )를 만들고 위에 나열된대로 manifest.json 을 추가합니다.

그런 다음 Chrome에 확장 프로그램을로드해야합니다.

1. 메뉴 : 더보기 도구> 확장 프로그램을 통해 액세스 할 수있는 chrome://extensions/ page를 엽니 다.
2. 우측 상단의 확인란이 활성화되어 있지 않은 경우 개발자 모드 를 활성화하십시오.
3. 압축을 푼 확장 파일로드 ... 버튼을 클릭하고 생성 된 myExtension 폴더를 선택합니다.

그게 다야! 첫 번째 확장 프로그램은 Chrome에 의해로드됩니다.

물론 아직 아무 것도하지 않으므로 필요한 부분을 추가하기 위해 확장 아키텍처 개요 를 읽는 것이 좋습니다.

중요 : 내선 번호를 변경할 때 chrome://extensions/ 로 돌아가서 변경 한 후에 내선 번호에 대한 다시로드 링크를 눌러야합니다. 콘텐츠 스크립트의 경우 대상 페이지도 다시로드하십시오.

배경 페이지

배경 페이지는 배경 스크립트가 포함 된 암시 적 페이지입니다. 백그라운드 스크립트는 몇 가지 작업 또는 상태를 관리하는 하나의 장기 실행 스크립트입니다. 확장 프로그램의 수명 동안 존재하며 한 번에 하나의 인스턴스 만 활성화됩니다.

manifest.json 에서 이렇게 선언 할 수 있습니다 .json :

"background": {
    "scripts": ["background.js"]
}

scripts 속성에 나열된 각 파일을 포함하는 확장 시스템에서 백그라운드 페이지가 생성됩니다.

모든 허용 된 chrome.* API에 대한 액세스 권한이 있습니다.

배경 페이지 에는 항상 열린 영구 배경 페이지 와 필요에 따라 열리고 닫히는 이벤트 페이지 의 두 가지 유형이 있습니다.

백그라운드 페이지를 비 지속성으로 유지하려면 persistent -flag를 false로 설정하기 만하면됩니다.

"background": {
    "scripts": ["eventPage.js"],
    "persistent": false
}

이 백그라운드 스크립트는 청취자가 등록 된 이벤트가 시작된 경우에만 활성화됩니다. 일반적으로 등록을 위해 addListener 를 사용합니다.

예 : 앱 또는 확장 프로그램이 처음 설치되었습니다.

chrome.runtime.onInstalled.addListener(function() {
   console.log("The Extension is installed!");
});

콘텐츠 스크립트

콘텐츠 스크립트 는 일반 페이지와 함께 실행되는 확장 코드입니다.

그들은 웹 페이지의 DOM에 대한 완전한 액세스 권한을 가지고 있습니다 (실제로 페이지의 DOM에 액세스 할 수있는 확장 프로그램의 유일한 부분 임 ). 그러나 격리 된 세계 라는 개념 인 JavaScript 코드가 격리되어 있습니다. 각 확장 기능에는 다른 사람과 페이지에 보이지 않는 자체 컨텐트 스크립트 JavaScript 컨텍스트가있어 코드 충돌을 방지합니다.

manifest.json 예제 정의 :

  "content_scripts": [
    {
      "matches": ["http://www.stackoverflow.com/*"],
      "css": ["style.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ]

속성의 의미는 다음과 같습니다.

내용 스크립트는 사용 요구에 주입 될 수 chrome.tabs.executeScript 라고, 프로그래밍 주입을 .

또한보십시오

• 공식 문서 : 컨텐츠 스크립트
• 스택 오버플로 문서 : 콘텐츠 스크립트

옵션 페이지

옵션 페이지 는 사용자가 내선 번호에 대한 설정을 유지할 수 있도록합니다.

버전 2

Chrome 40부터 옵션 페이지를 chrome : // extensions에 사전 정의 된 대화 상자로 사용할 수 있습니다 .

manifest.json 에서 옵션 페이지를 정의하는 방법은 다음과 같습니다.

"options_ui": {
    "page": "options.html",
    "chrome_style": true
}

이 옵션 페이지는 대화 상자로 작동하며 options.html 이 표시되는 팝업으로 열립니다. chrome_style 은 스타일 일관성을 위해 Chrome 스타일 시트를 옵션 페이지에 적용합니다.

옵션은 확장 버튼 이나 chrome : // extensions 페이지의 상황에 맞는 메뉴를 통해 자동으로 표시됩니다.

프로그래밍 방식으로 옵션 페이지를 열 수도 있습니다 ( 예 : 팝업 UI).

chrome.runtime.openOptionsPage();

버전 1 ( 사용되지 않음 )

manifest.json 예제 정의 :

"options_page": "options.html"

options_ui 동작은 곧 버전 1 옵션 페이지에 적용되므로 버전 2를 사용하는 것이 좋습니다.

저장

일반적으로 설정을 유지해야하므로 chrome.storage API를 사용하는 것이 좋습니다. manifest.json 에서 다음과 같이 사용 권한을 선언 할 수 있습니다.

"permissions": [
   "storage"
]

공식 문서

• 옵션 페이지 - 버전 1
• 옵션 페이지 - 버전 2
• 스토리지 API

새 탭 만들기

확장 코드에서 필요한 사용 권한을 취소 한 경우 모든 chrome.* API를 사용할 수 있습니다. 또한 일부 API는 백그라운드 페이지에서만 사용할 수 있으며 일부 API는 콘텐츠 스크립트에서만 사용할 수 있습니다.

권한을 선언하는 대부분의 chrome.tabs 메서드를 사용할 수 있습니다. 이제 chrome.tabs.create 중점을 둡니다.

_{참고 : 새 탭은 popup 경고없이 열립니다.}

chrome.tabs.create({
       url:"http://stackoverflow.com",
       selected:false  // We open the tab in the background
})

공식 Chrome 개발자 의 탭 개체에 대해 자세히 알아볼 수 있습니다.