看見(jiàn)JE上有了一篇這樣的文章:
http://www.iteye.com/topic/646674
內(nèi)容是做的兩個(gè)chrome插件,看見(jiàn)很多人對(duì)這個(gè)都感興趣,小弟特別走網(wǎng)上看了一翻,終于找到了官方的chrome插件入門教程,下面是大概內(nèi)容(如有不恰當(dāng)?shù)牡胤剑喽嘁?jiàn)諒):
1.讓你的瀏覽器準(zhǔn)備就緒
不用多說(shuō),首先肯定是安裝瀏覽器了,至于你是Windows,Linux,Mac?官方都有對(duì)應(yīng)的下載。
2.創(chuàng)建并加載一個(gè)擴(kuò)展
? 1.首先創(chuàng)建一個(gè)文件夾
? 2.在你的文件夾里面創(chuàng)建一個(gè)名為:manifest.json的文件,并且寫下以下內(nèi)容:
? 3.將這個(gè)圖標(biāo)復(fù)制到你的文件夾
? 4.加載你的擴(kuò)展
??? a.點(diǎn)擊瀏覽器的 圖標(biāo),并且選擇Extensions
??? b.加入右上角的? “Developer mode”前面是+,那么點(diǎn)擊它,頁(yè)面會(huì)添加幾個(gè)按鈕,并且+會(huì)變?yōu)?,
??? c.點(diǎn)擊Load unpacked extension按鈕,一個(gè)dialog窗口就彈出來(lái)了,
??? d.選擇你最開(kāi)始創(chuàng)建的文件夾,點(diǎn)擊OK, (記住,不要放在文件目錄有中文的地方,否則會(huì)報(bào)錯(cuò),反正我放在桌面上就報(bào)錯(cuò)了)
?? 做完以上步驟,就會(huì)出現(xiàn)如下的內(nèi)容:
3.添加代碼到你的擴(kuò)展
? 1.編輯manifest.json,添加代碼(只添加加粗的那一行):
? 2.創(chuàng)建文件popup.html,并且寫下以下代碼:
?? 3,回到擴(kuò)展管理頁(yè)面,現(xiàn)在屬性一下插件(reload),加載新版本的插件
?? 4.點(diǎn)擊右上角的插件圖標(biāo),就會(huì)看見(jiàn)效果了,如以下圖片:
PS:最后一步的時(shí)候,有時(shí)候會(huì)有點(diǎn)點(diǎn)慢,你點(diǎn)擊圖標(biāo)后其實(shí)是在執(zhí)行(當(dāng)你鼠標(biāo)移開(kāi)的時(shí)候如果圖標(biāo)樣式還是你鼠標(biāo)一上去的時(shí)候那種樣式,說(shuō)明就是在運(yùn)行了),我最開(kāi)始還以為是我代碼有問(wèn)題呢,結(jié)果后來(lái)不經(jīng)意間才發(fā)現(xiàn)這個(gè)問(wèn)題,下面加上原文地址: http://code.google.com/chrome/extensions/getstarted.html
附上我的插件文件夾,在附件里面!
1.讓你的瀏覽器準(zhǔn)備就緒
不用多說(shuō),首先肯定是安裝瀏覽器了,至于你是Windows,Linux,Mac?官方都有對(duì)應(yīng)的下載。
2.創(chuàng)建并加載一個(gè)擴(kuò)展
? 1.首先創(chuàng)建一個(gè)文件夾
? 2.在你的文件夾里面創(chuàng)建一個(gè)名為:manifest.json的文件,并且寫下以下內(nèi)容:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
]
}
? 3.將這個(gè)圖標(biāo)復(fù)制到你的文件夾
? 4.加載你的擴(kuò)展
??? a.點(diǎn)擊瀏覽器的 圖標(biāo),并且選擇Extensions
??? b.加入右上角的? “Developer mode”前面是+,那么點(diǎn)擊它,頁(yè)面會(huì)添加幾個(gè)按鈕,并且+會(huì)變?yōu)?,
??? c.點(diǎn)擊Load unpacked extension按鈕,一個(gè)dialog窗口就彈出來(lái)了,
??? d.選擇你最開(kāi)始創(chuàng)建的文件夾,點(diǎn)擊OK, (記住,不要放在文件目錄有中文的地方,否則會(huì)報(bào)錯(cuò),反正我放在桌面上就報(bào)錯(cuò)了)
?? 做完以上步驟,就會(huì)出現(xiàn)如下的內(nèi)容:
3.添加代碼到你的擴(kuò)展
? 1.編輯manifest.json,添加代碼(只添加加粗的那一行):
...
"browser_action": {
"default_icon": "icon.png",
[b]"popup": "popup.html"[/b]
},
...
? 2.創(chuàng)建文件popup.html,并且寫下以下代碼:
<style>
body {
min-width:357px;
overflow-x:hidden;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>
<script>
var req = new XMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
"method=flickr.photos.search&" +
"api_key=90485e931f687a9b9c2a66bf58a3861a&" +
"text=hello%20world&" +
"safe_search=1&" + // 1 is "safe"
"content_type=1&" + // 1 is "photos only"
"sort=relevance&" + // another good one is "interestingness-desc"
"per_page=20",
true);
req.onload = showPhotos;
req.send(null);
function showPhotos() {
var photos = req.responseXML.getElementsByTagName("photo");
for (var i = 0, photo; photo = photos[i]; i++) {
var img = document.createElement("image");
img.src = constructImageURL(photo);
document.body.appendChild(img);
}
}
// See: http://www.flickr.com/services/api/misc.urls.html
function constructImageURL(photo) {
return "http://farm" + photo.getAttribute("farm") +
".static.flickr.com/" + photo.getAttribute("server") +
"/" + photo.getAttribute("id") +
"_" + photo.getAttribute("secret") +
"_s.jpg";
}
</script>
?? 3,回到擴(kuò)展管理頁(yè)面,現(xiàn)在屬性一下插件(reload),加載新版本的插件
?? 4.點(diǎn)擊右上角的插件圖標(biāo),就會(huì)看見(jiàn)效果了,如以下圖片:
PS:最后一步的時(shí)候,有時(shí)候會(huì)有點(diǎn)點(diǎn)慢,你點(diǎn)擊圖標(biāo)后其實(shí)是在執(zhí)行(當(dāng)你鼠標(biāo)移開(kāi)的時(shí)候如果圖標(biāo)樣式還是你鼠標(biāo)一上去的時(shí)候那種樣式,說(shuō)明就是在運(yùn)行了),我最開(kāi)始還以為是我代碼有問(wèn)題呢,結(jié)果后來(lái)不經(jīng)意間才發(fā)現(xiàn)這個(gè)問(wèn)題,下面加上原文地址: http://code.google.com/chrome/extensions/getstarted.html
附上我的插件文件夾,在附件里面!
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元

