Coder Insights: 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.

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"
   }
}

Create a file popup.html and create the basic html template. With a div with id "searchResults".

<html>
  <head>

  </head>
  <body>
   <div id="searchResults"></div>
  </body>
</html>

Get a Custom Search API key from here
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>

Paste the following code in header

<script>

//<![CDATA[

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();
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
searchControl.draw(document.getElementById("searchresult"), drawOptions);
     
// Execute an inital search
if (sVar==undefined){
  sVar="India";
}
searchControl.execute(sVar);
}
google.setOnLoadCallback(fnSearch,"India");
//]]>
</script>

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

Tuesday, September 13, 2011

Writing your Custom Search Chrome Extension

No comments:

Post a Comment

Labels

Blog Archive