확장 프로그램에서 사용할 수 있는 사용자 인터페이스 요소 카탈로그입니다. 각 항목에는 다음이 포함됩니다.
- 요소의 이미지입니다 (해당하는 경우).
- 용도에 대한 설명입니다.
- 관련 인터페이스 요소 (해당하는 경우)
- 구현 안내 및 코드 샘플 링크
이러한 요소는 확장 기능을 호출하는 다양한 방법입니다. 모두 구현할 필요는 없습니다. 실제로 일부 사용 사례에서는 이러한 유형을 사용하지 않을 수도 있습니다. 예를 들어 더 짧은 링크는 단축키를 사용하여 표시된 URL에서 작동하고 단축된 링크를 프로그래매틱 방식으로 클립보드에 배치할 수 있습니다.
작업
액션이란 사용자가 광고 확장의 작업 아이콘을 클릭할 때 발생하는 동작입니다. 작업은 Action API를 사용하여 확장 프로그램 기능을 호출하거나 사용자가 여러 확장 프로그램 기능을 호출할 수 있는 팝업을 열 수 있습니다. 도움말을 통해 사용자에게 작업이 수행되는 작업을 안내합니다.
작업을 빌드하는 방법을 알아보려면 작업 구현을 참고하거나 작업 샘플을 확인하세요.
작업 아이콘
확장 프로그램을 표시하려면 아이콘이 하나 이상 있어야 합니다. 사용자는 아이콘을 클릭하여 작업을 호출하며, 해당 작업이 Action API를 사용하여 확장 프로그램 기능을 호출하거나 팝업을 열 수 있습니다.
또한 아이콘에 '배지'라는 라벨을 추가하여 확장 프로그램 상태 또는 사용자가 수행해야 하는 작업 등을 전달할 수 있습니다.
작업을 빌드하는 방법을 알아보려면 작업 구현을 참고하거나 작업 샘플을 확인하세요.
배지
배지는 확장 프로그램 상태 또는 사용자에게 필요한 작업 등을 나타내기 위해 작업 아이콘 위에 배치되는 서식이 지정된 텍스트입니다. chrome.action.setBadgeText()를 호출하여 배지의 텍스트를 설정하고 chrome.action.setBadgeBackgroundColor()를 호출하여 배너 색상을 설정할 수 있습니다.
작업을 빌드하는 방법은 작업 구현 또는 물 마시기 샘플을 참고하세요.
명령어
명령어는 확장 기능을 호출하는 키 조합입니다. manifest.json 파일에 키 조합을 정의하고 Commands API를 사용하여 여기에 응답합니다.
명령어를 구현하는 방법은 API 참조 또는 chrome.commands 샘플을 확인하세요.
컨텍스트 메뉴
마우스의 대체 클릭 (마우스 오른쪽 버튼 클릭이라고도 함)에 대한 컨텍스트 메뉴가 표시됩니다. Context Menus API를 사용하여 컨텍스트 메뉴를 정의합니다.
컨텍스트 메뉴 구현 방법을 알아보려면 컨텍스트 메뉴 샘플을 참고하세요.
검색주소창
Chrome 검색주소창을 사용하여 사용자와 상호작용할 수 있습니다. 사용자가 검색주소창에서 확장 정의 키워드를 입력하면 확장 프로그램이 검색주소창에서 사용자에게 표시되는 내용을 제어합니다. manifest.json에 키워드를 정의하고 Omnibox API를 사용하여 키워드에 응답합니다.
검색주소창을 재정의하는 방법은 검색주소창에서 작업 트리거 또는 빠른 API 참조 샘플을 참고하세요.
페이지 재정의
확장 프로그램은 다음 기본 제공 Chrome 페이지 중 하나를 재정의할 수 있습니다.
- 기록
- 새 탭
- 북마크
Chrome 페이지를 재정의하는 방법을 알아보려면 Chrome 페이지 재정의 또는 재정의 샘플을 참고하세요.
팝업
팝업은 사용자가 여러 확장 프로그램 기능을 호출할 수 있는 창을 표시하는 작업입니다. 팝업은 사용자가 작업 아이콘을 클릭한 경우에만 열 수 있습니다. 확장 프로그램에서 프로그래매틱 방식으로 팝업을 열 수 없습니다.
팝업을 빌드하는 방법은 팝업 추가를 참고하세요. 작업 샘플 중 하나를 통해 단계를 다운로드할 수도 있습니다.
측면 패널
측면 패널을 통해 사용자는 웹페이지와 함께 확장 프로그램 기능을 호출할 수 있습니다 (이미지 참고). 측면 패널은 단일 탭 또는 전체 창에 연결할 수 있습니다. 측면 패널은 Side Panel API를 사용하여 제어됩니다.
측면 패널을 빌드하는 방법을 알아보려면 측면 패널 사용 사례를 참고하거나 측면 패널 샘플을 확인하세요.
도움말
도움말은 사용자가 작업 아이콘에 마우스를 가져가면 확장 프로그램의 작업이 하는 작업을 보여줍니다. 기본적으로 도움말에는 확장 프로그램의 이름이 표시됩니다.
도움말을 추가하는 방법을 알아보려면 매니페스트 파일 "action" 키의 "default_title" 멤버를 사용하세요.
DevTools
DevTools Panels API를 사용하여 DevTools에 맞춤 패널 (DevTools에서 호출되는 탭)을 추가할 수 있습니다. 다른 DevTools API를 사용하면 창 및 네트워크 트래픽을 모니터링할 수 있습니다. DevTools 레코더 패널을 맞춤설정할 수도 있습니다. Chrome DevTools의 자체 Lighthouse 패널은 DevTools 확장 프로그램으로 시작되었습니다.
알림
확장 프로그램 Notifications API 또는 웹 플랫폼 Notifications API를 사용하여 사용자의 작업 표시줄에 메시지를 게시합니다.
알림을 사용하는 방법은 사용자에게 알림을 참조하세요.
테마
테마는 브라우저의 모양을 변경하는 특별한 종류의 확장 프로그램입니다. 테마는 일반 확장 프로그램처럼 패키징되지만 자바스크립트 또는 HTML 코드는 포함되지 않습니다.
테마를 만드는 방법은 테마란 무엇인가요?를 참고하세요.
사용자와 상호작용하는 다른 방법
이 섹션에서는 확장 프로그램이 사용자와 상호작용할 수 있는 다른 방법을 설명합니다. 기본 확장 프로그램에 반드시 필요하지는 않지만 확장 프로그램의 중요한 부분이 될 수 있습니다. 많은 사용자에게 이러한 기능 중 일부는 확장 프로그램을 사용하는 데 절대적으로 필요합니다.
접근성
많은 사용자에게 접근성은 말 그대로 사용자 인터페이스이며, 접근성 기능은 확장 프로그램과 상호작용하는 기본 수단으로 접근성이 필요하지 않은 사용자에게 유용할 수 있습니다. 확장 프로그램의 접근성 향상에 관한 기본사항을 알아보세요.
다국어 지원
사용자의 모국어로 소통하세요. 인터페이스의 국제화에 대해 알아보세요.