近日對(duì)谷歌擴(kuò)展以及應(yīng)用很感興趣鹰贵，于是研究了下官方文檔，特寫此文記錄一下畜晰，若有錯(cuò)誤砾莱，敬請(qǐng)指教瑞筐，如需轉(zhuǎn)載凄鼻，請(qǐng)說(shuō)明出處。
1.技術(shù)需求
怎么用html css javascript這些前端技術(shù)來(lái)編寫一個(gè)桌面應(yīng)用聚假，說(shuō)到這块蚌，不得不說(shuō)谷歌瀏覽器這款偉大的產(chǎn)品，其自行開(kāi)發(fā)的V8引擎大大提升了javascript在chrome中的執(zhí)行效率膘格，甚至可以將谷歌瀏覽器想象成一個(gè)操作系統(tǒng)峭范，而chrome app則是運(yùn)行在其上的應(yīng)用。
chrome app開(kāi)發(fā)十分迅速瘪贱，是一個(gè)非常好玩的技術(shù)纱控，下面就以網(wǎng)頁(yè)版的簡(jiǎn)書為例子辆毡，快速將其打造成一個(gè)桌面應(yīng)用，而且還是兼容的呢甜害。
文檔以及書籍參考：
官方文檔：chrome apps about_apps
參考書籍：Chrome擴(kuò)展及應(yīng)用開(kāi)發(fā)
利用谷歌直接將一個(gè)網(wǎng)頁(yè)打造成桌面應(yīng)用實(shí)現(xiàn)起來(lái)可謂十分輕松舶掖，開(kāi)發(fā)者只需要掌握html css javascript前端技術(shù)，再結(jié)合官方文檔尔店，基本上都能快速掌握眨攘。
所以，只要你有基本的html css javascript技術(shù)嚣州，就可以很快的開(kāi)發(fā)出有自己特色的簡(jiǎn)述桌面應(yīng)用鲫售。反之，請(qǐng)去百度之该肴，很快就可以基本掌握情竹。
對(duì)于本篇文章的目的：快速將網(wǎng)頁(yè)版簡(jiǎn)書打造成桌面應(yīng)用，只需要掌握Webview Tag匀哄，便可完成簡(jiǎn)書的桌面應(yīng)用鲤妥。
在進(jìn)行代碼層次的說(shuō)明之前，先上一張完成后的效果圖：
2.應(yīng)用說(shuō)明
在編寫應(yīng)用之前拱雏，請(qǐng)容我先解釋一下chrome app應(yīng)該包含哪些文件棉安，其由以下部分組成。
- manifest文件將應(yīng)用的一些信息提供給Chrome:這個(gè)應(yīng)用是铸抑？它怎么運(yùn)行贡耽？需要哪些額外的權(quán)限？
- background script用來(lái)創(chuàng)建一個(gè)事件頁(yè)面然后可靠地管理軟件生命周期
- 所有代碼必須包含在
chrome app的包內(nèi)鹊汛，其中包含html css js以及Native Client模塊蒲赂。- 所有icons和其他有利資源最好也包括在包里面
- 說(shuō)明：若想深入了解，可以去看官方文檔：chrome apps first_app
知道了這些后刁憋，我們就可以看一下代碼的目錄結(jié)構(gòu)滥嘴，進(jìn)行了解，具體再一一說(shuō)明：
2.代碼說(shuō)明
可以看到圖中分別有css/ images/ js/文件夾以及main.html manifest.json文件至耻，不過(guò)最主要的是manifest.json main.html background.js這三個(gè)文件若皱，下面的敘述也是圍繞這三個(gè)文件來(lái)做講解。
2.1.manifest.json
manifest.json文件的作用在上面的應(yīng)用說(shuō)明中已經(jīng)解釋得很清楚尘颓，其實(shí)不僅僅是chrome app走触，谷歌擴(kuò)展也需要一個(gè)json格式的manifest，所以manifest.json文件很重要疤苹。
代碼如下所示：
{
"app":{
"background":{
"scripts":["js/background.js"]
}
},
"manifest_version":2,
"name":"簡(jiǎn)書",
"version":"0.1.0",
"description":"谷歌應(yīng)用版的簡(jiǎn)書互广，對(duì)網(wǎng)頁(yè)版本作出一些優(yōu)化#__#,添加到桌面方便啟動(dòng).",
"icons": {
"16": "images/ico_16.png",
"48": "images/ico_48.png",
"128": "images/ico_128.png"
},
//權(quán)限
"permissions":[//這里需要簡(jiǎn)書網(wǎng)頁(yè)域名的權(quán)限以及webview調(diào)用簡(jiǎn)書頁(yè)面顯示到新窗口
"http://www.reibang.com/*",
"webview"
]
}
上面字段意思表達(dá)地很清楚，我們來(lái)看看:
app //Event Page會(huì)監(jiān)聽(tīng)onLaunched事件，隨即創(chuàng)建窗口惫皱，應(yīng)用介紹有說(shuō)這個(gè)作用像樊，這里意思是app下面的background域會(huì)通過(guò)js/background.js創(chuàng)建窗口。
manifest_version //整數(shù)表示文件自身格式的版本號(hào),按照這個(gè)寫就好了
name //應(yīng)用名稱
version //版本號(hào)
其他都是某字段對(duì)應(yīng)的意思旅敷，這里不一一解釋
如果你想更加詳細(xì)地了解凶硅，我不會(huì)說(shuō)360全部都翻譯了谷歌的官方文檔，請(qǐng)移步manifest詳細(xì)說(shuō)明扫皱。
2.2.main.html
定義好manifest.json文件之后足绅，現(xiàn)在瀏覽器知道了我們的應(yīng)用叫什么，怎么運(yùn)行的韩脑，需要哪些額外的權(quán)限氢妈。
那么，應(yīng)用啟動(dòng)后段多，應(yīng)用會(huì)通過(guò)Event Page監(jiān)聽(tīng)onLaunched事件首量，然后創(chuàng)建一個(gè)窗口，那么窗口顯示什么界面呢进苍？這個(gè)界面就是main.html文件加缘。
這個(gè)界面主要看開(kāi)發(fā)者的心情，想怎么寫就怎么寫觉啊，但是不要忘了引入background.js文件拣宏，其作用下面再說(shuō)。
代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)書桌面版</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/control.js"></script>
</head>
<body>
<div id="title_bar">簡(jiǎn)書--找回文字的力量
<a id="close"></a>
<a id="minimize"></a>
</div>
<webview id="web_content"></webview>
</body>
</html>
main.html文件里面的代碼結(jié)構(gòu)十分簡(jiǎn)單杠人，這個(gè)界面可以分為三個(gè)部分勋乾，標(biāo)題、控制按鈕（關(guān)閉以及最小化）嗡善、webview顯示的主體內(nèi)容部分辑莫，當(dāng)該窗口顯示之后，若想對(duì)窗口進(jìn)行樣式上的修改罩引，可以加一個(gè) css文件各吨，我這里是這樣定義的：
//添加邊框
body{
margin: 0;
padding: 0;
border: #EEE 1px solid;
}
//標(biāo)題欄部分樣式
#title_bar{
-webkit-app-region:drag; //作用是讓鼠標(biāo)可以拖動(dòng)窗口界面
height: 26px;
line-height: 26px;
font-size: 15px;
background-color: #EEE;
padding: 0 10px;
box-sizing: border-box;
}
//控制圖標(biāo)樣式
#title_bar a{
position: relative;
-webkit-app-region:no-drag; //讓控制圖標(biāo)可以被點(diǎn)擊
display: inline-block;
float: right;
height: 14px;
width: 14px;
margin: 6px;
border: gray 1px solid;
box-sizing: border-box;
border-radius: 7px;
}
#close:hover{
background-color: #cf4646;
}
#minimize:hover{
background-color: #46B6CF;
}
/**
* show content
* 這定義了webview調(diào)用簡(jiǎn)書網(wǎng)頁(yè)頁(yè)面后的寬高
*/
#web_content{
width: 100%;
height: 614px;
}
好了，窗口的樣式大概寫出來(lái)了袁铐，下面要做的就是怎么將這個(gè)頁(yè)面作為窗口顯示出來(lái)揭蜒，這就要看background.js文件了。
2.3.background.js
簡(jiǎn)單來(lái)說(shuō)昭躺，background.js會(huì)指定應(yīng)用啟動(dòng)是創(chuàng)建的窗口忌锯，上代碼：
//Event Page監(jiān)聽(tīng)onLaunched事件
chrome.app.runtime.onLaunched.addListener(function(){
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var width = 1200;
var height = 640;
var main_window = chrome.app.window.get('main');
if (main_window) {
main_window.show();
}else{
//這里就創(chuàng)建了一個(gè)id是main的新窗口，窗口內(nèi)容是main.html
chrome.app.window.create("main.html",{
id:'main',
bounds:{
width:width,
height:height,
left: Math.round((screenWidth-width)/2),
top: Math.round((screenHeight-height)/2)
},
minHeight: height,
minWidth: width,
maxHeight: height,
maxWidth: width,
frame: 'none'//不顯示標(biāo)題欄目领炫，因?yàn)槲覀冏约河袑憳?biāo)題樣式，不用使用默認(rèn)的张咳。
});
}
});
通過(guò)注釋就會(huì)明白這段代碼的意思帝洪，現(xiàn)在似舵，我們的應(yīng)用就已經(jīng)創(chuàng)建完成了，我們可以看看界面是什么樣子了葱峡。
不過(guò)在這之前砚哗，我們先要將應(yīng)用加載到谷歌瀏覽器中，請(qǐng)打開(kāi)谷歌瀏覽器砰奕，地址欄輸入chrome://extensions/蛛芥，打開(kāi)開(kāi)發(fā)者模式，點(diǎn)擊加載已解壓的擴(kuò)展程序...军援，最后加載你創(chuàng)建的應(yīng)用包仅淑，加載成功后如下所示：
點(diǎn)擊啟動(dòng)后，請(qǐng)看：
main.html很好地顯示出來(lái)了胸哥，其中標(biāo)題（簡(jiǎn)書--找回文字的力量）涯竟，兩個(gè)控制按鈕，中間一大快空白部分（空白部分是即將顯示的主題內(nèi)容）都是我們剛才定義的空厌。
現(xiàn)在我們就差最后一步就可以完成這個(gè)簡(jiǎn)書桌面應(yīng)用了庐船，就是利用Webview Tag調(diào)用簡(jiǎn)書網(wǎng)頁(yè)頁(yè)面，將其顯示在main.html的<webview id="web_content"></webview>中嘲更，我將具體代碼寫在了js/control.js中筐钟，如下：
//webwiew methods
window.onload = function(){
var web_content = document.getElementById('web_content');
web_content.src="http://www.reibang.com/";//定義獲取的網(wǎng)頁(yè)頁(yè)面
//在應(yīng)用顯示之前加載以下文件，但是應(yīng)用加載出來(lái)后赋朦，在應(yīng)用里面某些界面還需要腳本盗棵，所以下面又增加了一個(gè)方法。
web_content.addContentScripts([
{
name: 'jianshu',
matches: ['http://*.jianshu.com/*'],
css: { files: ['css/jianshu.css'] },
js: { files: ['js/jquery.1.11.3.min.js','js/jianshu.js'] },
run_at: 'document_start'
}]);
//在每次頁(yè)面加載后加入以下文件
web_content.addEventListener('loadcommit',
function(e) {
web_content.executeScript({ file: "js/jquery.1.11.3.min.js" });
web_content.executeScript({ file: "js/jianshu.js" });
});
//控制按鈕的方法北发，縮小以及關(guān)閉纹因，還多寫了一個(gè)最大化的方法，不過(guò)沒(méi)有調(diào)用
var current_window = chrome.app.window.current();
document.getElementById('minimize').onclick = function(){
current_window.minimize();
}
document.getElementById('close').onclick = function(){
current_window.close();
}
document.getElementById('maximize').onclick = function(){
current_window.isMaximized()?current_window.restore():current_window.maximize();
}
}
完成后界面是這樣的：
2.4.增加自己的特色
到了這一步琳拨，恭喜你瞭恰，你已經(jīng)可以自己打造一個(gè)桌面應(yīng)用了，到此狱庇，我們的簡(jiǎn)書桌面應(yīng)用已經(jīng)可以運(yùn)行惊畏，我們現(xiàn)在要做的就是收尾工作，既然都已經(jīng)將網(wǎng)頁(yè)版本的簡(jiǎn)書都放進(jìn)了我們的webview標(biāo)簽之中密任，那么我們?yōu)楹尾粚懸恍┳约合胍臉邮侥兀?p>
在control.js文件中颜启，我們分別引入了js/jquery.1.11.3.min.js js/jianshu.js css/jianshu.css文件，那么它們是干什么的呢浪讳，這些文件可以在簡(jiǎn)書頁(yè)面加載時(shí)候一同加載進(jìn)去缰盏，讓我來(lái)演示一下就明白了。
比如說(shuō)，在上面的圖中左側(cè)有個(gè)手機(jī)按鈕來(lái)提示下載簡(jiǎn)書app口猜，但是我已經(jīng)下載了不想再看到负溪，所以我可以寫個(gè)js將其隱藏掉，將代碼寫在js/jianshu.js里济炎，審查元素川抡，知道其class是：ad-selector，所以可以這么寫：
$(document).ready(function(){
$(".ad-selector").hide(); //將那個(gè)圖標(biāo)隱藏
$(".search-form").removeAttr('target');//不要target屬性
$('a').removeAttr('target');
})
我們可以來(lái)看看效果：
怎么樣须尚，還不錯(cuò)吧崖堤，同樣的，如果你對(duì)簡(jiǎn)書布局有什么想改動(dòng)的地方耐床，可以將
css代碼寫在 css/jianshu.css中密幔，好了，現(xiàn)在簡(jiǎn)書桌面應(yīng)用已經(jīng)打造完成了咙咽，只要將這個(gè)應(yīng)用移動(dòng)到你的桌面老玛，就可以和使用其他應(yīng)用一樣使用了，而且兼容所有平臺(tái)钧敞，當(dāng)然前提是你得有谷歌瀏覽器蜡豹。
3.總結(jié)
終于，我們將網(wǎng)頁(yè)版簡(jiǎn)書打造成了桌面版溉苛，是不是非常方便镜廉，總結(jié)來(lái)看就是我們先定義 manifest.json文件，告訴瀏覽器我們編寫的應(yīng)用是什么愚战，怎么啟動(dòng)什么的娇唯，然后再定義啟動(dòng)頁(yè)面main.html,最后background.js將其作為窗口調(diào)用。
這樣一個(gè)桌面應(yīng)用就完成了寂玲，如果要進(jìn)行修改塔插，可以利用webview進(jìn)行引入css js文件，就如同js/control.js引入的js/jianshu.js css/jianshu.css文件拓哟，就是這樣想许。
4.源碼
github地址 chrome_extension
谷歌商店 下載地址
有興趣的可以試試，謝謝断序。
5.更新
針對(duì)簡(jiǎn)書新版進(jìn)行了更新流纹，支持全屏，更好的寫作體驗(yàn)违诗。
