Chrome 확장 프로그램 개발 여정을 시작하는 새로운 방법

이 게시물에서는 Chrome 확장 프로그램 시작 환경의 몇 가지 중요한 개선사항과 이 꿈에 참여할 수 있는 몇 가지 방법을 공유하고자 합니다.

이전 가이드

이전에는 Chrome 확장 프로그램 시작하기 튜토리얼이 사용자가 확장 프로그램 팝업의 버튼을 클릭할 때 현재 페이지의 배경 색상을 변경하는 기본 확장 프로그램 예시였습니다. 또한 4가지 색상 중 하나를 선택할 수 있는 옵션 페이지도 포함되어 있었습니다.

이 기본 예에서는 실제 확장 프로그램에 포함된 인기 있는 기능을 추가하는 방법을 보여주지 않았습니다. 이제 새롭게 단장할 때가 되었습니다.

새로운 접근 방식

Google은 개발자가 Chrome 확장 프로그램 학습 여정을 시작할 때 Google 문서를 활용한다는 점을 잘 알고 있습니다. Google의 목표는 접근하기 쉽고 초보자 친화적이며 관련성 높은 개발자 과정을 제공하는 것입니다. 기존 튜토리얼 예시를 개선하려고 하기보다는 처음부터 시작하기 위해

새롭게 개선된 시작하기 컬렉션을 소개합니다.

확장 프로그램 101
웹 기술, 일반적으로 사용되는 확장 프로그램 구성요소 등 Chrome 확장 프로그램 개발의 몇 가지 기본 개념을 간략히 다룹니다. 또한 Chrome 웹 스토어에서 확장 프로그램을 설계하고 배포할 때 유의해야 할 사항도 포함되어 있습니다.
개발 기본사항
Hello, Extensions 예시를 만들어 확장 프로그램 개발 워크플로를 소개합니다. 개발 중에 확장 프로그램을 로드하고, 로그와 오류를 찾고, 프로젝트 구조를 선택하고, TypeScript를 사용하는 방법을 안내합니다.
읽기 시간 튜토리얼
기사 읽기를 완료하는 데 필요한 시간을 알 수 있어 좋습니다. '읽기 시간'에서는 모든 확장 프로그램 문서 페이지에 예상 읽기 시간이 포함된 요소를 삽입하는 방법을 설명합니다.
집중 모드 튜토리얼
페이지에서 불필요한 요소를 삭제하면 가장 관련성 높은 정보에 집중할 수 있습니다. 포커스 모드는 페이지 스타일을 변경하고 방해 요소를 숨기는 방법을 보여줍니다.
탭 관리자 튜토리얼
확장 프로그램 개발을 조사하는 동안 여러 창에 여러 문서 탭이 열릴 수 있습니다. 탭 관리자는 Chrome 확장 프로그램 및 Chrome 웹 스토어 문서 탭을 정리합니다.

이 튜토리얼에서는 실제 확장 프로그램을 빌드하는 방법을 알려줄 뿐만 아니라 개발 팁과 권장사항도 공유합니다. 또한 이러한 확장 프로그램을 사용하면 확장 프로그램 문서를 읽는 동안 환경이 개선됩니다.

참고사항

각 튜토리얼에는 다음 섹션이 포함됩니다.

  • 확장 프로그램에서 실행할 작업입니다.
  • 다룰 강의
  • 시작하기 전에 알아야 할 사항
  • 확장 프로그램을 빌드하는 단계별 안내
  • 확장 프로그램을 로드하고 테스트하는 방법

도전하고 싶은 경우 확장 프로그램에 다른 기능을 맞춤설정하거나 추가하는 방법에 관한 몇 가지 아이디어가 포함된 섹션을 참고하세요.

여러분의 도움이 필요합니다

연락을 기다리겠습니다. 이 가이드에 잘못되었거나 명확하지 않은 부분이 있으면 GitHub 저장소에서 버그를 신고하세요.

이 새로운 시작 가이드는 이전 가이드에 비해 크게 개선되었다고 생각하지만 여기서 그치지 않을 것입니다. 모든 확장 프로그램 개발자에게 더 나은 서비스를 제공하기 위해 문서를 개선하고 확장해 나가기 위해 계속 노력할 것입니다.


사진: 바르단 파피키안(Unsplash 제공)