Introducing…… Presented by Group 6 Group Members B97705037 資管三陳少祁 B97705042 資管三李孟修 B97705044 資管三胡御雲 B97705058 資管三王毓璟 B97705063 資管三張竣貿 B97705070 資管三江栢暉 Outline History of Browser Development Mozilla FireFox Extensions We Build Google Chrome & Extensions Future Development.

Transcript Introducing…… Presented by Group 6 Group Members B97705037 資管三陳少祁 B97705042 資管三李孟修 B97705044 資管三胡御雲 B97705058 資管三王毓璟 B97705063 資管三張竣貿 B97705070 資管三江栢暉 Outline History of Browser Development Mozilla FireFox Extensions We Build Google Chrome & Extensions Future Development.

Introducing……
Presented by Group 6
Group Members
B97705037 資管三陳少祁
B97705042 資管三李孟修
B97705044 資管三胡御雲
B97705058 資管三王毓璟
B97705063 資管三張竣貿
B97705070 資管三江栢暉
Outline
History of
Browser
Development
Mozilla
FireFox
Extensions
We Build
Google
Chrome &
Extensions
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
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
李孟修、陳少祁
首個版本於2008年9月8日
版本為0.2.149
2009年9月6日 Google Chrome首次預設啟用擴
 首個穩定版本於2008年12月11日
版本為1.0.154
充功能，並提供數款擴充功能給使用者試用
目前版本為8.0.552 2010年12月2日發布
2010年11月時市場佔有率達9.27%
最熱門的Extension擁有160萬左右的使用者
為當前瀏覽器市占率第三名

// 把提示區塊的內容設成輸入框的 title 值
</style> <form name="in" >
}).html(_title).click(function(){
Dictionary:<input type=text name=w class="c3" title="Type A Word" /><br />
// 當提示區塊被點擊時，觸發輸入框的 focus 事件
<input type="button" name="submit" value="Look up" class="class_button"
onClick="go(this.form)" >
_text.trigger("focus");
manifest.json
//--></script>

// 最後加上額外的 className
<!doctype
html>
</form>

popup.html
}).addClass(_class);
<script
type="text/javascript">
lang=en>
<script
type="text/javascript">
{
background-image:
url(sprite.png); // 在 body 中插入一個空白的 Div 區塊來當提示區塊
"popup"
:
"popup.html"
</script> div.c1 {
background-repeat: no-repeat;
var _water = $("<div></div>").appendTo("body");
</script>
color: #ccc;
<script
type="text/javascript"><!-background-position: 134px -2038px;// 設定提示區塊的 css 屬性(基本是讓它跟輸入框一樣)
},
background-image:
url(sprite.png);
<input type="button" name="submit"
value="Look
up" class="class_button" onClick="go(this.form)" >
}
// position 一定要設成 absolute 才能移來移去
background-repeat: no-repeat;
window.document.onkeydown=enter;
div.c2 {
_water.css({
background-position:
134px
-2038px;
"background_page"
: "background.html",
color: red;
position: "absolute",
}
function enter(){
background-image: url(sprite.png);
width: _text.width(),
div.c2
{
"permissions":
[
background-repeat:
no-repeat;
height: _text.height(),
color: red;
if(event.keyCode==13){
background-position: 3px -2669px;
fontSize: _text.css("fontSize"),
background-image:
url(sprite.png);
"http://api.flickr.com/",
}
lineHeight: _text.css("lineHeight"),
background-repeat: no-repeat;
document.in.submit.focus();
</body>
div.c3 {
top: _text.position().top + parseInt(_text.css("borderTopWidth"), 10) + "px",
background-position: 3px -2669px;
"http://cop416.pixnet.net/blog/post/22544834",
color: #ccc;
left: _text.position().left + parseInt(_text.css("borderLeftWidth"), 10) + "px",
}
document.in.submit.click();
background-color: #ff9;
paddingTop: _text.css("paddingTop"),
</html>
div.c3 {
"http://www.youtube.com/"
}
paddingBottom: _text.css("paddingBottom"),
color: #ccc;
}
-->
paddingLeft: _text.css("paddingLeft"),
background-color: #ff9;
paddingRight: _text.css("paddingRight"),
}
} ]
marginTop: _text.css("marginTop"),
-->
marginBottom: _text.css("marginBottom"),
}
marginLeft: _text.css("marginLeft"),
marginRight: _text.css("marginRight"),
cursor: "text",
overflow: "hidden"
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
uv.html
index.html
click.html
background.html
info.html
manifest.json
實際操作
TW
Current
Weather
• Demostration
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
 Popup
 Background_page Popup
Send data
Background

瀏覽器的發展日新月異，支援的功
能也越來越強大。

期待在可見的將來，瀏覽器的便利
性和支援平台會更加擴張，其
Extension也能夠推出更加廣泛及突
出的功能。

能夠繼續開發其他實用Extension，
並學以致用！
結
論
Group 6
感謝大家的聆聽！

Directory