이 가이드에서는 첫 번째 Chrome 앱을 만드는 과정을 안내합니다. Chrome 앱의 구조가 비슷함 확장 프로그램에 추가하여 현재 개발자들이 매니페스트와 패키징 방법을 인식할 수 있도록 해야 합니다. 코드를 게시하기 위해 코드와 애셋의 ZIP 파일을 생성하기만 하면 있습니다.
Chrome 앱에는 다음 구성요소가 포함됩니다.
- 매니페스트는 Chrome에 앱, 앱 정보, 실행 방법, 추가 정보를 알려줍니다. 권한을 부여할 수 있습니다
- 백그라운드 스크립트는 앱 수명 관리를 담당하는 이벤트 페이지를 만드는 데 사용됩니다. 있습니다.
- 모든 코드는 Chrome 앱 패키지에 포함되어야 합니다. 여기에는 HTML, JS, CSS, Native Client가 포함됩니다. 모듈을 마칩니다
- 모든 아이콘 및 기타 애셋도 패키지에 포함되어야 합니다.
1단계: 매니페스트 만들기
먼저 manifest.json 파일을 만듭니다. 형식: 매니페스트 파일에서
참조).
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
2단계: 백그라운드 스크립트 만들기
다음으로 다음 콘텐츠로 background.js라는 새 파일을 만듭니다.
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 400,
'height': 500
}
});
});
위의 샘플 코드에서 사용자가 앱을 시작하면 onLaunched 이벤트가 실행됩니다. 그것은 지정된 너비와 높이의 앱 창이 즉시 열립니다. 배경 스크립트에 추가 리스너, 창, 게시 메시지 및 실행 데이터가 포함될 수 있으며, 이 모든 항목은 이벤트 페이지에서 앱을 관리하는 데 사용됩니다.
3단계: 창 페이지 만들기
window.html 파일 생성:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Hello, world!</div>
</body>
</html>
4단계: 아이콘 만들기
다음 아이콘을 앱 폴더에 복사합니다.
- 계산기-16.png를 사용하면 됩니다.
- calculator-128.png
5단계: 앱 실행
플래그 사용 설정
대다수의 Chrome 앱 API는 아직 실험용이므로 다음과 같이 활용해 보세요.
- chrome://flags로 이동합니다.
- '실험용 확장 프로그램 API'를 찾아 '사용 설정'을 클릭합니다. 링크를 클릭합니다.
- Chrome을 다시 시작합니다.
앱 로드
앱을 로드하려면 Chrome 설정 아이콘 도구 > 확장 프로그램을 참고하세요.
개발자 모드 체크박스가 선택되어 있는지 확인합니다.
압축해제된 확장 프로그램 로드 버튼을 클릭하고 앱의 폴더로 이동하여 확인을 클릭합니다.
새 탭 열기 및 실행
앱을 로드했으면 새 탭 페이지를 열고 새 앱 아이콘을 클릭합니다.
또는 명령줄에서 로드 및 실행
Chrome의 다음 명령줄 옵션을 사용하면 반복하는 데 도움이 될 수 있습니다.
--load-and-launch-app=/path/to/app/는 지정된 경로에서 압축해제된 애플리케이션을 설치합니다. 시작합니다 애플리케이션이 이미 실행 중인 경우 업데이트된 콘텐츠로 다시 로드됩니다.--app-id=ajjhbohkjpincjgiieeomimlgnll는 Chrome에 이미 로드된 앱을 실행합니다. 하지만 이전에 실행 중인 앱을 다시 시작하지만 업데이트된 콘텐츠가 있는 새 앱이 실행됩니다.