I’m curious: I know you’ve shown the necessary HTML code to add a search box on my site for Google, Yahoo, eBay, Pinterest, and many more, but what about Gmail? It’s not that I want other people to be searching my mailbox, I’m just curious if we could set it up so that they could search their own Google Mail – GMail – archive for a specified pattern, and then perhaps even have that pattern hardcoded as a search button, instead of a search box. Doable?
Well now I’m curious too. What the deuce do you want to offer this feature for on your site? So you can have a “click to find email you’ve sent me” or similar? Otherwise it’s a bit of an odd request because clearly anyone who doesn’t have a Gmail account or isn’t presently logged in is going to find it dead useless.
Still, it’s an interesting programming task and rather easy to solve once you really open your eyes and pay attention to exactly how Google’s implemented search in Gmail.
The key is that while the existing form is way too complicated for us to crack open and recode, it’s still using what’s called an HTML GET protocol to send the search pattern to the Gmail system. That means we can reverse engineer it.
For example, here’s a typical Gmail search:
You can try to read the HTML underlying it, but let’s be lazy and do a search, then look at the address bar:
Ahhh… You can see that it’s broken into two pieces: Everything before the search (I searched for “hilton” in this example), and the search pattern itself. Like this:
Search URL: http://mail.google.com/mail/u/0/?shva=1#search/
Pattern: hilton
This suggests that we can search for the Easter Bunny in my mailbox by using the manually constructed URL https://mail.google.com/mail/u/0/?shva=1#search/easter+bunny.
Click on it, try it. Did it work? Well, good!
It turns out that at its most fundamental, all HTML forms consist of two things: the base URL and the name=value pairs. In the above, you can see two: shva=1 and search=pattern. PRoblem is, Google’s using a non-standard format for this URL where the name=value pair separator is a “#” not a “&” and it’s also not actually ‘search=pattern’ but instead ‘search/pattern’. In other words, a form we might create would produce the URL:
https://mail.google.com/mail/u/0/?shva=1&search=easter+bunny
Try it and you’ll find out that — sigh — it doesn’t work. Change the “=” to a “/” in the search pattern and it loads the Gmail inbox, but the pattern is thrown away.
That’s bad news. It means that without some substantial Javascript hacking tied to “onClick” in the submit element, there’s no easy way to create a search box.
There is, however, an easy way to create pre-defined searches as buttons by simply linking them to the full URL desired. Like this:
Here’s the HTML code associated with that button:
<button type=”submit”
formaction=”https://mail.google.com/mail/u/0/?shva=1#search/easter+bunny”
formmethod=”get”>Search for the Easter Bunny</button>
</form>
Fairly complicated, but replace the search pattern “easter bunny” with whatever you prefer and it should be easy to get working as you desire.
In terms of the search box itself, I’ll do some poking around in JavaScript and see what I can figure out!
Thank you dave, you just solve problems in a minute. getting great ideas from your blog.
Mine is not to ask “why” when I get these questions, Steve. 🙂
As Dave has explained, it’s possible. But I definitely don’t get what’s the use of doing this? Who would be using it? The only use I see is if you’re using GreaseMonkey and you’re developing a tool for gmail. Other than that, this is simply worthless (to me).