Internet Browsers and their Extensions

Internet Browsers and

their Extensions

Introducing……

Presented by Group 6

Group MembersB97705037 資管三陳少祁

B97705042 資管三李孟修

B97705044 資管三胡御雲

B97705058 資管三王毓璟

B97705063 資管三張竣貿

B97705070 資管三江栢暉

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]

http://gs.statcounter.com/

Demo

Video made by B97705070 Patrick

Firesheep

Google Chrome Extensions

李孟修、陳少祁

2009 年 9 月 6 日 Google Chrome 首次預設啟用擴充功能，並提供數款擴充功能給使用者試用

最熱門的 Extension 擁有 160 萬左右的使用者

首個版本於 2008 年 9 月 8 日版本為 0.2.149 首個穩定版本於 2008 年 12 月 11 日版本為

1.0.154 目前版本為 8.0.552 2010 年 12 月 2 日發布 2010 年 11 月時市場佔有率達 9.27% 為當前瀏覽器市占率第三名

Google Chrome

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"> 

<!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">



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/"

]

}

</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">

</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>

// 把提示區塊的內容設成輸入框的 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();

　}

}

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

資料來源 – 中央氣象局 Iframe把中央氣象局資料 embed進來。

中央氣象局不提供 RSS Feed ， Server也不開放，完全沒有開放直接提取氣象資料的功能。

採一個小時觀測一次，且部分時段無天氣現象觀測。

極多為無人站台、氣象資料不予保證。

簡易架構圖以網頁功能及關聯做分配：

manifest.jsonindex.htmluv.html

click.html

info.html

background.html

Frontpage of the Extension

Functional Webpages

實際操作

TW Curren

t Weathe

r

• Demostration

TAKE A REST!!

A simple extension for you

張竣貿

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

PopupBackground_pagePopup

Background

Send data

結論

瀏覽器的發展日新月異，支援的功能也越來越強大。

期待在可見的將來，瀏覽器的便利性和支援平台會更加擴張，其Extension也能夠推出更加廣泛及突出的功能。

能夠繼續開發其他實用Extension ，並學以致用！

Group 6

感謝大家的聆聽！

Documents

Internet Browsers and their Extensions