AngularJS を使用したアプリの作成

このガイドでは、AngularJS MVC フレームワークを使用して Chrome アプリを作成する方法について説明します。宛先 ここでは、Angular のフレームワークを使用して構築された実際のアプリ、 Google ドライブ アップローダーソースコードは GitHub から入手できます。

アプリについて

Google ドライブ アップローダー

Google ドライブ アップローダーを使用すると、 HTML ドラッグ&ドロップ API を使用して新しいファイルをアップロードできます。Google Google の API の 1 つとやり取りするアプリをビルドする良い例です。この場合は、Google Drive API

アップローダーは OAuth2 を使用してユーザーのデータにアクセスします。chrome.identity API は これで作業は完了です。ライフタイム バリューが アクセス トークンを取得すると、アプリは Google Drive API を使用してユーザーのデータにアクセスします。

このアプリが使用する主な機能:

  • CSP 向けの AngularJS の自動検出
  • Google Drive API から取得したファイルのリストをレンダリングする
  • HTML5 Filesystem API でファイル アイコンをオフラインで保存
  • HTML5 ドラッグ&ドロップ: デスクトップから新しいファイルをインポート/アップロード
  • XHR2 による画像の読み込み、クロスドメイン
  • chrome.identity API: OAuth 認証用
  • アプリ独自のナビゲーション バーのデザインを定義するクロムレス フレーム

マニフェストの作成

すべての 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」です。「権限」できます。

「oauth2」セクションでは、OAuth2 で必要なパラメータを定義しています。新しい P-MAX キャンペーンを client_id を取得します。「スコープ」列挙する OAuth トークンが有効になる認証スコープ(アプリが許可または拒否する API など) アクセスなど)。

「権限」はセクションには、アプリが XHR2 経由でアクセスする URL が含まれています。URL 接頭辞は、 これは、許可するクロスドメインのリクエストを Chrome が認識するために必要です。

イベントページの作成

すべての 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'
  });
});

ウィンドウは、クロムレス ウィンドウとして作成されます(フレーム: 「none」)。デフォルトでは、ウィンドウは OS のデフォルトの閉じる/展開/最小化バー:

Google ドライブ アップローダー(フレームなし)

アップローダーは frame: 'none' を使用してウィンドウを「白紙」としてレンダリングします。カスタムの「閉じる」を作成します main.html のボタン:

Google ドライブ アップローダー(カスタム フレーム付き)

ナビゲーション領域全体が