看見JE上有了一篇這樣的文章:
http://www.iteye.com/topic/646674
內容是做的兩個chrome插件,看見很多人對這個都感興趣,小弟特別走網上看了一翻,終于找到了官方的chrome插件入門教程,下面是大概內容(如有不恰當的地方,多多見諒):
1.讓你的瀏覽器準備就緒
不用多說,首先肯定是安裝瀏覽器了,至于你是Windows,Linux,Mac?官方都有對應的下載。
2.創建并加載一個擴展
? 1.首先創建一個文件夾
? 2.在你的文件夾里面創建一個名為:manifest.json的文件,并且寫下以下內容:
? 3.將這個圖標復制到你的文件夾
? 4.加載你的擴展
??? a.點擊瀏覽器的 圖標,并且選擇Extensions
??? b.加入右上角的? “Developer mode”前面是+,那么點擊它,頁面會添加幾個按鈕,并且+會變為-,
??? c.點擊Load unpacked extension按鈕,一個dialog窗口就彈出來了,
??? d.選擇你最開始創建的文件夾,點擊OK, (記住,不要放在文件目錄有中文的地方,否則會報錯,反正我放在桌面上就報錯了)
?? 做完以上步驟,就會出現如下的內容:
3.添加代碼到你的擴展
? 1.編輯manifest.json,添加代碼(只添加加粗的那一行):
? 2.創建文件popup.html,并且寫下以下代碼:
?? 3,回到擴展管理頁面,現在屬性一下插件(reload),加載新版本的插件
?? 4.點擊右上角的插件圖標,就會看見效果了,如以下圖片:
PS:最后一步的時候,有時候會有點點慢,你點擊圖標后其實是在執行(當你鼠標移開的時候如果圖標樣式還是你鼠標一上去的時候那種樣式,說明就是在運行了),我最開始還以為是我代碼有問題呢,結果后來不經意間才發現這個問題,下面加上原文地址: http://code.google.com/chrome/extensions/getstarted.html
附上我的插件文件夾,在附件里面!
1.讓你的瀏覽器準備就緒
不用多說,首先肯定是安裝瀏覽器了,至于你是Windows,Linux,Mac?官方都有對應的下載。
2.創建并加載一個擴展
? 1.首先創建一個文件夾
? 2.在你的文件夾里面創建一個名為:manifest.json的文件,并且寫下以下內容:
{
"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.將這個圖標復制到你的文件夾
? 4.加載你的擴展
??? a.點擊瀏覽器的 圖標,并且選擇Extensions
??? b.加入右上角的? “Developer mode”前面是+,那么點擊它,頁面會添加幾個按鈕,并且+會變為-,
??? c.點擊Load unpacked extension按鈕,一個dialog窗口就彈出來了,
??? d.選擇你最開始創建的文件夾,點擊OK, (記住,不要放在文件目錄有中文的地方,否則會報錯,反正我放在桌面上就報錯了)
?? 做完以上步驟,就會出現如下的內容:
3.添加代碼到你的擴展
? 1.編輯manifest.json,添加代碼(只添加加粗的那一行):
...
"browser_action": {
"default_icon": "icon.png",
[b]"popup": "popup.html"[/b]
},
...
? 2.創建文件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,回到擴展管理頁面,現在屬性一下插件(reload),加載新版本的插件
?? 4.點擊右上角的插件圖標,就會看見效果了,如以下圖片:
PS:最后一步的時候,有時候會有點點慢,你點擊圖標后其實是在執行(當你鼠標移開的時候如果圖標樣式還是你鼠標一上去的時候那種樣式,說明就是在運行了),我最開始還以為是我代碼有問題呢,結果后來不經意間才發現這個問題,下面加上原文地址: http://code.google.com/chrome/extensions/getstarted.html
附上我的插件文件夾,在附件里面!
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061
微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元

