Wednesday, April 22, 2009

Creating HTML Signatures in Gmail with Google Chrome

In the last couple of months I've been a heavy user of Google Chrome. I got really addicted to its amazing speed, comparing to IE and Firefox.

Yes, Google Chrome is still under development - there's no fancy interface to extensions yet, Greasemonkey needs a command line switch to be activated and so on. But the speed just makes it worth.

Anyhow, in my Firefox days I used the Black Canvas extension to add HTML signatures to my outgoing Gmail messages. Nothing too fancy -- just a grey text and a link to my blog.
Google Chrome, however, doesn't support such extensions, so I searched for an alternative and found this tool.

This little application creates an inline Javascript that should be dragged to your bookmarks bar, and with a click of a mouse it adds the signature you created into the message. Sounds good, nay?

Well, besides that this generated scripts downloads an external script (http://code.jquery.com/jquery-latest.pack.js) which only god knows what's there, another problem popped up.

When I first used this tool I clicked on the link and nothing happend. No Javascript errors. Nothing. Then I remembered that I'm using the Gmail's lab tasks feature. Closing that window made the script work.

Why not create a smaller, working version, I thought. And I did. There it goes:
javascript:void ((function(){document.getElementById("canvas_frame").contentDocument.getElementsByTagName("iframe")[0].contentDocument.body.innerHTML += "your HTML signature";})())

Where your HTML signature can be a hand-made HTML/CSS code or an auto generated by a WYSIWYG editor like in the tool's page.

So all you need to do is create a new bookmark to this Javascript, and click on it whenever you'd like to add your signature to the mail you're currently sending.

Yeah, it's a hack, so use it on your own risk, blah blah blah.

13 comments:

Erez Sh said...

I like the concept of replacing plug-ins with scripts. It's not always convenient, but it feels cleaner.

And jquery is a very useful javascript library.

StatusReport said...

Yeah, I'm familiar with jquery, but I don't like the idea of downloading external scripts (and even worse, compressed/encoded ones) to run in the context of my Gmail account.

Erez Sh said...

I share you sentiment, but you are probably already allowing a lot of other non-inspected code to run on your computer (and all firefox plugins had accessibility to your gmail account)..

P.S. I share you chrome addiction. I just can't use anything slow anymore, even Opera feels a bit clunky.

നിഷാ‍ദ്.............. said...

Chrome now supports browser extensions. i Hope u know abt this... did u help to find html signature ad on for Chrome...

Jameson King said...

Thanks for your post. I had the same problem - not being able to use the Chrome signature because of running tasks. So, your javascript should work while running tasks? Also, is there something else I need to do to your code because I haven't gotten it to work?

StatusReport said...

@Jameson: It works with running tasks. You should add this code as a site in your favorites (open the bookmark manager, right click->Add Page.. then paste my code into the URL field.

Jameson King said...

Sorry, I don't mean to bug you, but I can't get it to work. I've pasted your code into the bookmark (as directed) and inserted my html signature where the "your html signature" is - and it still doesn't work. If you have any advice that is great, if not, its ok.

StatusReport said...

@Jameson: Have you tried copying and pasting the code I posted without changing anything? You should escape quotes (convert " to \") in your signature html code to make it work.

John Virgolino said...

Thanks for this! I can now finally use Chrome instead of Firefox with our Google Apps. This script also works with Chrome on the Mac. I did modify the script so that I can put the signature at the top of the email in replies. This would be the modified script for anyone who wants it. Thanks again!

javascript:void ((function(){document.getElementById("canvas_frame").contentDocument.getElementsByTagName("iframe")[0].contentDocument.body.innerHTML = "your HTML signature" + document.getElementById("canvas_frame").contentDocument.getElementsByTagName("iframe")[0].contentDocument.body.innerHTML;})())

Joe Naylor said...

This is awesome, thanks, you're a genius.

I have the Calendar sidebar enabled also, which is an iframe, so I had to change the code to iframe[1]:
getElementsByTagName("iframe")[1]

FYI if people have other lab features enabled, you might have to adjust it.

Mastermind said...

I have just created a google-chrome extension that allows you to create html email signatures for gmail and google apps. It is called Autopen.

Check it out here:
https://chrome.google.com/extensions/detail/cmjcoiohflenpehfaalahocpmacjloof

MeNoBlogger said...

Autopen is awesome.
Thank you Mastermind. :)

Jimmy Jarred said...

Thank you for sharing about the complete process. I am familiar with it but using the above detail I learn about it completely.
eSignature