Saturday, 28 May 2011

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......

No comments:

Post a Comment