近日對谷歌擴(kuò)展以及應(yīng)用很感興趣，于是研究了下官方文檔，特寫此文記錄一下，若有錯誤，敬請指教，如需轉(zhuǎn)載，請說明出處。
1.技術(shù)需求
怎么用html css javascript這些前端技術(shù)來編寫一個桌面應(yīng)用，說到這，不得不說谷歌瀏覽器這款偉大的產(chǎn)品，其自行開發(fā)的V8引擎大大提升了javascript在chrome中的執(zhí)行效率，甚至可以將谷歌瀏覽器想象成一個操作系統(tǒng)，而chrome app則是運(yùn)行在其上的應(yīng)用。
chrome app開發(fā)十分迅速，是一個非常好玩的技術(shù)，下面就以網(wǎng)頁版的簡書為例子，快速將其打造成一個桌面應(yīng)用，而且還是兼容的呢。
文檔以及書籍參考：
官方文檔：chrome apps about_apps
參考書籍：Chrome擴(kuò)展及應(yīng)用開發(fā)
利用谷歌直接將一個網(wǎng)頁打造成桌面應(yīng)用實(shí)現(xiàn)起來可謂十分輕松，開發(fā)者只需要掌握html css javascript前端技術(shù)，再結(jié)合官方文檔，基本上都能快速掌握。
所以，只要你有基本的html css javascript技術(shù)，就可以很快的開發(fā)出有自己特色的簡述桌面應(yīng)用。反之，請去百度之，很快就可以基本掌握。
對于本篇文章的目的：快速將網(wǎng)頁版簡書打造成桌面應(yīng)用，只需要掌握Webview Tag，便可完成簡書的桌面應(yīng)用。
在進(jìn)行代碼層次的說明之前，先上一張完成后的效果圖：
2.應(yīng)用說明
在編寫應(yīng)用之前，請容我先解釋一下chrome app應(yīng)該包含哪些文件，其由以下部分組成。
- manifest文件將應(yīng)用的一些信息提供給Chrome:這個應(yīng)用是？它怎么運(yùn)行？需要哪些額外的權(quán)限？
- background script用來創(chuàng)建一個事件頁面然后可靠地管理軟件生命周期
- 所有代碼必須包含在
chrome app的包內(nèi)，其中包含html css js以及Native Client模塊。- 所有icons和其他有利資源最好也包括在包里面
- 說明：若想深入了解，可以去看官方文檔：chrome apps first_app
知道了這些后，我們就可以看一下代碼的目錄結(jié)構(gòu)，進(jìn)行了解，具體再一一說明：
2.代碼說明
可以看到圖中分別有css/ images/ js/文件夾以及main.html manifest.json文件，不過最主要的是manifest.json main.html background.js這三個文件，下面的敘述也是圍繞這三個文件來做講解。
2.1.manifest.json
manifest.json文件的作用在上面的應(yīng)用說明中已經(jīng)解釋得很清楚，其實(shí)不僅僅是chrome app，谷歌擴(kuò)展也需要一個json格式的manifest，所以manifest.json文件很重要。
代碼如下所示：
{
"app":{
"background":{
"scripts":["js/background.js"]
}
},
"manifest_version":2,
"name":"簡書",
"version":"0.1.0",
"description":"谷歌應(yīng)用版的簡書，對網(wǎng)頁版本作出一些優(yōu)化#__#,添加到桌面方便啟動.",
"icons": {
"16": "images/ico_16.png",
"48": "images/ico_48.png",
"128": "images/ico_128.png"
},
//權(quán)限
"permissions":[//這里需要簡書網(wǎng)頁域名的權(quán)限以及webview調(diào)用簡書頁面顯示到新窗口
"http://m.itdecent.cn/*",
"webview"
]
}
上面字段意思表達(dá)地很清楚，我們來看看:
app //Event Page會監(jiān)聽onLaunched事件，隨即創(chuàng)建窗口，應(yīng)用介紹有說這個作用，這里意思是app下面的background域會通過js/background.js創(chuàng)建窗口。
manifest_version //整數(shù)表示文件自身格式的版本號,按照這個寫就好了
name //應(yīng)用名稱
version //版本號
其他都是某字段對應(yīng)的意思，這里不一一解釋
如果你想更加詳細(xì)地了解，我不會說360全部都翻譯了谷歌的官方文檔，請移步manifest詳細(xì)說明。
2.2.main.html
定義好manifest.json文件之后，現(xiàn)在瀏覽器知道了我們的應(yīng)用叫什么，怎么運(yùn)行的，需要哪些額外的權(quán)限。
那么，應(yīng)用啟動后，應(yīng)用會通過Event Page監(jiān)聽onLaunched事件，然后創(chuàng)建一個窗口，那么窗口顯示什么界面呢？這個界面就是main.html文件。
這個界面主要看開發(fā)者的心情，想怎么寫就怎么寫，但是不要忘了引入background.js文件，其作用下面再說。
代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡書桌面版</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">簡書--找回文字的力量
<a id="close"></a>
<a id="minimize"></a>
</div>
<webview id="web_content"></webview>
</body>
</html>
main.html文件里面的代碼結(jié)構(gòu)十分簡單，這個界面可以分為三個部分，標(biāo)題、控制按鈕（關(guān)閉以及最小化）、webview顯示的主體內(nèi)容部分，當(dāng)該窗口顯示之后，若想對窗口進(jìn)行樣式上的修改，可以加一個 css文件，我這里是這樣定義的：
//添加邊框
body{
margin: 0;
padding: 0;
border: #EEE 1px solid;
}
//標(biāo)題欄部分樣式
#title_bar{
-webkit-app-region:drag; //作用是讓鼠標(biāo)可以拖動窗口界面
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)用簡書網(wǎng)頁頁面后的寬高
*/
#web_content{
width: 100%;
height: 614px;
}
好了，窗口的樣式大概寫出來了，下面要做的就是怎么將這個頁面作為窗口顯示出來，這就要看background.js文件了。
2.3.background.js
簡單來說，background.js會指定應(yīng)用啟動是創(chuàng)建的窗口，上代碼：
//Event Page監(jiān)聽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)建了一個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)的。
});
}
});
通過注釋就會明白這段代碼的意思，現(xiàn)在，我們的應(yīng)用就已經(jīng)創(chuàng)建完成了，我們可以看看界面是什么樣子了。
不過在這之前，我們先要將應(yīng)用加載到谷歌瀏覽器中，請打開谷歌瀏覽器，地址欄輸入chrome://extensions/，打開開發(fā)者模式，點(diǎn)擊加載已解壓的擴(kuò)展程序...，最后加載你創(chuàng)建的應(yīng)用包，加載成功后如下所示：
點(diǎn)擊啟動后，請看：
main.html很好地顯示出來了，其中標(biāo)題（簡書--找回文字的力量），兩個控制按鈕，中間一大快空白部分（空白部分是即將顯示的主題內(nèi)容）都是我們剛才定義的。
現(xiàn)在我們就差最后一步就可以完成這個簡書桌面應(yīng)用了，就是利用Webview Tag調(diào)用簡書網(wǎng)頁頁面，將其顯示在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://m.itdecent.cn/";//定義獲取的網(wǎng)頁頁面
//在應(yīng)用顯示之前加載以下文件，但是應(yīng)用加載出來后，在應(yīng)用里面某些界面還需要腳本，所以下面又增加了一個方法。
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'
}]);
//在每次頁面加載后加入以下文件
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)閉，還多寫了一個最大化的方法，不過沒有調(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)可以自己打造一個桌面應(yīng)用了，到此，我們的簡書桌面應(yīng)用已經(jīng)可以運(yùn)行，我們現(xiàn)在要做的就是收尾工作，既然都已經(jīng)將網(wǎng)頁版本的簡書都放進(jìn)了我們的webview標(biāo)簽之中，那么我們?yōu)楹尾粚懸恍┳约合胍臉邮侥兀?p>
在control.js文件中，我們分別引入了js/jquery.1.11.3.min.js js/jianshu.js css/jianshu.css文件，那么它們是干什么的呢，這些文件可以在簡書頁面加載時(shí)候一同加載進(jìn)去，讓我來演示一下就明白了。
比如說，在上面的圖中左側(cè)有個手機(jī)按鈕來提示下載簡書app，但是我已經(jīng)下載了不想再看到，所以我可以寫個js將其隱藏掉，將代碼寫在js/jianshu.js里，審查元素，知道其class是：ad-selector，所以可以這么寫：
$(document).ready(function(){
$(".ad-selector").hide(); //將那個圖標(biāo)隱藏
$(".search-form").removeAttr('target');//不要target屬性
$('a').removeAttr('target');
})
我們可以來看看效果：
怎么樣，還不錯吧，同樣的，如果你對簡書布局有什么想改動的地方，可以將
css代碼寫在 css/jianshu.css中，好了，現(xiàn)在簡書桌面應(yīng)用已經(jīng)打造完成了，只要將這個應(yīng)用移動到你的桌面，就可以和使用其他應(yīng)用一樣使用了，而且兼容所有平臺，當(dāng)然前提是你得有谷歌瀏覽器。
3.總結(jié)
終于，我們將網(wǎng)頁版簡書打造成了桌面版，是不是非常方便，總結(jié)來看就是我們先定義 manifest.json文件，告訴瀏覽器我們編寫的應(yīng)用是什么，怎么啟動什么的，然后再定義啟動頁面main.html,最后background.js將其作為窗口調(diào)用。
這樣一個桌面應(yīng)用就完成了，如果要進(jìn)行修改，可以利用webview進(jìn)行引入css js文件，就如同js/control.js引入的js/jianshu.js css/jianshu.css文件，就是這樣。
4.源碼
github地址 chrome_extension
谷歌商店 下載地址
有興趣的可以試試，謝謝。
5.更新
針對簡書新版進(jìn)行了更新，支持全屏，更好的寫作體驗(yàn)。
