This document provides an overview of creating Chrome extensions, from simple "Hello World" examples to more advanced extensions like a task note application. It covers the basic structure of extensions using manifest files and HTML/JS files, debugging techniques, and examples of extension types like mail checkers, maps, and news readers. Rules for extension development using the browser API and separating code are also outlined.

1. Chrome extensions:
From Helloworld
to Task-note

2. Outline
Helloworld - How to?
Rules
Task-note

3. Hello world
Anyone can code?

4. Category
Google Mail
Checker extension
Mappy
extension
News Reader
extension
Extension UIs

5. Structure
Manifest file
Some HTML files
Optinal: JS, Img files
Chrome Dev Dashboard
.CRX

6. Step by step
1. Source prepairing.
2. Load the extension in dev mode.
3. Let's Code.
Simple

7. Outline
Helloworld - How to?
Rules
Task-note

8. Rules
Main idea: Add functionality to Chrome without
diving deeply into native code.
HTML, CSS, JS, Api browser provide for webpage,
XMLHttpRequest to JSON to HTML5.

9. Rules
Implement UI by browser action.
No inline js.
Events should be taken by chrome utility.
Seperated code in popup and page.

10. Debugging
Ctrl + R
Two debug screen
*Don't debug in Google children.

11. From Helloworld
to Task-note
HOW?

12. Outline
Helloworld - How to?
Rules
Task-note

13. Task-note
Client: html, css, js (not integrated mithriljs).
Database: mongoDB
Server: Go

14. Task-note
Create
Note
Update
Note
Delete
Note
Get
Note
Server

15. DEMO

16. Improvement
Drag-drog note
Location initialize
Remove DRY
Don't use this extension in some Google
website, such as: youtube.

17. References
Only this presentation
Overview Google Chrome
Start Helloworld
Debugging

18. Q & A

19. Thanks for attention