ARChon 分析之五 : chrome-app的開發方法
阿新 • • 發佈:2019-01-10
使用流程
- 在Chrome瀏覽器位址列目 開啟
chrome://extensions
-> 開啟Develop mode
—> 選擇Load unpacked
-> 選中專案資料夾 - 在Chrome瀏覽器位址列目 開啟
chrome://apps
-> 開啟專案圖示便可體驗剛寫的apps
專案檔案
專案資料夾的內容的根目錄下 必須 有一個 manifest.json
內容可以是這樣的。
{
"name": "Looks" ,
"description": "Yeshen's test app.",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["main.js"]
}
}
}
manifest 的規則見 -> manifest
其中 app/background/scripts 中可以執行js指令碼。
main.js
chrome.app.runtime.onLaunched.addListener(function () {
chrome. app.window.create('index.html', {
'outerBounds': {
width: 500,
height: 300
}
})
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Looks</title>
</head>
<body>
<h1>Hi there</ h1>
</body>
</html>
文件與概念
chrome瀏覽器為這個指令碼提供了程式執行環境:chrome.app.runtime 、chrome.app.window 視窗運用環境。
在使用流程2中,點選專案圖示,就會回撥 chrome.app.runtime.onLaunched
中註冊的方法,如果chrome瀏覽器異常關閉,重新開啟的時候,就會呼叫 chrome.app.runtime.onRestarted
中註冊的方法。
chrome.app.window
做了對系統視窗的抽象。提供了全域性獲取視窗資料的方法:
- create
- current
- getAll
- get
- canSetVisibleOnAllWorkspaces
全域性視窗生命週期管理
- onBoundsChanged
- onClosed
- onFullscreened
- onMaximized
- onMinimized
- onRestored
對於每一個視窗(AppWindow),可以有更細緻的管理:
- focus
- fullscreen
- isFullscreen
- minimize
- isMinimized
- maximize
- isMaximized
- restore
- moveTo
- resizeTo
- drawAttention
- clearAttention
- close
- show
- hide
- getBounds
- setBounds
- isAlwaysOnTop
- setAlwaysOnTop
- setVisibleOnAllWorkspaces
- contentWindow
- id
- innerBounds
- outerBounds
對照著方法約定來看,比android多了幾個在層疊視窗下需要處理的放大縮小的設計。
視窗建立的第一個引數是本地檔案地址,可以猜測,視窗的內容其實是一塊webview的畫版,它會去渲染webview中的內容。
其他
- 挺好的東西,可惜Chrome將取消對Windows,Mac和Linux上Chrome應用的支援。
- 如果你需要demo來熟悉的話 :
玩~