[Chrome Developers] Extensions - Getting Started Guides [크롬 개발자] 확장 프로그램 - Development basics 개발 기본 사항(번역본)

Chrome 확장 프로그램 개발의 기본 사항을 알아보세요.

게시일: 2022년 10월 4일 화요일

 

개요 Hello Extensions ( 튜토리얼 확장 프로그램 ) 압축을 푼 확장 프로그램 로드하기 확장 프로그램 고정하기 확장 프로그램 다시 로드하기 콘솔 로그 및 오류 찾기 콘솔 로그 오류 로그 확장 프로젝트 구조화하기 타입스크립트 사용하기 🚀 빌드를 시작할 준비가 되셨나요?

# 개요

 이 페이지에서는 확장 프로그램 개발 워크플로우에 대해 설명합니다. "Hello, Extensions" 예제를 만들고, 확장 프로그램을 로컬로 로드하고, 로그를 찾고, 다른 권장 사항을 살펴봅니다.

# Hello Extensions ( 튜토리얼 확장 프로그램 )

이 확장 프로그램은 사용자가 확장 프로그램 도구 모음 아이콘을 클릭하면 "Hello Extensions"를 표시합니다. 

Hello Extensions 의 팝업 화면

 

 확장 파일을 저장할 새 디렉터리를 만드는 것으로 시작하세요. 원하는 경우 GitHub에서 전체 소스 코드를 다운로드할 수 있습니다.

그런 다음 이 디렉터리에 manifest.json이라는 새 파일을 만들고 다음 코드를 추가합니다:

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

 이 JSON 객체는 확장 프로그램의 기능 및 구성을 설명합니다. 예를 들어, "action" 키는 확장 프로그램의 동작 아이콘으로 사용할 이미지와 확장 프로그램의 동작 아이콘을 클릭하면 팝업으로 표시할 HTML 페이지를 선언합니다. 아이콘을 디렉터리에 다운로드하고 "default_icon" 키에 있는 것과 일치하도록 이름을 변경하세요.

# 압축을 푼 확장 프로그램 로드하기
# 확장 프로그램 고정하기
# 확장 프로그램 다시 로드하기
# 콘솔 로그 및 오류 찾기
# 콘솔 로그
# 오류 로그
# 확장 프로젝트 구조화하기
# 타입스크립트 사용하기
# 🚀 빌드를 시작할 준비가 되셨나요?