Hello Codeforums,

Introduction
I recently took on my biggest project that I have ever done, an extension. Most of you here are probably thinking "Wow, an extension is a big project for you?" and, well, as much as I hate to say it, it is. I am quite new to the world of coding and I am using Youtube videos and such to learn how to do so. Now, recently I have encountered a problem with my extension. Here is what it currently looks like:


Goal of This Extension
The goal of this extension is that when you receive a notification (or any kind of message relating to that tool bar) on this tool bar here:

that it will show up in the extension bar and, not only notify you on the desktop that you received a notification, but dynamically show up in the extension bar the number of notifications that you have. Whenever you click the extension bar, I want it to appear exactly like this (except without the friends bar):


If the wording was a bit confusing, I can make a video on exactly what I want the extension bar to show.

Issues that I have

Well, the first issue that I have currently is this:


Another issue that I have is that I have no idea where I insert the code for the notification bar in the extension code. You see, I have 2 different HTML files: the first file is an example file that I got from a Youtube video. The second file is the notification bar code that I used from the website's "Inspect Elements". So I need to know where I insert the notification bar's code into the example file.

And now we come to the last problem: profiles. The website uses cookies to know which profile to show. For example, whenever I go to the website, it knows who I am because my account is tethered by cookies, so I only see notifications for MY ACCOUNT ONLY. Now, how would I translate that over to the extension? Would the extension use cookies as well to know which user to display notifications? Basically, I want this extension to work like the Facebook extension in which it shows the user's news feed, but in this instance, my extension would show user's notifications, messages, etc.

Thank you so much if you are able to help! Again, I am a total noobie when it comes to coding. This is my first major project that I have taken on. Below I have 3 different codes: the example code, the notification bar's code, and both of them combined (the full extension code).

Sorry if my wording is a bit confusing, I really can't figure out another way to say it.

-X-

Example extension code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 

	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
	<link href='style.css' rel='stylesheet' type='text/css'> 

	<meta name="viewport" content="width=device-width" /> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

	<title>Tinkernut</title> 

	<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
	<script type="text/javascript" src="feed.js"></script>

	<base target="_blank">

</head>


<body bgcolor="#FFF"> 
	<table class="body-wrap"> 
		<tr> 
			<td class="container"> 
				<div class="content"> 
					<div id="pattern" class="pattern"> 
						<form action="http://www.youtube.com/user/gigafide/search" method="get" class="f" target="_blank"> 
							<input type="search" name="query" placeholder="Search Videos.." /> 
							<input type="submit" class="btn search-submit" value="Search"> 
						</form>
					</div> 
					<div id="feed"></div> 
					<div id="logo">
						<a href="http://www.youtube.com/gigafide"><img src="icon.jpg" /></a>
					</div> 
				</div> 
			</td>
		</tr> 
	</table> 
</body>
</html>
Notification's Bar Code:

Code:
<div id="enjin-tray" class="hide">
		<ul class="tray-panel">
			<li class="notification-growls">
				<ul></ul>
			</li>
			<li id="notificationpanel" class="tray-item">
				<a href="http://www.mineplex.com/dashboard" class="notification-icon dashboard tray-button"></a>
				<a href="http://www.mineplex.com/dashboard/messages" onclick="return false;" class="notification-icon messages tray-button"></a>
				<a href="http://www.mineplex.com/dashboard" onclick="return false;" class="notification-icon general tray-button"></a>
				<a href="http://www.mineplex.com/dashboard/applications" onclick="return false;" class="notification-icon apps tray-button">
				<a href="http://www.mineplex.com/dashboard" onclick="return false;" class="notification-icon ts3 tray-button">
					<div class="ts3-online-count"></div>
				</a>
				<div class="subpanel messages" style>
					<div class="subpanel-header">
						<h3>
							"Messages  "
	 						<span> class="header-messages-count"></span>
						</h3>
					<div> class="header-x"></div>
					<a class="header-link" href="dashboard/messages">Go to Inbox</a>
Combined Version:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 

	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
	<link href='style.css' rel='stylesheet' type='text/css'> 

	<meta name="viewport" content="width=device-width" /> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

	<title>Mineplex</title> 

	<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
	<script type="text/javascript" src="feed.js"></script>

	<base target="_blank">

</head>


<body bgcolor="#FFF"> 
	<table class="body-wrap"> 
		<tr> 
			<td class="container">
	<div id="enjin-tray" class="hide">
		<ul class="tray-panel">
			<li class="notification-growls">
				<ul></ul>
			</li>
			<li id="notificationpanel" class="tray-item">
				<a href="http://www.mineplex.com/dashboard" class="notification-icon dashboard tray-button"></a>
				<a href="http://www.mineplex.com/dashboard/messages" onclick="return false;" class="notification-icon messages tray-button"></a>
				<a href="http://www.mineplex.com/dashboard" onclick="return false;" class="notification-icon general tray-button"></a>
				<a href="http://www.mineplex.com/dashboard/applications" onclick="return false;" class="notification-icon apps tray-button">
				<a href="http://www.mineplex.com/dashboard" onclick="return false;" class="notification-icon ts3 tray-button">
					<div class="ts3-online-count"></div>
				</a>
				<div class="subpanel messages" style>
					<div class="subpanel-header">
						<h3>
							"Messages  "
	 						<span> class="header-messages-count"></span>
						</h3>
					<div> class="header-x"></div>
					<a class="header-link" href="dashboard/messages">Go to Inbox</a>
				</div>
			</td>
		</tr> 
	</table> 
</body>
</html>
The website that I am intending this for:
http://www.mineplex.com

What a Notification Looks Like: