このチュートリアルでは、初めて Chrome アプリを作成する手順について説明します。Chrome アプリの構成も似ています。 現在のデベロッパーがマニフェストとパッケージ化の方法を認識できるように、拡張機能に変更を加えました。Google Chat の設定によっては、 後は、コードとアセットの ZIP ファイルを生成して、それを公開するだけです。 。
Chrome アプリには以下のコンポーネントがあります。
- マニフェストでは、アプリの概要、起動方法、その他の拡張機能について Chrome に指示できます。 付与できます。
- バックグラウンド スクリプトは、アプリ動作を管理するイベントページを作成するために使用されます。 サイクルです。
- Chrome アプリ パッケージにすべてのコードを含める必要があります。HTML、JS、CSS、ネイティブ クライアントなど 説明します。
- すべてのアイコンとその他のアセットもパッケージに含める必要があります。
ステップ 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: アイコンを作成する
以下のアイコンをアプリのフォルダにコピーします。
ステップ 5: アプリを起動する
フラグを有効にする
Chrome アプリ API の多くはまだ試験運用版であるため、試験運用版の API を有効にして、 ぜひお試しください。
- chrome://flags にアクセスします。
- [試験運用版の拡張機能 API] を見つけて、[有効にする] をクリックします。表示されます。
- Chrome を再起動します。
アプリの読み込み
アプリを読み込むには、Chrome の設定アイコンをクリックしてアプリと拡張機能の管理ページを開きます [ツール] >拡張機能。
[デベロッパー モード] チェックボックスがオンになっていることを確認します。
[パッケージ化されていない拡張機能を読み込む] ボタンをクリックし、アプリのフォルダに移動して [OK] をクリックします。
新しいタブを開いて起動する
アプリを読み込んだら、新しいタブページを開き、新しいアプリアイコンをクリックします。
または、コマンドラインから読み込んで起動する
イテレーションに役立つ Chrome のコマンドライン オプションは次のとおりです。
--load-and-launch-app=/path/to/app/は、指定されたパスから、パッケージ化されていないアプリケーションをインストールします。 起動します。アプリケーションがすでに実行中の場合は、更新された内容で再読み込みされます。--app-id=ajjhbohkjpincjgiieeomimlgnllは、Chrome にすでに読み込まれているアプリを起動します。残念ながら、 以前実行していたアプリを再起動しましたが、コンテンツを更新した新しいアプリが起動します。