Chrome App 开发实践

Chrome App 开发实践 greatghoul @ GDG Xi’an 201511

什么是 Chrome App？

独⽴立的窗⼝口

独⽴立的启动图标

丰富的 API

多平台运⾏行

想开发⼀一个 App？

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

样式

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 App 开发实践

Chrome App 开发实践

Other Decks in Programming

Featured

Transcript