Internet Browsers and their Extensions Introducing…… Internet Browsers and their Extensions Presented by Group 6

Group Members B97705037 資管三 陳少祁 B97705042 資管三 李孟修 B97705044 資管三 胡御雲

Outline History of Browser Development Mozilla FireFox Google Chrome & Extensions Extensions We Build Future Development & Conclusion

History of Browser Development 王毓璟

Tim Berners-Lee… 1990年聖誕節，Tim Berners-Lee 正式實作了http的客戶端及伺服器架構。 1991年Tim Berners-Lee完成了第一個瀏覽器，WorldWideWeb。 集合了當時許多創新的軟硬體技術，為瀏覽器踏出了承先啟後的一步。 最初，瀏覽器被視為處理CERN龐大電話簿的實用工具。

Followers 1993年NCSA Mosaic Web browser被開發出來。 世界上最早的GUI瀏覽器之一。 許多圖形介面瀏覽器的始祖。 主持人Marc Andreessen脫離成立Netscape。 1994年推出Netscape Navigator。 當時最成功、市占率最高之瀏覽器，市占超越90%。

Netscape vs. Microsoft 1995年推出了自有的瀏覽器，Internet Explorer。 將其嵌入於自行開發的Windows OS中。 1998年美國vs. Microsoft反托拉斯訴訟案。 IE在市場上的獨佔性已經不可避免。

Up to Now… Netscape在1998年成立了Mozilla Foundation。 Released Mozilla FireFox。 Halt Netscape Navigator Support Google於2008年Sep推出Chrome 0.2.149版。 Javascript Engine – V8 IE 9 b2、Opera 11.0、Chrome 10、FireFox 4.0 b8。 Separate add-ons & extensions processes from browser

A Little Comparison

A Little Comparison

Mozilla FireFox Fashion Your Firefox

Mozilla基金會(MoFo) 1998 Netscape建立Mozilla組織 2003 年成立Mozilla基金會 非營利組織 支援和領導Mozilla Open Source專案

Mozilla Application Suite 跨平台套裝軟體 Netscape Navigator(網頁瀏覽器) Communicator（電子郵件客戶端） Composer（網頁開發軟體） ChatZilla（IRC用戶端軟體） 可在Linux、Windows、Mac OS X下執行

Mozilla Firefox 從Mozilla Application Suite獨立出來 Open Source Code 解決軟體肥大問題 取代功能複雜的Mozilla Suite

設計準則 不多不少剛剛好，製作有用的瀏覽器 易用性、輕量 回應速度要快!!! 讓使用者覺得煩 － 感覺上的速度比實際速度重要 提供擴充系統 添加新功能又不影響核心 自訂瀏覽器以符合特定需求

特色 分頁瀏覽 即時書籤 下載管理員 自訂搜尋引擎 附加元件(擴充套件、佈景主題) 跨平台支援、支援多種網路標準

市場接納度 截至2010年10月=>市占率22.83% 僅次於微軟Internet Explorer 第二流行的瀏覽器版本

[資料來源：StatCounter]

Demo Video made by B97705070 Patrick

Firesheep

Google Chrome Extensions 李孟修、陳少祁

Google Chrome 首個版本於2008年9月8日 版本為0.2.149 首個穩定版本於2008年12月11日 版本為1.0.154 目前版本為8.0.552 2010年12月2日發布 2010年11月時市場佔有率達9.27% 為當前瀏覽器市占率第三名 2009年9月6日 Google Chrome首次預設啟用擴充功能，並提供數款擴充功能給使用者試用 最熱門的Extension擁有160萬左右的使用者 Google Chrome

Make your own chrome extension // 把提示區塊的內容設成輸入框的 title 值 }).html(_title).click(function(){ // 當提示區塊被點擊時，觸發輸入框的 focus 事件 _text.trigger("focus"); // 最後加上額外的 className }).addClass(_class); // 設定輸入框的 focus 及 blur 事件 _text.focus(function(){ // 隱藏提示區塊 _water.hide(); }).blur(function(){ // 如果輸入框中沒有值則再顯示提示區塊 if(this.value=="") _water.show(); }); } //--> </script> <script type="text/javascript"><!-- <input type="button" name="submit" value="Look up" class="class_button" onClick="go(this.form)" > window.document.onkeydown=enter; function enter(){ 　if(event.keyCode==13){ 　　document.in.submit.focus(); 　　document.in.submit.click(); 　} //--></script> <script type="text/javascript"> function go (form) { var url = "http://tw.dictionary.yahoo.com/dictionary?p="+form.w.value; window.open(url); document.write('<a target="_new" href ="http://tw.dictionary.yahoo.com/dictionary?p='+form.w.value+'"></a>'); } </script> </body> </html> </style> <form name="in" > Dictionary:<input type=text name=w class="c3" title="Type A Word" /><br /> <input type="button" name="submit" value="Look up" class="class_button" onClick="go(this.form)" > </form> <script type="text/javascript"> <!-- $(function(){ // 取得要加上提示的元素並一一設定 $(":text, textarea").each(function(i, ele){ // 先把目前元素轉換成 jQuery 物件後記錄起來 // 再取得 title 及 className 屬性值 var _text = $(ele), _title = _text.attr("title"), _class = _text.attr("className") || ""; // 如果有 title 或是 className 值的話，則進行改造 if(!!_title || !!_class){ // 在 body 中插入一個空白的 Div 區塊來當提示區塊 var _water = $("<div></div>").appendTo("body"); // 設定提示區塊的 css 屬性(基本是讓它跟輸入框一樣) // position 一定要設成 absolute 才能移來移去 _water.css({ position: "absolute", width: _text.width(), height: _text.height(), fontSize: _text.css("fontSize"), lineHeight: _text.css("lineHeight"), top: _text.position().top + parseInt(_text.css("borderTopWidth"), 10) + "px", left: _text.position().left + parseInt(_text.css("borderLeftWidth"), 10) + "px", paddingTop: _text.css("paddingTop"), paddingBottom: _text.css("paddingBottom"), paddingLeft: _text.css("paddingLeft"), paddingRight: _text.css("paddingRight"), marginTop: _text.css("marginTop"), marginBottom: _text.css("marginBottom"), marginLeft: _text.css("marginLeft"), marginRight: _text.css("marginRight"), cursor: "text", overflow: "hidden" manifest.json { "name": "Extension", "version": "1.0", "description": "The first extension that I made.", "browser_action": { "default_icon": "icon.png", "popup" : "popup.html" }, "background_page" : "background.html", "permissions": [ "http://api.flickr.com/", "http://cop416.pixnet.net/blog/post/22544834", "http://www.youtube.com/" ] } popup.html <!doctype html> <html lang=en> <meta charset=UTF-8> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> <!-- .c3 { color: blue; } div.c1 { color: #ccc; background-image: url(sprite.png); background-repeat: no-repeat; background-position: 134px -2038px; div.c2 { color: red; background-position: 3px -2669px; div.c3 { background-color: #ff9; --> <!doctype html> <html lang=en> <meta charset=UTF-8> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> <!-- .c3 { color: blue; } div.c1 { color: #ccc; background-image: url(sprite.png); background-repeat: no-repeat; background-position: 134px -2038px; div.c2 { color: red; background-position: 3px -2669px; div.c3 { background-color: #ff9; --> Make your own chrome extension

Interesting Extension

Screen Capture

IE Tab

Facebook Photo Zoom

AdBlock

Google Dictionary

TW Current Weather 即時天氣狀況顯示Extension 王毓璟

資料來源 - Weather.com 由Weather.com所提供的RSS Feed。 全球最大氣象網站，資料包括台灣逾30個城市。 可用住家地址查詢天氣，自行設立氣象新聞中心，即時報導。 即時壞天氣電話通知。

資料來源 - Weather.com 用Javascript把RSS Feed抓進來，再利用XML的tags解讀所需資訊。 URL內含參數自動判斷要找哪個城市的天氣。 宜蘭並無天氣資料，因此改以鄰近的蘇澳作為其資料來源。 Obtain RSS Feeds provided free by Weather. com Extract necessary information for use in by reading tags in RSS Feeds Successful presentation of current weather status

資料來源 – 中央氣象局 Iframe把中央氣象局資料embed進來。 中央氣象局不提供RSS Feed，Server也不開放，完全沒有開放直接提取氣象資料的功能。 採一個小時觀測一次，且部分時段無天氣現象觀測。 極多為無人站台、氣象資料不予保證。

Frontpage of the Extension 簡易架構圖 以網頁功能及關聯做分配： Functional Webpages Frontpage of the Extension manifest.json index.html uv.html click.html info.html background.html

實際操作 Demostration TW Current Weather

A simple extension for you Take a Rest!! 張竣貿

Why？ We always spend too much time on surfing the Internet Why can’t I just have a alarm right on my browser?

How？ Two parts of this extension Popup Background_page Popup Send data

結論 瀏覽器的發展日新月異，支援的功能也越來越強大。 期待在可見的將來，瀏覽器的便利性和支援平台會更加擴張，其Extension也能夠推出更加廣泛及突出的功能。 能夠繼續開發其他實用Extension，並學以致用！ 結論

Group 6 感謝大家的聆聽！