香腸炒章魚

建立 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 資料夾。

Step4：完成後，如下圖。

建立 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

Step4：完成後，執行結果。

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