Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Chrome App 开发实践

greatghoul
November 28, 2015

Chrome App 开发实践

GDG Xi'an 11 月份 DevFest 主题分享:使用 Chrome App 开发一个 Todo 应用。

http://gdgxian.org/2015/11/13/2015-devfest/

greatghoul

November 28, 2015
Tweet

Other Decks in Programming

Transcript

  1. { "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 应⽤用声明
  2. index.html 创建应⽤用窗⼝口 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Chrome

    Todo App</title> </head> <body> <h1>Hello World!</h1> </body> </html>
  3. 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>
  4. 新建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);
  5. 完成任务 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
  6. 删除任务 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
  7. 删除任务 js/main.js function removeTodo($todo) { $todo.remove(); } function removeTodoHandler() {

    removeTodo($(this).parents('.todo')); } $(document).on('click', '.action-remove', removeTodoHandler);
  8. 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; }
  9. 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
  10. 列表 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>
  11. 列表 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; }
  12. 列表 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; }
  13. { "permissions": [ "storage" ] } manifest.json Chrome Storage API

    https://developer.chrome.com/extensions/storage
  14. 保存 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 = ''; }
  15. 保存 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'); }