AngularJS로 앱 빌드

이 가이드에서는 AngularJS MVC 프레임워크를 사용하여 Chrome 앱을 빌드하는 방법을 안내합니다. 받는사람 Angular의 작동 방식을 보여주려면 프레임워크( Google Drive 업로더 소스 코드는 GitHub에서 확인할 수 있습니다.

앱 정보

Google Drive 업로더

사용자는 Google Drive 업로더를 사용하여 Google Drive 계정을 사용하고 HTML 드래그 앤 드롭 API를 사용하여 새 파일을 업로드할 수도 있습니다. 이것은 Google API 중 하나와 통신하는 앱을 빌드하는 좋은 예 이 경우 Google Drive API

업로더가 OAuth2를 사용하여 사용자 데이터에 액세스합니다. chrome.identity API는 로그인한 사용자를 위한 OAuth 토큰이므로, 힘든 작업은 모두 수행할 수 있습니다. 일단 오래 지속되고 앱은 Google Drive API를 사용하여 사용자의 데이터에 액세스합니다.

이 앱에서 사용하는 주요 기능:

  • AngularJS의 CSP 자동 감지
  • Google Drive API에서 가져온 파일 목록 렌더링
  • 파일 아이콘을 오프라인으로 저장하는 HTML5 파일 시스템 API
  • HTML5 드래그 앤 드롭: 데스크톱에서 새 파일을 가져오거나 업로드하기 위한 도구입니다.
  • 이미지 로드를 위한 XHR2, 교차 도메인
  • OAuth 승인을 위한 chrome.identity API
  • 앱의 자체 탐색 메뉴 디자인을 정의하는 Chromeless 프레임

매니페스트 생성

모든 Chrome 앱에는 Chrome을 실행하는 데 필요한 정보가 포함된 manifest.json 파일이 필요합니다. 앱 매니페스트에는 관련 메타데이터가 포함되며 앱이 필요로 하는 특별 권한이 나열되어 있습니다. 실행할 수 있습니다

업로더 매니페스트의 축소된 버전은 다음과 같습니다.

{
  "name": "Google Drive Uploader",
  "version": "0.0.1",
  "manifest_version": 2,
  "oauth2": {
    "client_id": "665859454684.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/drive"
    ]
  },
 ...
  "permissions": [
    "https://docs.google.com/feeds/",
    "https://docs.googleusercontent.com/",
    "https://spreadsheets.google.com/feeds/",
    "https://ssl.gstatic.com/",
    "https://www.googleapis.com/"
  ]
}

이 매니페스트의 가장 중요한 부분은 'oauth2'입니다. 및 'permissions' 섹션으로 이동합니다.

'oauth2' 섹션은 OAuth2의 필수 매개변수를 정의합니다. 생성 시 'client_id'가 있으면 클라이언트 ID 가져오기의 안내를 따릅니다. '범위' 나열 OAuth 토큰이 유효하게 될 승인 범위 (예: 앱에서 액세스).

'권한' 섹션에는 앱이 XHR2를 통해 액세스하는 URL이 포함되어 있습니다. URL 프리픽스는 어떤 교차 도메인 요청을 허용해야 하는지 알 수 있어야 합니다.

일정 페이지 만들기

모든 Chrome 앱에서 앱을 실행하고 시스템 이벤트에 응답하려면 백그라운드 스크립트/페이지가 필요합니다.

background.js 스크립트에서 드라이브 업로더는 기본 페이지로 연결되는 500x600픽셀 창을 엽니다. 또한 는 콘텐츠가 너무 산만해지지 않도록 창의 최소 높이와 너비를 지정합니다.

chrome.app.runtime.onLaunched.addListener(function(launchData) {
  chrome.app.window.create('../main.html', {
    id: "GDriveExample",
    bounds: {
      width: 500,
      height: 600
    },
    minWidth: 500,
    minHeight: 600,
    frame: 'none'
  });
});

창이 크롬이 제외된 창 (프레임: '없음')으로 생성됩니다. 기본적으로 창은 OS의 기본 닫기/펼치기/최소화 막대:

프레임이 없는 Google Drive 업로더

업로더는 frame: 'none'를 사용하여 창을 '빈 슬레이트'로 렌더링합니다. 맞춤 닫기를 생성합니다. main.html의 버튼:

맞춤 프레임이 포함된 Google Drive 업로더

전체 탐색 영역이 단일 레이어로 래핑되어