시작하기

확장은 다르지만 응집력있는 구성 요소로 만들어집니다. 구성 요소를 포함할 수 있습 배경은 스크립트,컨텐츠 스크립트는 옵션 페이지 UI 요소와 다양한 논리 파일이 있습니다. 확장 구성 요소는 HTML,CSS 및 JavaScript 와 같은 웹 개발 기술로 만들어집니다. 확장”의 구성 요소는 기능에 따라 달라지며 모든 옵션이 필요하지 않을 수 있습니다.,

이 확장 구축하는 데 사용할 수 있는 변경을 배경 색상의 모든 페이지에 developer.chrome.com. 그것은 많은 것을 사용할 것이 핵심 구성 요소를 제공개 데모의 관계입니다.

시작하려면 확장자”s 파일을 보관할 새 디렉토리를 작성하십시오.

완성 된 확장 프로그램은 여기에서 다운로드 할 수 있습니다.

매니페스트 만들기#

확장은 매니페스트로 시작합니다. manifest.json라는 파일을 만들고 다음 코드를 포함 시키거나 여기에서 파일을 다운로드하십시오.,

디렉토리를 들고 매니페스트 파일로 추가할 수 있는 확장에서 개발자 모드에서의 현재 상태입니다.

1. chrome://extensions로 이동하여 확장 관리 페이지를 엽니 다.
   • 의 확장자 관리 페이지를 열 수 있습을 클릭하여 Chrome 메뉴에 유혹을 통해 더 많은 도구를 선택하면 확장자.
2. 개발자 모드 옆의 토글 스위치를 클릭하여 개발자 모드를 활성화하십시오.
3. 압축 해제로드 버튼을 클릭하고 확장 디렉토리를 선택하십시오.

Ta-da!, 확장 프로그램이 성공적으로 설치되었습니다. 지 않기 때문에 아이콘이 포함되었 매니페스트에서는 일반 도구 모음 아이콘이 생성됩니다 확장.

명령어 추가#

확장 프로그램이 설치되었지만 명령어가 없습니다. 을 소개하는 배경은 스크립트 파일을 생성하여 제목은background.js,또는 다운로드,그리고 배치 내부에 확장자 디렉토리에 있습니다.

백그라운드 스크립트 및 기타 많은 중요한 구성 요소는 매니페스트에 등록해야합니다., 매니페스트에 백그라운드 스크립트를 등록하면 확장자에게 참조 할 파일과 해당 파일의 동작 방식을 알려줍니다.

장은 지금 알고 있다는 것을 포함한 비영구적 배경은 스크립트와 검사 등록된 파일에 대한 중요한 이벤트가 필요합니다.

이 확장은 설치되는 즉시 영구 변수의 정보가 필요합니다. 백그라운드 스크립트에runtime.onInstalled에 대한 청취 이벤트를 포함시켜 시작하십시오. onInstalled리스너 내에서 확장은 스토리지 API 를 사용하여 값을 설정합니다., 이렇게하면 여러 확장 구성 요소가 해당 값에 액세스하고 업데이트 할 수 있습니다.

스토리지 API 를 포함한 대부분의 Api 는 확장을 사용하려면 매니페스트의"permissions"필드에 등록해야 합니다.

확장 관리 페이지로 다시 이동하고 다시로드 링크를 클릭하십시오. 새 필드 인 inspect views 는 파란색 링크,배경 페이지를 사용할 수있게됩니다.,

을 보려면 링크를 클릭하십시오 배경은 스크립트”s 콘솔 로그,”The color is green.“

을 소개하는 사용자 인터페이스#

확장할 수 있는 많은 형식의 사용자 인터페이스,하지만 이 하나를 사용할 수 있습니다. 디렉토리에popup.html라는 제목의 파일을 만들고 추가하거나 여기에서 다운로드하십시오. 이 확장 프로그램은 버튼을 사용하여 배경색을 변경합니다.

백그라운드 스크립트와 마찬가지로이 파일은page_action아래의 매니페스트에서 팝업으로 지정해야합니다.,도구 모음 아이콘의

지정은default_icons필드의page_action에도 포함됩니다. 여기에서 이미지 폴더를 다운로드하고 압축을 푼 다음 확장 프로그램 디렉토리에 배치하십시오. 확장 프로그램에서 이미지 사용 방법을 알 수 있도록 매니페스트를 업데이트하십시오.

확장은 또한 확장 관리 페이지,권한 경고 및 파비콘에 이미지를 표시합니다. 이러한 이미지는icons아래의 매니페스트에 지정됩니다.,

이 단계에서 확장 프로그램을 다시로드하면 그레이 스케일 아이콘이 포함되지만 기능 차이는 포함되지 않습니다. 기 때문에page_action선언 매니페스트에서,그것은 확장자를 말할 때 브라우저는 사용자와 상호 작용할 수 있는popup.html.

추가 규칙을 선언을 바탕으로 스크립트declarativeContentAPI 내runtime.onInstalled수신기에 이벤트입니다.

확장은 해당 매니페스트에서declarativeContentAPI 에 액세스 할 수있는 권한이 필요합니다.,

브라우저가 지금 표시 풀 컬러 페이지 작업 아이콘에서는 브라우저 툴바 때 사용자 이동을 포함하는 URL 을"developer.chrome.com". 아이콘이 풀 컬러 일 때 사용자는이를 클릭하여 팝업을 볼 수 있습니다.html.

팝업 UI 의 마지막 단계는 버튼에 색상을 추가하는 것입니다. Create 및 라는 파일을 추가https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js다음과 같은 코드를 확장 디렉토리나 여기에서 다운로드.

이 코드는popup.html에서 버튼을 잡고 저장소에서 색상 값을 요청합니다., 그런 다음 버튼의 배경으로 색상을 적용합니다. https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js에 스크립트 태그를popup.html에 포함하십시오.

녹색 버튼을 보려면 확장을 다시로드하십시오.

층 로직#

확장을 이제 알고 있는 팝업이 사용자가 사용할 수 있에 developer.chrome.com 을 표시한 컬러 버튼이지만,필요에 대한 논리가 더 이상 사용자 상호 작용입니다. 다음 코드를 포함하려면https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js를 업데이트하십시오.,

업데이트 코드를 추가onclick이벤트에 버튼을 트리거 프로그래밍 방식으로 삽입된 콘텐츠 스크립트입니다. 이렇게하면 페이지의 배경색이 버튼과 같은 색으로 바뀝니다. 를 사용하여 프로그래밍 주입할 수 있는 사용자에 대한 호출의 콘텐츠 스크립트,대신 자동 삽입하는 원치 않는 코드 웹 페이지입니다.

매니페스트가 필요합니다activeTab권한을 허용 확장자는 임시 액세스를tabsAPI 를 사용합니다. 이렇게하면 확장 프로그램에서tabs.executeScript를 호출 할 수 있습니다.,

확장이 이제 완전히 작동합니다! 확장 프로그램을 다시로드하고,이 페이지를 새로 고침하고,팝업을 열고 버튼을 클릭하여 녹색으로 켜십시오! 그러나 일부 사용자는 배경을 다른 색상으로 변경하기를 원할 수 있습니다.

사용자에게 옵션 제공#

확장 프로그램은 현재 사용자가 배경을 녹색으로 변경할 수 있습니다. 옵션 페이지를 포함하면 사용자가 확장 기능을 더 잘 제어 할 수 있으므로 브라우징 환경을 더욱 사용자 정의 할 수 있습니다.,

시작을 만들어 파일이 디렉토리에서라는options.html포함한 다음 코드는 여기에서 다운로드하십시오.

등록 옵션 페이지에서는 매니페스트,

다시 확장과 상세정보를 클릭합니다.

스크롤 다운의 세부 사항 페이지를 확장 선택 옵션 옵션을 보려면 페이지고 있지만 그것이 나타나지 않습니다.

마지막 단계는 옵션 논리를 추가하는 것입니다., 다음 코드로 확장 디렉토리에options.js라는 파일을 만들거나 여기에서 다운로드하십시오.

네 가지 색상 옵션은 다음 onclick 이벤트 리스너와 옵션 페이지에 버튼으로 생성 제공됩니다. 사용자가 버튼을 클릭하면 확장 프로그램의 전역 저장소에서 색상 값을 업데이트합니다. 확장 프로그램의 모든 파일이 전역 저장소에서 색상 정보를 가져 오기 때문에 다른 값을 업데이트 할 필요가 없습니다.

축하합니다! 디렉토리는 이제 단순한,크롬 확장이기는하지만,완전한 기능을 보유하고 있습니다.다음은 무엇입니까?,

• 크롬 확장 프로그램 개요를 백업 비트,그리고 채우기에 많은 세부사항에 대한 확장을 건물에 일반,일부는 특정한 개념을 개발하고 싶을 것이 됩니다.
• 디버깅 자습서에서 확장 디버깅에 사용할 수 있는 옵션에 대해 알아봅니다.
• Chrome 확장 프로그램은 개방형 웹에서 사용할 수있는 것 이상의 강력한 Api 에 액세스 할 수 있습니다. 크롬.*Api 문서는 각 API 를 안내합니다.
• 개발자 가이드에는 고급 확장 생성과 관련된 문서 조각에 대한 수십 개의 추가 링크가 있습니다.,

---