Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Chrome App 开发实践
Search
greatghoul
November 28, 2015
Programming
0
240
Chrome App 开发实践
GDG Xi'an 11 月份 DevFest 主题分享:使用 Chrome App 开发一个 Todo 应用。
http://gdgxian.org/2015/11/13/2015-devfest/
greatghoul
November 28, 2015
Tweet
Share
Other Decks in Programming
See All in Programming
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
380
OpenTelemetry のサービスという概念について
azukiazusa1
1
410
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
530
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
140
Honoとhtmx
yusukebe
6
1.2k
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
オブジェクトしこう
okuramasafumi
2
130
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
15k
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
8.1k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
Statistics for Hackers
jakevdp
789
220k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Typedesign – Prime Four
hannesfritz
36
2k
Music & Morning Musume
bryan
39
5.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
950
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
Designing for Performance
lara
601
67k
Making the Leap to Tech Lead
cromwellryan
123
8.4k
Transcript
Chrome App 开发实践 greatghoul @ GDG Xi’an 201511
什么是 Chrome App?
独⽴立的窗⼝口
独⽴立的启动图标
丰富的 API
多平台运⾏行
想开发⼀一个 App?
None
HTML + CSS + JavaScript
让我们开始吧!
Chrome Todo App
准备⼯工作 http:/ /git.io/vBuEb
{ "manifest_version": 2, "name": "Chrome Todo App", "short_name": "chrome-todo-app", "description":
"A simple todo app.", "version": "0.1.0", "icons": { "128": "images/icon_128.png" }, "app": { "background": { "scripts": [“js/background.js"] } } } manifest.json 应⽤用声明
创建应⽤用窗⼝口
chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('index.html', { id: 'mainWindow', bounds: { width: 400,
height: 400 } }); }); js/background.js 创建应⽤用窗⼝口
index.html 创建应⽤用窗⼝口 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Chrome
Todo App</title> </head> <body> <h1>Hello World!</h1> </body> </html>
运⾏行应⽤用 chrome:/ /extensions/
新建TODO
index.html 新建TODO <body> <input type="text" class=“input-todo" /> <ul class="todo-list"></ul> <script
src=“js/jquery.min.js"></script> <script src=“js/main.js"></script> </body>
新建TODO js/main.js function addTodoElement(todo) { var todoHtml = '' +
'<li class="todo">' + ' <input type="checkbox" />' + todo.title + '</li>'; $(todoHtml).appendTo('.todo-list'); } function addTodoHandler(event) { if (event.keyCode != 13) return; addTodoElement({ title: this.value, done: false }); this.value = ''; } $('.input-todo').on('keypress', addTaskHandler);
完成任务
完成任务 css/main.css .checked { text-decoration: line-through; color: #888888; } function
checkTodoHandler() { var $todo = $(this).parent(); $todo.toggleClass('checked', this.checked); } $(document).on('change', '.todo :checkbox', checkTodoHandler); <head> <link rel="stylesheet" type=“text/css" href="css/main.css"> </head> index.html js/main.js
删除任务
删除任务 js/main.js function addTodoElement(todo) { var todoHtml = '' +
'<li class="todo">' + ' <a href="###" class=“action-remove">删除</a>' + ' <input type="checkbox" />' + todo.title + '</li>'; $(todoHtml).appendTo('.todo-list'); } .action-remove { float: right; color: #888; text-decoration: none; } css/main.css
删除任务 js/main.js function removeTodo($todo) { $todo.remove(); } function removeTodoHandler() {
removeTodo($(this).parents('.todo')); } $(document).on('click', '.action-remove', removeTodoHandler);
清除已完成的任务
清除已完成的任务 index.html <a href="###" class="action-clear">清除已完成的任务</a> function clearDoneTodos() { $('.todo.checked').each(function() {
removeTodo($(this)); }); } $('.action-clear').on('click', clearDoneTodos); js/main.js
样式
None
Header index.html <header> <div class="input-wrapper"> <input type="text" class=“input-todo" placeholder="输⼊入描述按回⻋车键添 加任务"
/> </div> </header>
Header css/main.css header { height: 50px; position: absolute; top: 0;
left: 0; right: 0; background: #efefef; } .input-wrapper { margin: 10px; } .input-todo { width: 100%; height: 30px; padding: 5px; box-sizing: border-box; }
Footer index.html <footer> <a href="###" class="action-clear">清除已完成的任务</a> </footer> footer { height:
40px; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; line-height: 40px; background: #efefef; } css/main.css
列表 index.html <section class="content"> <ul class="todo-list"> <li class="todo done"> <a
href="###" class="action-remove">删除</a> <input type="checkbox"> 这是第⼀一条 </li> </ul> </section>
列表 css/main.css .content { position: absolute; top: 50px; left: 0;
right: 0; bottom: 40px; overflow-y: auto; } .todo-list { list-style: none; margin: 0; padding: 0; } .todo { border-bottom: 1px solid #efefef; padding: 5px; }
列表 css/main.css .checked { text-decoration: line-through; color: #888888; } .action-remove
{ display: none; float: right; color: #888; text-decoration: none; margin-right: 5px; } .todo:hover { background-color: #F9F9F9; } .todo:hover .action-remove { display: block; }
持久化
{ "permissions": [ "storage" ] } manifest.json Chrome Storage API
https://developer.chrome.com/extensions/storage
载⼊入 js/main.js function loadTodos() { chrome.storage.local.get(null, function(todos) { for (var
id in todos) { addTodoElement(todos[id]); } }); } loadTodos();
保存 TODO js/main.js function saveTodo(todo) { var object = {};
object[todo.id] = todo; chrome.storage.local.set(object); } function addTodoHandler(event) { if (event.keyCode != 13) return; var todo = { id: ‘todo_' + new Date().getTime(), title: this.value, done: false }; saveTodo(todo); addTodoElement(todo); this.value = ''; }
保存 TODO js/main.js function addTodoElement(todo) { var checked = todo.done
? 'checked' : ‘'; var todoHtml = '' + '<li class="todo ' + checked + '" id="' + todo.id + '">' + ' <a href="###" class=“action-remove">删除</a>' + ' <input type="checkbox" ' + checked + ' />' + todo.title + '</li>'; $(todoHtml).appendTo('.todo-list'); }
删除TODO js/main.js function removeTodo($todo) { chrome.storage.local.remove($todo.attr('id'), function() { $todo.fadeOut($todo.remove); });
}
进阶练习
• 使⽤用更漂亮的布局 • 使⽤用 AngularJS 实现 • 使⽤用 IndexedDB 实现存储
• 双击 TODO 可以编辑描述
相关资源
• Chrome Development Resources • Chrome Todo App Project
Thanks & FAQ