Prototyping SkypeChatStyles CSS with actual HTML

Prototyping SkypeChatStyles in Skype is a pain in the ass. You have to quit and start Skype every time you update a few values, which makes the workflow really inefficient.

I searched for a way to get the actual HTML which was in the chat window for prototyping, and noticed that jQuery is being included in the default Panamerica style.

So with a little jQuery goodness you can get the HTML out of your chat window to prototype with it. If you put the code below in the Conversation.html (inside your SkypeChatStyle), you’ll get a textarea with the HTML that is currently in the window.


$(document).ready(
	function()
	{
		// Timeout so Skype can load the Chat Contents.
		setTimeout(getChatContents, 2000);
	}
);

function getChatContents()
{	
	// Get the Chat Contents
	var chat_contents = $("body").html(); 
	
	// Put the chat contents in the top right of the conversation.
	$("body").append("<textarea style='width: 400px; height: 300px; position: absolute; right: 0; top: 0;' id='chat_contents'>"+chat_contents+"</textarea>");	
}

With this HTML you can prototype your Chat Window styles in a browser. You should use Safari for this, because that’s the same render engine as the Skype Chat Window.