建立 Chrome Popup Extension and App Extension.

先說明建立 Chrome Popup Extension.

 

Step1:先建立資料夾 MyChromeApp,在建立 manifest.json 及 icon 檔,將檔案都放在 MyChromeApp 資料夾內

,manifest.json 檔案內容如下。

{
  "name": "MITBLOG",
"version": "2.10.2",
"manifest_version": "2",
"description": "Description",
  "browser_action": {
    "default_icon": "icon.png",
	"popup":"popup.html"
  },
  "permissions": [
    "http://mitblog.pixnet.net"
  ]
}

 

Step2:建立 Popup.html,同樣放在 MyChromeApp 資料夾內,Popup.html 檔案內容如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.parss.js"></script> 
<script type="text/javascript">
<!--
  $(document).ready(function(){
    $("#feed").PaRSS(
      "http://feeds2.feedburner.com/9lesson",  
      9,                                   
      "M jS g:i a",                        
      true                                 
    );
  });
-->
</script>
<style>
#box
{
width:400px;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
padding:10px;
background-color:#dedede;
}
#feed
{
background-color:#FFFFFF;
list-style:none;
border:solid 1px #999;

}
ul
{
list-style:none;
}
li
{
padding:8px;
}
#logo
{
font-size:18px;
font-weight:bold;
}

.parss-date, .parss-image, .parss-description
{
display:none;
}

.parss-title a
{
color:#003399;
text-decoration:none
}
.parss-title a:hover
{
color:#003399;
text-decoration:underline
}

</style>
</head>

<body>
<div id="box">
<div id="logo">9lessons</div>
<div id="feed"></div>
</div>
</body>
</html>

 

Step3:載入未封裝擴充功能 > MyChromeApp 資料夾。

chromeApp  

 

Step4:完成後,如下圖。

chrome_view  

 


 

 

建立 Chrome App Extension.

Step1:同樣先建立 MyChromeApp 資料夾,在建立 manifest.json 及 icon 檔,將檔案都放在 MyChromeApp 資料

夾內,manifest.json 檔案內容如下。

{

"name": "ChromeUrlApp",
"version": "2.10.2",
"manifest_version": "2",
"description": "Chrome Url App",

"icons": 
{
"128": "logo.png"
},

"app": 
{
"urls": [ "http://mitblog.pixnet.net/"],
"launch": 
{
"web_url": "http://mitblog.pixnet.net"
}
},

"permissions": [ "http://mitblog.pixnet.net" ]
}

 

Step2:建立 Popup.html 檔,加入到 MyChroomeApp 資料夾內。

#box
{
width:400px;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
padding:10px;
background-color:#dedede;
}
#feed
{
background-color:#FFFFFF;
list-style:none;
border:solid 1px #999;
}
ul
{
list-style:none;
}
li
{
padding:8px;
}
#logo
{
font-size:18px;
font-weight:bold;
}
.parss-date, .parss-image, .parss-description
{
display:none;
}
.parss-title a
{
color:#003399;
text-decoration:none
}
.parss-title a:hover
{
color:#003399;
text-decoration:underline
}

 

Step3:將 MyChromeApp 資料夾壓縮成 zip 檔,上傳到 Google Chrome Web App Store。

參考網址:https://chrome.google.com/webstore/developer/dashboard?did_purchase=08334245204957573644.s1.2543085675237508554

ChromeOnlineAppStore  

 

Step4:完成後,執行結果。

chromeapp2  

 

 

Reference:http://www.9lessons.info/2011/03/how-to-create-chrome-extension.html

Reference:http://developer.chrome.com/extensions/manifest.html#manifest_version

Reference:http://developer.chrome.com/extensions/tut_migration_to_manifest_v2.html

Reference:http://developer.chrome.com/extensions/manifest.html#version

    mitblog 發表在 痞客邦 留言(0) 人氣()