popup.html

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="cleanTitles.js?v=1" type="text/javascript"></script>
<style>
body {
  min-width:250px;
  overflow-x:hidden;
}
.tab {
	cursor: default;
	border: 1px solid #ffffff;
	padding-left: 2px;
  font-family: 'Verdana';
  font-size: 12px;
}
.tab:hover {
	background: #ecf1f6;
	border: 1px solid #ced9e4;
}
.favicon {
	position: relative;
	top: 2px;
	width: 16px;
	height: 16px;
}

img {
}
</style>
<div id="content"></div>
<script>

chrome.tabs.query( { "pinned": true }, function(tabs) { 
	console.log(tabs);
	for(var i = 0; i < tabs.length; i++) {
		var tab = tabs[i];
		var div = $('<div class=\'tab\'>');
		var img = $('<img class=\'favicon\'>');
		img.attr("src", tab.favIconUrl);
		div.append(img);
		var titleAssist = cleanTitle(tab);
		div.append("&nbsp;" + titleAssist);
		div.attr("data-tab-id", tab.id);
		div.click(function() {
			var tabId = $(this).attr("data-tab-id");
			chrome.tabs.update(parseInt(tabId), { "active": true });
		});
		$("#content").append(div);
	}

});

function cleanTitle(tab){
	for(var i = 0; i < cleanedTitles.length; i++){
		var cleanTitle = cleanedTitles[i];
		if(tab.url.indexOf(cleanTitle.search, 0) != -1){
			return cleanTitle.title;
		}
	}
	if(tab.title.length > 28){
		return tab.title.substring(0, 25) + '...';
	}
	return tab.title;
}

</script>