| |
| |
| Pop-up |
|
Extensions 的功能當然不只是nothing、而是everything!
現在就來開發我們人生的第二個擴充套件！！！
 |
1.
新增一個你的extension 資料夾
2. manifest.json內文
| |
{
"update_url":"http://clients2.google.com/service/update2/crx",
"name": "Downloads",
"description": "Access the Downloads window
directly from the toolbar",
"version": "1",
"icons": "icon.png"
"permissions" : ["tabs"],
"browser_action": {
"default_title": "Open Downloads window"
},
"background_page": "background.html"
} |
3. 挑一張可愛的圖片 命名為object "icons" 裡的值:"icon.png"
4. 新增一個htm檔 命名為background_page中的值:
| |
<script>
chrome.browserAction.onClicked.addListener(function(tab){
var alreadyOpened=null
var chromeExtURL="chrome://downloads/"
chrome.tabs.getAllInWindow(null,function(tabs){
for (var i=0;i<tabs.length;i++){
if (tabs[i].url == chromeExtURL){
chrome.tabs.update(tabs[i].id, {selected:true})
return;
}
}
chrome.tabs.create({url:chromeExtURL,selected:true})
})
})
</script> |
4. 載入尚未封裝擴充功能->選擇所在的資料夾
5. OK, DONE! 在你尚未察覺之前，你的第二個擴充套件已經安裝啦！
|
 |
Google Maps Pop-up CS3431
Group17
製作
隨時可跳出來一個小地圖給你用!!!
|
|
|
1.
新增一個你的extension 資料夾
2. manifest.json內文
| |
{
"name": "GoogleMaps_CS3431",
"version": "0.0",
"description": "Your Google Maps Tool
Application with clock!",
"browser_action": {
"default_icon": "icon.png",
"popup": "maps.htm"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"css": ["css.css"],
"run_at":"document_end"
}
],
"permissions": [
"http://*/*",
"tabs"
]
} |
3. 挑一張可愛的圖片 命名為object "icons" 裡的值:"icon.png"
4. 新增一個html檔 命名為popup中的值:
| |
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="content-type"
content="text/html; charset=utf-8"/>
<style
type="text/css">
body{ margin:0px;
padding:0px; background-color:white;
color:#999999; font-size:12px;}
#map{ width:600px;
margin:6px auto; height:390px;
border:#EAEAEA 2px solid;}
.button{ width:600px;
margin:0px auto;}
.button span{
padding-right:10px;}
</style>
<title>Google Maps
API</title>
<script
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAfXfQwT3-a9nWho1zJiLuTxTOC5xJ2_DhcFKwIa4t37D6j8nbuhTDEt9TQk4IiDUqJuWB7bG8kElaOA"
type="text/javascript"></script>
<script>
function initialize()
{
if
(GBrowserIsCompatible()) {
// Create and Center a
Map
var map = new
GMap2(document.getElementById("map"));
map.setCenter(new
GLatLng(24.795014,120.993585), 15);
map.addControl(new
GLargeMapControl());
map.addControl(new
GMapTypeControl());
map.openInfoWindow(map.getCenter(),document.createTextNode("歡迎來到清華大學CS3431~~~!!!yoyo"));
map.enableGoogleBar();
// bind a search
control to the map, suppress result list
map.addControl(new
google.maps.LocalSearch(), new
GControlPosition(G_ANCHOR_TOP_LEFT, new
GSize(10,20)));
var blueIcon = new
GIcon(G_DEFAULT_ICON);
blueIcon.image =
"http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";
markerOptions = {
icon:blueIcon };
map.addOverlay(new
GMarker(new GLatLng(24.796955,120.993846),
markerOptions));
}
}
</script>
</head>
<body
onload="initialize()" onunload="GUnload()">
<div id="map"></div>
<!--div
class="button"><span><input type="button"
value="放大" /> <input type="button"
value="縮小" /></span><input type="button"
value="左" /><input type="button" value="右"
/><input type="button" value="上" /><input
type="button" value="下" /><span
id="current_size">如果看不到效果請重新整理！</span></div-->
<font size="4" >Made
By CS3431 第十七組<br>
<i>Extensions讓瀏覽器做個伸展操！ </i></font>
</body>
</html> |
4. 載入尚未封裝擴充功能->選擇所在的資料夾
5. OK, DONE! 在你尚未察覺之前，你的第三個擴充套件已經安裝啦！ |
| Demonstration Screen |
 |
|
|
|
|
Before Build
||| JSON
||| popup
||| content
