1. Final Presentation
Mouse Free
Browsing
Presenter 0815024 김주리

2. Table of Contents
• Project Overview
• Project Software Architecture
• Demo
• Q&A
It’s so NEWWWWS!
2011-2학기 컴퓨터공학종합설계 2

3. PROJECT
OVERVIEW
2011-2학기 컴퓨터공학종합설계 3

4. How many
HOURS do
you spend
online in a
year?
2011-2학기 컴퓨터공학종합설계 4

5. 2011-2학기 컴퓨터공학종합설계 5

6. 2011-2학기 컴퓨터공학종합설계 6

7. 2011-2학기 컴퓨터공학종합설계 7

8. New Interface via new services, wi
2011-2학기 컴퓨터공학종합설계 8

9. However, …
Can I apply my experience to THI
2011-2학기 컴퓨터공학종합설계 9

10. Overcome the fence with a
Browser Extension!!
Go Up
Go Previous Go Next
Go Down
2011-2학기 컴퓨터공학종합설계 10

11. PROJECT
SOFTWARE
ARCHITECTURE
2011-2학기 컴퓨터공학종합설계 11

12. Backgroud.html
Option.html
localStorage
Manifest.json
Content-script(script injection)
MFB logic (evtDetect, etc.)
Bookmark access
Pavicon & Browser UI
Message passing, etc.
2011-2학기 컴퓨터공학종합설계 12

13. Key board
event Detection
Mouse
Free
Browsing
Passing appropriate URL,
Then execute
page moving process
Option
Values
In localStorage
2011-2학기 컴퓨터공학종합설계 13

14. option.html
Manifest.json
browser_action jQuery framework :
attr manage
default_icon
default_title option value
default_popup:option
window.onload
- localStorage : value storage
Content_scripts
Additional UI
matches:
["http://*/*", "https://*/*"] toggleButt(node)
exclude_matches: - Display more options
["*://*.facebook.com/*", Framework function
"*://search.naver.com/*"] - Manage attribute
run_at:document_start chrome.extension.
js:exec.js onRequest.addListene
r
2011-2학기 컴퓨터공학종합설계 14

15. Backgroud.html
chrome.extension.onConnect.addListener(callback1); (27) Message
port.onMessage.addListener(callback2(callback3)); (24/27) Passing
chrome.browserAction.setBadgeText(); (1) Browser
chrome.browserAction.setBadgeBackgroundColor(); (1) UI
next(port); (143)
Paging
prev(port); (143) logic
bookMark(msg, port); (18)
- chrome.bookmarks.getTree(callback4); (14)
2011-2학기 컴퓨터공학종합설계 15

16. exec.js : javascript injection
Event
Keydetect(evt)::bookMark(evt);, paging(evt.keyCode); (8)
detect
bookMark(evt); (12)
- chrome.extension.connect(); (1/12)
- port.postMessage(); (1/12)
- port.onMessageaddListener(); (3/12)
Page
paging(evt.keyCode); (9)
Move
- chrome.extension.connect(); (1/9)
- port.postMessage(); (1/9)
- port.onMessage.addListener(); (3/9)
2011-2학기 컴퓨터공학종합설계 16

17. Pavicon UI option page
Badge UI
They were some problems..
1. Variety of the url policy and default event listener
각 사이트의 url을 분석하여 별도 처리 루틴을 두었으며,
Extension setting에서 javascript injection기법을 사용하였고
injection 시점을 document_start로 설정하여 해결하였다.
2. Separate execution of the each pages,
then they CANNOT share important values.
Chrome message passing API로 필요한 값들을 각 페이지에게 전
달하는 방법으로 해결하였다.
2011-2학기 컴퓨터공학종합설계 17

18. DEMO
2011-2학기 컴퓨터공학종합설계 18

19. Q&A
2011-2학기 컴퓨터공학종합설계 19

20. Thank you for listening =)
20