Tuesday, September 13, 2011

Writing your Custom Search Chrome Extension

Did you know, all that it takes to develop a Google Chrome Extension is HTML, CSS, JavaScript and an icon. Sounds doable right?

Each extension has the following files:
  • A manifest file
  • One or more HTML files (unless the extension is a theme)
  • Optional: One or more JavaScript files
  • Optional: Any other files your extension needs—for example, image files
Extensions will run as separate processes: one per extension.

  1. Create a folder on your computer and call it CompactSearch. Create a manifest file (text file) inside the folder and call it manifest.json. Add the following contents to the file 
      "name": "CompactSearch",
      "version": "1.0",
      "authors": [ {
          "email": "your_email@address.com",
          "name": "Your Name"
       } ],
      "description": "Search without opening an extra tab",
      "permissions": ["http://*.google.com/"],
      "browser_action": {
        "default_icon": "icon.png",
        "default_title": "Compact Search",
        "popup": "popup.html"
      "icons": {
          "16": "icon_16.png",
          "48": "icon_32.png"
  2. Create a file popup.html and create the basic html template. With a div with id "searchResults".
       <div id="searchResults"></div>
  3. Get a Custom Search API key from here
  4. Add the following line in the head section replacing API_KEY by your Custom Search API key
    <script src="https://www.google.com/jsapi?key=<API_KEY>" type="text/javascript"></script>
  5. Paste the following code in header
    google.load("search", "1");
    function fnSearch(sVar) {
    // Create a search control
    var searchControl = new google.search.SearchControl(); 
    // Add in a set of custom searchers 
    searchControl.addSearcher(new google.search.ImageSearch());
    searchControl.addSearcher(new google.search.WebSearch());
    searchControl.addSearcher(new google.search.VideoSearch());
    searchControl.addSearcher(new google.search.NewsSearch());
    searchControl.addSearcher(new google.search.BlogSearch());
    // Set the Local Search center point
    var drawOptions = new google.search.DrawOptions();
    searchControl.draw(document.getElementById("searchresult"), drawOptions);
    // Execute an inital search
    if (sVar==undefined){
  6. Load the extension.
    1. Bring up the extensions management page by clicking the wrench icon and choosing Tools > Extensions.
    2. Click the Load unpacked extension button. A file dialog appears.
    3. In the file dialog, navigate to your extension's folder and click OK.
If your extension is valid, its icon appears next to the address bar, and information about the extension appears in the extensions page. Now click on the icon and start searching.
Further Reading:
Hosting an Application

No comments:

Post a Comment