近日对谷歌扩展以及应用很感兴趣，于是研究了下官方文档，特写此文记录一下，若有错误，敬请指教，如需转载，请说明出处。
1.技术需求
怎么用html css javascript这些前端技术来编写一个桌面应用，说到这，不得不说谷歌浏览器这款伟大的产品，其自行开发的V8引擎大大提升了javascript在chrome中的执行效率，甚至可以将谷歌浏览器想象成一个操作系统，而chrome app则是运行在其上的应用。chrome app开发十分迅速，是一个非常好玩的技术，下面就以网页版的简书为例子，快速将其打造成一个桌面应用，而且还是兼容的呢。
文档以及书籍参考： 官方文档：chrome apps about_apps参考书籍：Chrome扩展及应用开发
利用谷歌直接将一个网页打造成桌面应用实现起来可谓十分轻松，开发者只需要掌握html css javascript前端技术，再结合官方文档，基本上都能快速掌握。所以，只要你有基本的html css javascript技术，就可以很快的开发出有自己特色的简述桌面应用。反之，请去百度之，很快就可以基本掌握。对于本篇文章的目的：快速将网页版简书打造成桌面应用，只需要掌握Webview Tag，便可完成简书的桌面应用。在进行代码层次的说明之前，先上一张完成后的效果图：
2016-02-20 19:22:14 .png
2.应用说明
在编写应用之前，请容我先解释一下chrome app应该包含哪些文件，其由以下部分组成。
- manifest文件将应用的一些信息提供给Chrome:这个应用是？它怎么运行？需要哪些额外的权限？
- background script用来创建一个事件页面然后可靠地管理软件生命周期
- 所有代码必须包含在chrome app的包内，其中包含html css js以及Native Client模块。
- 所有icons和其他有利资源最好也包括在包里面
- 说明：若想深入了解，可以去看官方文档：chrome apps first_app
知道了这些后，我们就可以看一下代码的目录结构，进行了解，具体再一一说明：
2016-03-05 23:05:43.png
2.代码说明
可以看到图中分别有css/ images/ js/文件夹以及main.html manifest.json文件，不过最主要的是manifest.json main.html background.js这三个文件，下面的叙述也是围绕这三个文件来做讲解。2.1.manifest.jsonmanifest.json文件的作用在上面的应用说明中已经解释得很清楚，其实不仅仅是chrome app，谷歌扩展也需要一个json格式的manifest，所以manifest.json文件很重要。代码如下所示：
{ "app":{ "background":{ "scripts":["js/background.js"] } }, "manifest_version":2, "name":"简书", "version":"0.1.0", "description":"谷歌应用版的简书，对网页版本作出一些优化#__#,添加到桌面方便启动.", "icons": { "16": "images/ico_16.png", "48": "images/ico_48.png", "128": "images/ico_128.png" }, //权限 "permissions":[//这里需要简书网页域名的权限以及webview调用简书页面显示到新窗口 "http://www.jianshu.com/*", "webview" ]} 上面字段意思表达地很清楚，我们来看看:
app //Event Page会监听onLaunched事件，随即创建窗口，应用介绍有说这个作用，这里意思是app下面的background域会通过js/background.js创建窗口。manifest_version //整数表示文件自身格式的版本号,按照这个写就好了name //应用名称version //版本号其他都是某字段对应的意思，这里不一一解释
如果你想更加详细地了解，我不会说360全部都翻译了谷歌的官方文档，请移步manifest详细说明。2.2.main.html定义好manifest.json文件之后，现在浏览器知道了我们的应用叫什么，怎么运行的，需要的权限。那么，应用启动后，应用会通过Event Page监听onLaunched事件，然后创建一个窗口，那么窗口显示什么界面呢？这个界面就是main.html文件。这个界面主要看开发者的心情，想怎么写就怎么写，但是不要忘了引入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文件里面的代码结构十分简单，这个界面可以分为三个部分，标题、控制按钮（关闭以及最小化）、webview显示的主体内容部分，当该窗口显示之后，若想对窗口进行样式上的修改，可以加一个 css文件，我这里是这样定义的：
//添加边框body{ margin: 0; padding: 0; border: #EEE 1px solid;}//标题栏部分样式#title_bar{ -webkit-app-region:drag; //作用是让鼠标可以拖动窗口界面 height: 26px; line-height: 26px; font-size: 15px; background-color: #EEE; padding: 0 10px; box-sizing: border-box;}//控制图标样式#title_bar a{ position: relative; -webkit-app-region:no-drag; //让控制图标可以被点击 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调用简书网页页面后宽高的定义 */#web_content{ width: 100%; height: 614px;} 好了，窗口的样式大概写出来了，下面要做的就是怎么将这个页面作为窗口显示出来，这就要看background.js文件了。2.3.background.js简单来说，background.js会指定应用启动是创建的窗口，上代码：
//Event Page监听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{ //这里就创建了一个id是main的新窗口，窗口内容是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'//不显示标题栏目，因为我们自己有写标题样式，不用使用默认的。 }); }}); 通过注释就会明白这段代码的意思，现在，我们的应用就已经创建完成了，我们可以看看界面是什么样子了。不过在这之前，我们先要将应用加载到谷歌浏览器中，请打开谷歌浏览器，地址栏输入chrome://extensions/，打开开发者模式，点击加载已解压的扩展程序...，最后加载你创建的应用包，加载成功后如下所示：
jianshu.png
点击启动后，请看：
2016-03-06 12:07:14.png
main.html很好地显示出来了，其中标题（简书--找回文字的力量），两个控制按钮，中间一大快空白部分（空白部分是即将显示的主题内容）都是我们刚才定义的。现在我们就差最后一步就可以完成这个简书桌面应用了，就是利用Webview Tag调用简书网页页面，将其显示在main.html的
//webwiew methodswindow.onload = function(){ var web_content = document.getElementById('web_content'); web_content.src="http://www.jianshu.com/";//定义获取的网页页面//在应用显示之前加载以下文件，但是应用加载出来后，在应用里面某些界面还需要脚本，所以下面又增加了一个方法。 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" }); });//控制按钮的方法，缩小以及关闭，还多写了一个最大化的方法，不过没有调用 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(); }} 完成后界面是这样的：
2016-03-06 12:24:57.png
2.4.增加自己的特色到了这一步，恭喜你，你已经可以自己打造一个桌面应用了，到此，我们的简书桌面应用已经可以运行，我们现在要做的就是收尾工作，既然都已经将网页版本的简书都放进了我们的webview标签之中，那么我们为何不写一些自己想要的样式呢？在control.js文件中，我们分别引入了js/jquery.1.11.3.min.js js/jianshu.js css/jianshu.css文件，那么它们是干么的呢，这些文件可以在简书页面加载时候一同加载进去，让我来演示一下就明白了。比如说，在上面的图中左侧有个手机按钮来提示下载简书app，但是我已经下载了不想再看到，所以我可以写个js将其隐藏掉，将代码写在js/jianshu.js里，审查元素，知道其class是：ad-selector，所以可以这么写：
$(document).ready(function(){ $(".ad-selector").hide(); //将那个图标隐藏 $(".search-form").removeAttr('target');//不要target属性 $('a').removeAttr('target');}) 我们可以来看看效果：
2016-03-06 12:25:48.png
怎么样，还不错吧，同样的，如果你对简书布局有什么想改动的地方，可以将css代码写在 css/jianshu.css中，好了，现在简书桌面应用已经打造完成了，只要将这个应用移动到你的桌面，就可以和使用其他应用一样使用了，而且兼容所有平台，当然前提是你得有谷歌浏览器。
3.总结
终于，我们将网页版简书打造成了桌面版，是不是非常方便，总结来看就是我们先定义 manifest.json文件，告诉浏览器我们编写的应用是什么，怎么启动什么的，然后再定义启动页面main.html,最后background.js将其作为窗口调用，这样一个桌面应用就完成了，如果要进行修改，可以利用webview进行引如css js文件，就如同js/control.js引入的js/jianshu.js css/jianshu.css文件，就是这样。
공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?Mar 04, 2025 pm 12:32 PM공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.
HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?Mar 17, 2025 pm 12:27 PM이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.
HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?Mar 17, 2025 pm 12:20 PM기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.
웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?Mar 04, 2025 pm 02:39 PM이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.
& lt; datalist & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:33 PM이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159
& lt; Progress & Gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:34 PM이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우
html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?Mar 12, 2025 pm 04:05 PM이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.
& lt; meter & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:35 PM이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
드림위버 CS6
시각적 웹 개발 도구
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
