Hack 47. Add a Site Search

Google can restrict your search to a specific site. You can take advantage of this feature to add a site search to every page you visit.

There are two ways to restrict Google to return pages on a specific site. The first way is to use the site: keyword in your search results, like this:

 foo site:example.com 

This Google search searches for foo but returns only pages on the example.com domain. On the search results page, the URL looks like this:

 http://www.google.com/search?hl=en&q=foo+site%3Aexample.com  

The second way is to do it in two steps. First, search for foo; then, at the bottom of the search results, click "Search within results." You will get to a page with another search form, where you can enter site:example.com. The actual search results will be the same as the previous one-step method, but the URL looks different:

 http://www.google.com/search?hl=en&lr=&c2coff=1&q=foo&as_q=site%3Aexample.com 

This difference is important, because the keyword foo and the site name site:example.com are in separate query parameters. It makes it trivial to reverse-engineer that URL to construct a form that searches a specific site. The form would display a single visible text box named q and also contain a hidden form field named as_q that contains the domain of the current page with a site: prefix.

6.2.1. The Code

The code is in two parts. The first part creates the site search form and inserts it at the top of the page. The second part styles the form so it is unobtrusive and visually separated from the rest of the page.

This script should run on all pages except pages on google.com. (It would be silly to include a site search on the search results page!)

Save the following user script as sitesearch.user.js:

 // ==UserScript== // @name Site Search // @namespace http://diveintomark.org/projects/greasemonkey/ // @description adds a site search on every page using Google Site Search // @include http://* // @exclude http://*.google.tld/* // ==/UserScript== var elmSearchDiv = document.createElement('div'); elmSearchDiv.innerHTML = '<form method="GET" action="http://www.google.com/search">' + '<label for="as_q">Search this site:</label> ' +  '<input type="text"  name="as_q" accesskey="S"> ' +  '<input type="hidden" name="q" value="site:' + location.host + '">' + '<input type="submit" value="Search">' + '</form>'; document.body.insertBefore(elmSearchDiv, document.body.firstChild); elmSearchDiv.style.fontSize = 'small'; elmSearchDiv.style.textAlign = 'right'; elmSearchDiv.style.borderBottom = '1px solid silver'; 

6.2.2. Running the Hack

After installing the user script from Tools Install This User Script, go to http://www.gnu.org. You should see a new form in the top-right corner of the page labeled "Search this site:", as shown in Figure 6-1.

Figure 6-1. Site search on www.gnu.org

Enter gpl compatible and click Search. You will be taken to the Google search results showing pages on www.gnu.org that reference GPL compatibility, as shown in Figure 6-2.

Figure 6-2. Site search results for "gpl compatible" on www.gnu.org

6.2.3. Hacking the Hack

Most search engines include functionality to restrict a search to a particular site. If you prefer to use a different search engine, just look at the URLs it uses to do site-specific searches and work your way back to construct the site search form to match.

For example, the relevant query string parameters of a site-specific search on Yahoo! Web Search look like this:

 http://search.yahoo.com/search?va=gpl+compatible&vs=www.gnu.org 

The search keywords are in the va parameter, and the domain is in the vs parameter.

There's one difference from Google's site search: the domain to search is specified by itself, without a site: prefix.

To add a site search that uses Yahoo! Web Search, construct the form like so:

 elmSearchDiv.innerHTML = '<form method="GET" action="http://search.yahoo.com/search">' + '<label for="va">Search this site:</label> ' +  '<input type="text"  name="va" accesskey="S"> ' +  '<input type="hidden" name="vs" value="' + location.host + '">' + '<input type="submit" value="Search">' + '</form>'; 

The rest of the script will work unchanged.

The innerHTML property is a great way to inject a complex chunk of HTML into a page. It is not part of the W3C DOM standard, but all modern browsers support it.

If you want the site search box to appear at the bottom of each page, instead of the top, change this line:

 document.body.insertBefore(elmSearchDiv, document.body.firstChild); 

to this:

 document.body.appendChild(elmSearchDiv); 

You can also alter the styling of the site search form itself. If you want to distinguish it visually from the rest of the page, you could give it a black background with white text. Add these two lines to the end of the user script:

 elmSearchDiv.style.backgroundColor = 'black'; elmSearchDiv.style.color = 'white';