첫 번째 Hello World 확장 프로그램을 빌드하여 Chrome 확장 프로그램 개발의 기본사항을 알아보세요.
개요
'Hello World'를 만들어 보겠습니다 예를 들어 확장 프로그램을 로컬로 로드하고, 로그를 찾고, 기타 권장사항을 살펴봅니다.
Hello World
이 확장 프로그램은 사용자가 확장 프로그램 툴바 아이콘을 클릭하면 'Hello Extensions'를 표시합니다.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
Hello 확장 프로그램 팝업
먼저 확장 파일을 저장할 새 디렉터리를 만듭니다. 원하는 경우 전체 버전을 다운로드할 수 있습니다.
GitHub의 소스 코드
다음으로 이 디렉터리에 manifest.json라는 새 파일을 만듭니다. 이 JSON 파일은 확장 프로그램의
살펴봤습니다 예를 들어 대부분의 매니페스트 파일에는 매니페스트 파일에 포함된 매니페스트 파일을 선언하는 "action" 키가 포함되어 있습니다.
Chrome이 확장 프로그램의 작업 아이콘 및 Chrome에서 팝업에 표시할 HTML 페이지로 사용해야 하는
클릭했을 수 있습니다.
이제 확장 프로그램의 작업 아이콘 (툴바 아이콘)을 클릭하면 확장 프로그램에서 팝업을 표시합니다. 다음을 테스트할 수 있습니다.
Chrome에서 로컬로 로드하여 사용할 수 있습니다. 모든 파일이 저장되었는지 확인합니다.
압축해제된 확장 프로그램 로드
개발자 모드에서 압축해제된 확장 프로그램을 로드하려면 다음 단계를 따르세요.
새 탭에 chrome://extensions를 입력하여 확장 프로그램 페이지로 이동합니다. (기본적으로 chrome:// URL은 연결할 수 없습니다.)
또는 확장 프로그램 메뉴 퍼즐 버튼을 클릭하고 메뉴 하단에서 확장 프로그램 관리를 선택합니다.
또는 Chrome 메뉴를 클릭하고 도구 더보기 위로 마우스를 가져간 다음 확장 프로그램을 선택합니다.
개발자 모드 옆에 있는 전환 스위치를 클릭하여 개발자 모드를 사용 설정합니다.
압축해제된 확장 프로그램 로드 버튼을 클릭하고 확장 프로그램 디렉터리를 선택합니다.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
확장 프로그램 페이지 (chrome://extensions)
짜잔! 확장 프로그램이 설치되었습니다. 확장 프로그램 아이콘이
확장 프로그램을 위한 일반 아이콘이 생성됩니다.
확장 프로그램 고정
기본적으로 확장 프로그램을 로컬에서 로드하면 확장 프로그램 메뉴 ()에 표시됩니다. 개발 중에 확장 프로그램에 빠르게 액세스할 수 있도록 확장 프로그램을 툴바에 고정하세요.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
확장 프로그램 고정
확장 프로그램의 작업 아이콘 (툴바 아이콘)을 클릭합니다. 팝업이 표시됩니다.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
Hello World 확장 프로그램
확장 프로그램 새로고침
코드로 돌아가서 확장 프로그램의 이름을 'Hello Extensions of the world!'로 변경합니다. 선언됩니다