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

Chrome 확장 프로그램 개발의 기본 개념을 살펴보세요.

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

 

목차 확장 프로그램이란? 웹 기술 Chrome 확장 프로그램 API 확장 프로그램 파일 확장 프로그램 개발하기 확장 프로그램 기능 디자인하기 확장 프로그램 배포하기 🚀 만들 준비가 되셨나요?

 

  이 페이지에서는 확장 프로그램이 무엇인지 설명하고 Chrome 확장 프로그램 개발에 대한 간략한 소개를 제공합니다. 초보자 튜토리얼 링크도 포함되어 있습니다.

 

# 확장 프로그램이란 ?

 Chrome 확장 프로그램은 Chrome 브라우저에 기능을 추가하여 다음과 같은 기능을 제공함으로써 검색 환경을 개선합니다:

• 생산성 도구.
• 웹 페이지 콘텐츠 강화.
• 정보 집계.

 이는 확장 프로그램이 할 수 있는 많은 일 중 몇 가지 예에 불과합니다. Chrome 웹스토어를 방문하여 게시된 수천 개의 확장 프로그램 예시를 확인하세요.

 

# 웹 기술

확장 프로그램은 웹 애플리케이션을 만드는 데 사용되는 것과 동일한 웹 기술로 작성됩니다:

• HTML은 콘텐츠 마크업 언어로 사용됩니다.
• CSS는 스타일링에 사용됩니다.
• JavaScript는 스크립팅과 로직에 사용됩니다.

계속 진행하기 전에 이러한 기술에 익숙해지는 것이 좋습니다.

 

# Chrome 확장 프로그램 API

 확장 프로그램은 브라우저에서 제공하는 모든 자바스크립트 API를 사용할 수 있습니다. 확장 프로그램이 웹 앱보다 더 강력한 이유는 Chrome API에 액세스할 수 있기 때문입니다. 다음은 확장 프로그램이 할 수 있는 일의 몇 가지 예입니다:

• 웹사이트의 기능이나 동작을 변경합니다.
• 사용자가 웹사이트 전반에서 정보를 수집하고 정리할 수 있도록 허용합니다.
• Chrome 개발자도구에 기능을 추가합니다.

전체 API 기능 목록은 확장 프로그램 개발 개요를 참조하세요.

 

# 확장 프로그램 파일

확장 프로그램에는 제공되는 기능에 따라 다른 파일이 포함됩니다. 다음은 가장 자주 사용되는 파일 중 일부입니다:

매니페스트
  확장 프로그램의 매니페스트는 특정 파일 이름을 가져야 하는 유일한 필수 파일입니다(예: manifest.json). 또한 확장 프로그램의 루트 디렉터리에 위치해야 합니다. 매니페스트는 중요한 메타데이터를 기록하고, 리소스를 정의하고, 권한을 선언하고, 백그라운드와 페이지에서 실행할 파일을 식별합니다.

서비스 워커
  확장 서비스 워커는 브라우저 이벤트를 처리하고 수신 대기합니다. 새 페이지로 이동, 북마크 제거, 탭 닫기 등 다양한 유형의 이벤트가 있습니다. 확장 서비스 워커는 모든 Chrome API를 사용할 수 있지만 웹페이지의 콘텐츠와 직접 상호작용할 수는 없으며 이는 콘텐츠 스크립트가 담당합니다.

콘텐츠 스크립트
  콘텐츠 스크립트는 웹페이지의 컨텍스트에서 자바스크립트를 실행합니다. 또한 삽입된 페이지의 DOM을 읽고 수정할 수도 있습니다. 콘텐츠 스크립트는 Chrome API의 일부만 사용할 수 있지만 확장 프로그램 서비스 워커와 메시지를 주고받음으로써 나머지에 간접적으로 액세스할 수 있습니다.

팝업 및 기타 페이지
  확장 프로그램에는 팝업, 옵션 페이지 및 기타 HTML 페이지와 같은 다양한 HTML 파일이 포함될 수 있습니다. 이러한 모든 페이지는 Chrome API에 액세스할 수 있습니다.

더 자세히 알아보려면 확장 프로그램 아키텍처 및 사용자 인터페이스 디자인하기를 참조하세요.

💡 모든 확장 프로그램에 팝업이 있나요?

 많은 확장 프로그램에서 사용자 환경을 사용자 지정하기 위해 팝업을 사용하지만, 반드시 필요한 것은 아닙니다. 예를 들어 읽기 시간 및 초점 모드 확장 프로그램 튜토리얼에는 팝업이 포함되어 있지 않습니다.

# 확장 프로그램 개발하기

 웹 애플리케이션과 확장 프로그램은 많은 동일한 기술을 공유하지만 확장 프로그램 개발 환경은 다릅니다. 개발 기본사항을 확인하여 "Hello, Extensions" 예제를 만들고 확장 프로그램 개발 워크플로우에 익숙해지세요.

 

# 확장 프로그램 기능 디자인하기

  확장 프로그램을 디자인하고 지원할 기능을 선택할 때 확장 프로그램이 좁게 정의되고 이해하기 쉬운 "단일 목적(single purpose)"을 충족하는지 확인하세요. 그래야 확장 프로그램을 Chrome 웹스토어를 통해 배포할 수 있습니다.

💡 "단일 목적(single purpose)"이란 정확히 무엇을 의미하나요?

"단일 목적"은 익스텐션의 두 가지 측면 중 하나를 의미할 수 있습니다:

1. 확장 프로그램의 단일 목적이 좁은 초점 영역 또는 주제로 제한될 수 있습니다. 예를 들어 "뉴스 헤드라인", "날씨", "비교 쇼핑" 등이 있습니다.

2. 또는 확장 프로그램은 좁은 브라우저 기능으로 제한된 단일 목적을 가질 수 있습니다. 예를 들어 '새 탭 페이지', '탭 관리' 또는 '검색 공급자' 등이 있습니다.

확장 프로그램의 목적에 관계없이 확장 프로그램에서 제공하는 경험은 사용자의 다른 설정과 기본 설정을 존중해야 합니다. 자세한 내용은 확장 프로그램 품질 가이드라인을 참조하세요.

# 확장 프로그램 배포하기

  Chrome 웹스토어에서 개발자 계정을 설정하여 확장 프로그램을 호스팅하고 배포할 수 있습니다. 확장 프로그램은 개발자 프로그램 정책을 준수해야 한다는 점에 유의하세요.

확장 프로그램을 배포하는 방법을 알아보려면 Chrome 웹 스토어에 게시하기를 참조하세요.

💡 조직 내에서만 확장 프로그램을 배포하려는 경우에는 어떻게 하나요?

일부 조직에서는 기업 정책을 사용하여 사용자 기기에 확장 프로그램을 설치합니다. 이러한 확장 프로그램은 Chrome 웹 스토어에서 가져오거나 조직의 웹 서버에서 호스팅할 수 있습니다. 엔터프라이즈 게시 옵션에서 두 가지 모두에 대해 알아보세요.

# 🚀 만들 준비가 되셨나요?

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

Extension	배우게 될 내용
Reading time	모든 페이지에 요소를 자동으로 삽입하는 방법
Focus Mode	확장 작업을 클릭한 후, 현재 페이지에서 코드를 실행하는 방법
Tabs Manager	브라우저 탭을 관리하는 팝업을 만드는 방법

이 튜토리얼은 Chrome 확장 프로그램 및 Chrome 웹 스토어 설명서를 읽을 때 더 나은 경험을 제공하기 위해 만들어졌습니다:

• 'Reading time' 은 각 문서 문서에 예상 읽기 시간을 추가합니다.
• 'Focus Mode'는 문서 콘텐츠에 집중할 수 있도록 페이지의 스타일을 변경합니다.
• 'Tabs Manager'를 사용하면 확장 문서 탭을 정리할 수 있습니다.

 

원본 : https://developer.chrome.com/docs/extensions/mv3/getstarted/extensions-101/