이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Hello World 확장 프로그램

첫 번째 Hello World 확장 프로그램을 빌드하여 Chrome 확장 프로그램 개발의 기본사항을 알아보세요.

개요

'Hello World'를 만들어 보겠습니다 예를 들어 확장 프로그램을 로컬로 로드하고, 로그를 찾고, 기타 권장사항을 살펴봅니다.

Hello World

이 확장 프로그램은 사용자가 확장 프로그램 툴바 아이콘을 클릭하면 'Hello Extensions'를 표시합니다.

먼저 확장 파일을 저장할 새 디렉터리를 만듭니다. 원하는 경우 전체 버전을 다운로드할 수 있습니다. GitHub의 소스 코드

다음으로 이 디렉터리에 manifest.json라는 새 파일을 만듭니다. 이 JSON 파일은 확장 프로그램의 살펴봤습니다 예를 들어 대부분의 매니페스트 파일에는 매니페스트 파일에 포함된 매니페스트 파일을 선언하는 "action" 키가 포함되어 있습니다. Chrome이 확장 프로그램의 작업 아이콘 및 Chrome에서 팝업에 표시할 HTML 페이지로 사용해야 하는 클릭했을 수 있습니다.

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

디렉터리에 아이콘을 다운로드하고 "default_icon" 키에 있는 것과 일치하도록 이름을 변경해야 합니다.

팝업의 경우 hello.html라는 파일을 만들고 다음 코드를 추가합니다.

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

이제 확장 프로그램의 작업 아이콘 (툴바 아이콘)을 클릭하면 확장 프로그램에서 팝업을 표시합니다. 다음을 테스트할 수 있습니다. Chrome에서 로컬로 로드하여 사용할 수 있습니다. 모든 파일이 저장되었는지 확인합니다.

압축해제된 확장 프로그램 로드

개발자 모드에서 압축해제된 확장 프로그램을 로드하려면 다음 단계를 따르세요.

새 탭에 chrome://extensions를 입력하여 확장 프로그램 페이지로 이동합니다. (기본적으로 chrome:// URL은 연결할 수 없습니다.)
- 또는 확장 프로그램 메뉴 퍼즐 버튼을 클릭하고 메뉴 하단에서 확장 프로그램 관리를 선택합니다.
- 또는 Chrome 메뉴를 클릭하고 도구 더보기 위로 마우스를 가져간 다음 확장 프로그램을 선택합니다.
개발자 모드 옆에 있는 전환 스위치를 클릭하여 개발자 모드를 사용 설정합니다.
압축해제된 확장 프로그램 로드 버튼을 클릭하고 확장 프로그램 디렉터리를 선택합니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 확장 프로그램 페이지 (chrome://extensions)

짜잔! 확장 프로그램이 설치되었습니다. 확장 프로그램 아이콘이 확장 프로그램을 위한 일반 아이콘이 생성됩니다.

확장 프로그램 고정

기본적으로 확장 프로그램을 로컬에서 로드하면 확장 프로그램 메뉴 ()에 표시됩니다. 개발 중에 확장 프로그램에 빠르게 액세스할 수 있도록 확장 프로그램을 툴바에 고정하세요.

확장 프로그램의 작업 아이콘 (툴바 아이콘)을 클릭합니다. 팝업이 표시됩니다.

확장 프로그램 새로고침

코드로 돌아가서 확장 프로그램의 이름을 'Hello Extensions of the world!'로 변경합니다. 선언됩니다

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world!",
  ...
}

파일을 저장한 후 브라우저에서 변경사항을 보려면 확장 프로그램도 새로고침해야 합니다. 이동 확장 프로그램 페이지로 이동하고 on/off 전환 버튼 옆의 새로고침 아이콘을 클릭합니다.

확장 프로그램 새로고침

확장 프로그램을 새로고침해야 하는 경우

다음 표는 변경사항을 확인하기 위해 새로고침해야 하는 구성요소를 보여줍니다.

광고 확장 구성요소	확장 프로그램 새로고침 필요
매니페스트	예
서비스 워커	예
콘텐츠 스크립트	예 (및 호스트 페이지)
팝업	아니요
옵션 페이지	아니요
기타 확장 HTML 페이지	아니요

콘솔 로그 및 오류 찾기

콘솔 로그

개발 중에는 브라우저 콘솔 로그에 액세스하여 코드를 디버그할 수 있습니다. 이 경우 팝업의 로그를 찾습니다 먼저 hello.html에 스크립트 태그를 추가합니다.

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

popup.js 파일을 만들고 다음 코드를 추가합니다.

console.log("This is a popup!")

콘솔에 기록된 이 메시지를 확인하려면 다음 단계를 따르세요.

팝업을 엽니다.
팝업을 마우스 오른쪽 버튼으로 클릭합니다.
검사를 선택합니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 팝업 검사
DevTools에서 콘솔 패널로 이동합니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 팝업 검사

오류 로그

이제 확장 프로그램을 중단해 보겠습니다. popup.js에서 닫는 따옴표를 삭제하면 됩니다.

console.log("This is a popup!) // ❌ broken code

확장 프로그램 페이지로 이동하여 팝업을 엽니다. 오류 버튼이 표시됩니다.

오류 버튼이 있는 확장 프로그램 페이지

오류 버튼을 클릭하여 오류에 대해 자세히 알아봅니다.

확장 프로그램 오류 세부정보

서비스 워커, 옵션 페이지, 콘텐츠 스크립트 디버깅에 대한 자세한 내용은 디버깅을 참조하세요. 확장 프로그램에 대해 자세히 알아보세요.

확장 프로젝트 구조화

확장 프로젝트를 구조화하는 방법에는 여러 가지가 있습니다. 유일한 전제 조건은 manifest.json 파일을 생성합니다.

확장 프로그램 폴더의 콘텐츠: manifest.json, background.js, 스크립트 폴더, 팝업 폴더, 이미지 폴더

TypeScript 사용

VSCode 또는 Atom과 같은 코드 편집기를 사용하여 개발하는 경우 npm을 사용할 수 있습니다. chrome-types 패키지로 Chrome용 자동 완성 기능 이용 API를 참고하세요. Chromium 소스 코드가 업데이트되면 이 npm 패키지는 자동으로 업데이트됩니다. 있습니다.

🚀 빌드를 시작할 준비가 되셨나요?

다음 튜토리얼 중 하나를 선택하여 확장 프로그램 학습 여정을 시작하세요.

확장	학습할 내용
모든 페이지에서 스크립트 실행	모든 페이지에 요소를 자동으로 삽입하기 위해
활성 탭에 스크립트 삽입	확장 프로그램 작업을 클릭한 후 현재 페이지에서 코드를 실행합니다.
탭 관리하기	브라우저 탭을 관리하는 팝업을 만들기 위해
서비스 워커로 이벤트 처리	확장 프로그램 서비스 워커가 이벤트를 처리하는 방법