확장 프로그램은 탐색 환경을 사용자 지정하는 소규모 소프트웨어 프로그램입니다. 이를 통해 사용자는 개인의 필요나 선호도에 맞게 Chrome 기능과 동작을 맞춤설정할 수 있습니다. 웹을 기반으로 구축 HTML, JavaScript, CSS와 같은 기술이 포함됩니다.
확장 프로그램은 좁게 정의되고 이해하기 쉬운 단일 목적을 충족해야 합니다. 가 하나의 확장 프로그램에 여러 구성요소와 다양한 기능을 포함할 수 있습니다. 공통의 목적을 달성하는 데 기여합니다
사용자 인터페이스는 최소화되고 인텐트가 있어야 합니다. Google 위에 표시된 메일 검사기 확장 프로그램을 사용하여 전체 페이지를 재정의합니다.
확장 프로그램 파일은 사용자가 다운로드하여 설치하는 단일 .crx
패키지로 압축됩니다. 이
일반 웹 앱과 달리 확장 프로그램이 웹의 콘텐츠에 의존하지 않는다는 의미입니다.
확장 프로그램은 Chrome 개발자 대시보드를 통해 배포되며 Chrome 웹 스토어로 이동합니다. 자세한 내용은 스토어 개발자 문서를 참고하세요.
Hello 확장 프로그램
간단한 Hello 확장 프로그램의 예를 통해 확장 프로그램을 시작해 보세요. 먼저 새 포드를 만들고 디렉터리에 확장 프로그램의 파일을 저장하거나 샘플 페이지에서 다운로드합니다.
다음으로 manifest.json
라는 파일을 추가하고 다음 코드를 포함합니다.
{
"name": "Hello Extensions",
"description" : "Base Level Extension",
"version": "1.0",
"manifest_version": 2
}
모든 확장 프로그램에는 매니페스트가 필요하지만 대부분의 확장 프로그램은 매니페스트만으로는 많은 작업을 수행하지 않습니다.
이 빠른 시작을 위해 확장 프로그램에는
browser_action
필드:
{
"name": "Hello Extensions",
"description" : "Base Level Extension",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
여기에서 hello_extensions.png
를 다운로드한 다음 제목이 hello.html
인 파일을 만듭니다.
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
이제 아이콘을 클릭하면 확장 프로그램에서 hello.html
를 표시합니다. 다음 단계는
단축키를 사용 설정하는 manifest.json
명령어입니다. 이 단계는 재미있지만
있습니다.
{
"name": "Hello Extensions",
"description" : "Base Level Extension",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
},
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"
},
"description": "Opens hello.html"
}
}
}
마지막 단계는 로컬 머신에 확장 프로그램을 설치하는 것입니다.
- 브라우저에서
chrome://extensions
페이지로 이동합니다. 다음을 클릭하여 이 페이지에 액세스할 수도 있습니다. 검색주소창 오른쪽 상단에 있는 Chrome 메뉴에서 도구 더보기 위로 마우스를 가져가서 확장 프로그램. - 개발자 모드 옆의 체크박스를 선택합니다.
- 압축해제된 확장 프로그램 로드를 클릭하고 'Hello Extensions' 디렉터리를 선택합니다. 확장자가 포함됩니다.
축하합니다. 이제 hello_world.png
아이콘을 클릭하여 팝업 기반 확장 프로그램을 사용할 수 있습니다.
키보드에서 Ctrl+Shift+F
키를 눌러도 됩니다.
다음 단계
- 시작하기 튜토리얼에 따르기
- 개요 읽어보기
- Chromium 블로그에서 최신 정보 확인
- chromium-extensions 그룹을 구독합니다.