create your own extensions in chrome-- by techno Ramayan
Here i show you how can you create your own extensions in chrome.......
first of copy this code and save it as menifest.json
{
"name": "technoramayan",
"version": "1.0",
"description": "technoramayan.blogspot.com",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"permissions": [
"http://api.flicker.com/"
]
}
now copy this code and save it as 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>
at last select your own icon which you want to display in chrome
rename it as icon.png
put this three files including icon.png in your folder which has any name..
now open the chrome and goto
chrome://extensions/
now click on + sign of developer mode
Click the Load unpacked extension button. A file dialog appears.
In the file dialog, navigate to your extension's folder and click OK.
all you done
see right side of address bar
you can find your extension..
you can do more with extensions like add links,images,some task
for this join the group
http://groups.google.com/a/chromium.org/group/chromium-extensions/subscribe
enjoy developing your extensions......
feel free to comments......
first of copy this code and save it as menifest.json
{
"name": "technoramayan",
"version": "1.0",
"description": "technoramayan.blogspot.com",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"permissions": [
"http://api.flicker.com/"
]
}
now copy this code and save it as 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>
at last select your own icon which you want to display in chrome
rename it as icon.png
put this three files including icon.png in your folder which has any name..
now open the chrome and goto
chrome://extensions/
now click on + sign of developer mode
Click the Load unpacked extension button. A file dialog appears.
In the file dialog, navigate to your extension's folder and click OK.
all you done
see right side of address bar
you can find your extension..
you can do more with extensions like add links,images,some task
for this join the group
http://groups.google.com/a/chromium.org/group/chromium-extensions/subscribe
enjoy developing your extensions......
feel free to comments......
Labels: chrome, extensions, google
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home