I'm using HTML and javaScript .. I'm trying to build a chrome extension , which will display some info from the website in the popup
I need to get the page source of http://met.guc.edu.eg in the context of my web page and use it to get some of the "li" tags and do some work on them ( RegEx )
for example display the courses taken by student in web page -- By taking them from the http://met.guc.edu.eg .. and display them in a nice way in a pop up
Since there is no true answer to this yet, I will post the method I use - I do not know if it's the best way - but it works.
The reason XHR may not be the best idea is because it's not always going to give you the exact source of a certain tab - this way will.
content.js
chrome.extension.onRequest.addListener(function(request, sender, callback)
{
if (request.action == 'getSource')
{
callback(document.documentElement.outerHTML);
}
});
background.html
chrome.tabs.sendRequest(tab.id, {action : 'getSource'}, function(source) {
console.log(source);
});
As asked for, here is the source:
<!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 id="Head1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>
Faculty of Media Engineering and Technology (MET) - The German University in Cairo
</title>
<!--[if gte IE 7 ]>
<!-->
<link type="text/css" href="Media/ResourceHandler.ashx?v=1&fileSet=homepage_css&type=text/css" rel="Stylesheet" />
<script type="text/javascript" src="Media/ResourceHandler.ashx?v=1&fileSet=homepage_script&type=application/x-javascript"></script>
<![endif]-->
</head>
<body onload="init();">
<form name="ctl00" method="post" action="Default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="ctl00">
<div>
<input type="hidden" name="ScriptManager1_HiddenField" id="ScriptManager1_HiddenField" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTYwMjE2MTE1MA9kFgICAw9kFgICBw8WAh4LXyFJdGVtQ291bnQCAhYEZg9kFggCAg8VAgdOZXdzXzE3GFNtYXJ0U29mdCBhcmUgdGhlIGNoYW1wc2QCAw8PFgIeCEltYWdlVXJsBS1+L1JlcG9zaXRvcnkvTmV3c0NvbXBvbmVudC9TT3JpZ2luYWxGaW5hbC5qcGdkZAIEDxUB8QFBZnRlciBjb21wZXRpbmcgYWdhaW5zdCBDU0VOIGFuZCBCSSBjb21wYW5pZXMuIFNtYXJ0U29mdCBtYW5hZ2VkIHRvDQp3aW4gdGhlIFNvZnR3YXJlIEVuZ2luZWVyaW5nIENvbXBldGl0aW9uIGZvciBTcHJpbmcgMjAxMCBhZnRlciBkZXZlbG9waW5nIGFuIG91dHN0YW5kaW5nIG9ubGluZSB0b29sIGZvciBhdXRvbWF0aW5nIGFnaWxlIHNvZnR3YXJlIG1hbmFnZW1lbnQuIENvbmdyYXR1bGF0aW9ucyB0byBTbWFydFNvZnQhZAIFDxYCHgVzdHlsZQUNZGlzcGxheTpub25lOxYCZg8VAQBkAgEPZBYIAgIPFQIGTmV3c18xHE1lZGlhIEVuZ2luZWVyaW5nIGF0IHRoZSBHVUNkAgMPDxYCHwEFJn4vUmVwb3NpdG9yeS9OZXdzQ29tcG9uZW50L2xpYnJhcnkuanBnZGQCBA8VAfEBTWVkaWEgRW5naW5lZXJpbmcgYW5kIFRlY2hub2xvZ3kgYWltcyBhdCB0aGUgZXZvbHZpbmcgZmllbGQgb2YgbmVhcmx5IGFsbCBhc3BlY3RzIG9mIGluZm9ybWF0aW9uIGFuZCBtdWx0aW1lZGlhIHByb2Nlc3NpbmcuIFRoZSBzdHVkeSBwcm9ncmFtIGluICJNZWRpYSBFbmdpbmVlcmluZyBhbmQgVGVjaG5vbG9neSIgcmVzdHMgb24gdGhlIHNhbWUgZnVuZGFtZW50YWxzIGFzIGZvciBJbmZvcm1hdGlvbiBUZWNobm9sb2d5LmQCBQ9kFgJmDxUBE0Fib3V0L1Byb2dyYW1zLmFzcHhkGAMFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYCBR1Mb2dpblVzZXJDb250cm9sMSRsb2dpbkJ1dHRvbgUkTG9naW5Vc2VyQ29udHJvbDEkUmVtZW1iZXJNZUNoZWNrYm94BRxMb2dpblVzZXJDb250cm9sMSRNdWx0aVZpZXcxDw9kZmQFNkxvZ2luVXNlckNvbnRyb2wxJEhvbWVwYWdlVG9vbHNNZW51Q29udHJvbDEkTXVsdGlWaWV3MQ8PZGZk++EYs51/1WiGabXN2nlBpWq7B38=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl00'];
if (!theForm) {
theForm = document.ctl00;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=hjWzicBH57aDEOAXMpQVJQ2&t=633566901938396560" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=H0761Oq7Alukyw82KELp8-Txl2kQFm7sZfTkrcnjSDzxZz0PrQZLm48rbx9Jm7dI_LMT2zH0QUfg9RJVLEsm7Q2&t=633566901938396560" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=9NKqPW-jeqHS98DhHZ6Iy5ulSdcD3uOEBYcWmPxYVzi01PBdj_S7yBr5N-59MNCSkIHANMTKEfgCCoAEWIDetGqltgG2yF0m6QP4thTRHlI1&t=633432692861214540" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=9NKqPW-jeqHS98DhHZ6Iy5ulSdcD3uOEBYcWmPxYVzi01PBdj_S7yBr5N-59MNCSkIHANMTKEfgCCoAEWIDetB9rztfIh11Bb3t4nicyu881&t=633432692861214540" type="text/javascript"></script>
<script src="/Default.aspx?_TSM_HiddenField_=ScriptManager1_HiddenField&_TSM_CombinedScripts_=%3b%3bAjaxControlToolkit%2c+Version%3d1.0.10920.32880%2c+Culture%3dneutral%2c+PublicKeyToken%3d28f01b0e84b6d53e%3aen-US%3a816bbca1-959d-46fd-928f-6347d6f2c9c3%3a9ea3f0e2%3ae2e86ef9%3a9e8e87e9%3a1df13a87%3a4c9865be%3aba594826%3a757f92c2" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('ctl00'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
<!-- Page Container -->
<div id="container">
<!-- Header and Menu -->
<div id="headerAndMenu">
<!-- Title -->
<h1 id="logo">
<a href="http://www.guc.edu.eg" target="_blank">
<img src="Media/Images/HomePage/Logo.png.ashx" alt="The German University in Cairo" /></a></h1>
<h2 id="title">
Faculty of Media Engineering and Technology</h2>
<!-- Title -->
<!-- Menu -->
<div id="menu">
<div id="mainPart">
<div id="aboutMET" onmouseenter="opacity('aboutMETSubMenu',0,100,5)" onmouseleave="opacity('aboutMETSubMenu',100,0,5)">
<div id="aboutMETSubMenu">
<ul id="aboutMETSubMenuList">
<li id="programs"><a class="main" href="About/Programs.aspx">Programs</a> </li>
<li id="degrees"><a class="main" href="About/Degrees.aspx">Degrees</a> </li>
<li id="ourPeople"><a class="main" href="People/">OurPeople</a></li>
<li id="admission"><a class="main" href="About/Admission.aspx">Admission</a> </li>
</ul>
</div>
</div>
<div id="academics" onmouseenter="opacity('academicsSubMenu',0,100,5)" onmouseleave="opacity('academicsSubMenu',100,0,5)">
<div id="academicsSubMenu">
<ul id="academicsSubMenuList">
<li id="underGraduate"><a class="main" href="Courses/Undergrad.aspx">
Undergraduate Courses </a></li>
<li id="graduate"><a class="main" href="Courses/Grad.aspx">
Graduate Courses</a> </li>
<li id="courseCatalogue"><a class="main" href="Courses/">Course
Catalogue</a> </li>
<li id="research"><a class="main" href="Research/">Research</a> </li>
</ul>
</div>
</div>
<div id="extras" onmouseenter="opacity('extrasSubMenu',0,100,5)" onmouseleave="opacity('extrasSubMenu',100,0,5)">
<div id="extrasSubMenu">
<ul id="extrasSubMenuList">
<li id="activities"><a class="main" href="Activities/">Activities</a>
</li>
<li id="onlineTutorials"><a class="main" href="OnlineTutorials/"
>Online Tutorials</a> </li>
<li id="staffBlog"><a class="main" href="#">Staff Blog</a> </li>
<li id="showCase"><a class="main" href="#">Showcase</a> </li>
<li id="forum"><a class="main" href="Forum/">Forum</a> </li>
</ul>
</div>
</div>
<div id="agenda" onmouseenter="opacity('agendaSubMenu',0,100,5)" onmouseleave="opacity('agendaSubMenu',100,0,5)">
<div id="agendaSubMenu">
<ul id="agendaSubMenuList">
<li id="announcements"><a class="main" href="Agenda/Announcements.aspx">Announcements</a>
</li>
<li id="calendar"><a class="main" href="Agenda/">Calendar</a> </li>
<li id="policies"><a class="main" href="About/Policies.aspx">Policies</a> </li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Menu -->
</div>
<!-- /Header and Menu -->
<!-- Content -->
<div id="content">
<!-- Login -->
<div id="login">
<div class="homePageLoginDiv">
<div id="Div1" style="position: relative; top: 5px;">
<div>
<div class="tools-menu-header" id="login_label">
<img style="border-style: none; vertical-align: middle; padding-right: 5px;" src="Media/Icons/key_go.png.ashx"><span
class="label">Login</span></div>
<div class="tools-menu-body" id="tools-menu-div">
<label>
GUC Email
</label>
<div class="leftTBoxSide">
</div>
<div>
<input name="LoginUserControl1$usernameTextBox" type="text" id="LoginUserControl1_usernameTextBox" class="userNameTBox" /></div>
<div class="rightTBoxSide">
</div>
<span id="LoginUserControl1_LoginEmailRequiredFieldValidator" style="color:Red;display:none;"></span>
<span id="LoginUserControl1_LoginEmailFormatValidator" style="color:Red;display:none;"></span>
<label>
Password</label>
<div class="leftTBoxSide">
</div>
<div>
<input name="LoginUserControl1$passwordTextBox" type="password" id="LoginUserControl1_passwordTextBox" class="passwordTBox" /></div>
<div class="rightTBoxSide">
</div>
<span id="LoginUserControl1_LoginPasswordRequiredFieldValidator" style="color:Red;display:none;"></span>
<input type="image" name="LoginUserControl1$loginButton" id="LoginUserControl1_loginButton" class="loginBtn" src="Media/Images/HomePage/goButton.gif.ashx" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("LoginUserControl1$loginButton", "", true, "", "", false, false))" style="border-width:0px;" />
<span class="checkbox"><input id="LoginUserControl1_RememberMeCheckbox" type="checkbox" name="LoginUserControl1$RememberMeCheckbox" /></span>
<label class="checkbox_label" for="LoginUserControl1_RememberMeCheckbox">
Remember me</label>
<a id="LoginUserControl1_forgotPasswordButton" class="forgotPasswordBtn" href="javascript:__doPostBack('LoginUserControl1$forgotPasswordButton','')">Forgot password?</a><span
style="margin-right: 3px;">Student?</span><a href="Student/RegisterStudent.aspx">Register</a></div>
</div>
</div>
</div>
</div>
<!-- /Login -->
<!-- Search -->
<div id="search">
</div>
<!-- /Search -->
<!-- News -->
<div id="news">
<!-- News Glider-->
<div id="newsGlider">
<div id="previousDiv">
<img src="Media/Images/HomePage/prev.png.ashx" id="previous" alt="Previous" onclick="my_glider.previous();return false;" /></div>
<div class="scroller">
<div class="content">
<input type="hidden" name="newsRepeater$ctl00$idHdnField" id="newsRepeater_ctl00_idHdnField" value="17" />
<div class="section" id='News_17'>
<h2 class="newsTitle">
SmartSoft are the champs
</h2>
<img id="newsRepeater_ctl00_Image1" class="newsImage" alt="MET Stories" src="Repository/NewsComponent/SOriginalFinal.jpg" style="border-width:0px;" />
<p class="newsParagraph">
After competing against CSEN and BI companies. SmartSoft managed to
win the Software Engineering Competition for Spring 2010 after developing an outstanding online tool for automating agile software management. Congratulations to SmartSoft!
</p>
<div id="newsRepeater_ctl00_morelink" style="display:none;">
<a class="newsLink" href=""
target="_blank">more</a>
</div>
</div>
<input type="hidden" name="newsRepeater$ctl01$idHdnField" id="newsRepeater_ctl01_idHdnField" value="1" />
<div class="section" id='News_1'>
<h2 class="newsTitle">
Media Engineering at the GUC
</h2>
<img id="newsRepeater_ctl01_Image1" class="newsImage" alt="MET Stories" src="Repository/NewsComponent/library.jpg" style="border-width:0px;" />
<p class="newsParagraph">
Media Engineering and Technology aims at the evolving field of nearly all aspects of information and multimedia processing. The study program in "Media Engineering and Technology" rests on the same fundamentals as for Information Technology.
</p>
<div id="newsRepeater_ctl01_morelink" style="display: block;">
<a class="newsLink" href="About/Programs.aspx"
target="_blank">more</a>
</div>
</div>
</div>
</div>
<img src="Media/Images/HomePage/next.png.ashx" id="next" alt="Next" onclick="my_glider.next();return false;" /><!--<div id="nextDiv"></div> -->
</div>
</div>
<!-- /News -->
<!-- Footer -->
<div id="footer">
<h5 class="right">
<a href="Feeds/RSS.aspx">
<img src="Media/Icons/rss.png.ashx" alt="RSS" style="border-style: none; position: relative;
top: 3px; padding-right: 2px;" /><b>RSS</b> Feeds</a> <a href="Credits/robusta.aspx">
Credits</a>
</h5>
<h5 class="left">
Copyright © 2008 GUC. All Rights Reserved.</h5>
</div>
<!-- /Footer -->
</div>
<!-- /Content -->
</div>
<!-- /Page Container -->
<!-- Extra Divs -->
<!-- /Extra Divs -->
<div id="glider_script">
<script type="text/javascript" charset="utf-8">
var my_glider = new Glider('newsGlider', {duration:1.0, autoGlide:true, frequency:15});
</script>
</div>
<script type="text/javascript">
//<![CDATA[
var Page_Validators = new Array(document.getElementById("LoginUserControl1_LoginEmailRequiredFieldValidator"), document.getElementById("LoginUserControl1_LoginEmailFormatValidator"), document.getElementById("LoginUserControl1_LoginPasswordRequiredFieldValidator"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var LoginUserControl1_LoginEmailRequiredFieldValidator = document.all ? document.all["LoginUserControl1_LoginEmailRequiredFieldValidator"] : document.getElementById("LoginUserControl1_LoginEmailRequiredFieldValidator");
LoginUserControl1_LoginEmailRequiredFieldValidator.controltovalidate = "LoginUserControl1_usernameTextBox";
LoginUserControl1_LoginEmailRequiredFieldValidator.errormessage = "Email required.";
LoginUserControl1_LoginEmailRequiredFieldValidator.display = "None";
LoginUserControl1_LoginEmailRequiredFieldValidator.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
LoginUserControl1_LoginEmailRequiredFieldValidator.initialvalue = "";
var LoginUserControl1_LoginEmailFormatValidator = document.all ? document.all["LoginUserControl1_LoginEmailFormatValidator"] : document.getElementById("LoginUserControl1_LoginEmailFormatValidator");
LoginUserControl1_LoginEmailFormatValidator.controltovalidate = "LoginUserControl1_usernameTextBox";
LoginUserControl1_LoginEmailFormatValidator.errormessage = "Must be in the form of user@student.guc.edu.eg OR user@guc.edu.eg";
LoginUserControl1_LoginEmailFormatValidator.display = "None";
LoginUserControl1_LoginEmailFormatValidator.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
LoginUserControl1_LoginEmailFormatValidator.validationexpression = "\\w+([-+.\']\\w+)*@(student.)?guc.edu.eg";
var LoginUserControl1_LoginPasswordRequiredFieldValidator = document.all ? document.all["LoginUserControl1_LoginPasswordRequiredFieldValidator"] : document.getElementById("LoginUserControl1_LoginPasswordRequiredFieldValidator");
LoginUserControl1_LoginPasswordRequiredFieldValidator.controltovalidate = "LoginUserControl1_passwordTextBox";
LoginUserControl1_LoginPasswordRequiredFieldValidator.errormessage = "Password required.";
LoginUserControl1_LoginPasswordRequiredFieldValidator.display = "None";
LoginUserControl1_LoginPasswordRequiredFieldValidator.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
LoginUserControl1_LoginPasswordRequiredFieldValidator.initialvalue = "";
//]]>
</script>
<script type="text/javascript">
<!--
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
// -->
</script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.ValidatorCalloutBehavior, {"closeImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hefaIKnoyXSIFnFPdZX8u_dwAMV0u0RfKJgPDjFETh3g1&t=633887970297152468","highlightCssClass":"invalidInput","id":"LoginUserControl1_LoginEmailRequiredFieldValidatorExtender","warningIconImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hpBwM9IEYB0L_JPlcVCV_StBVa8rc0SgI1L1ARCQ2e4o1&t=633887970297152468"}, null, null, $get("LoginUserControl1_LoginEmailRequiredFieldValidator"));
});
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.ValidatorCalloutBehavior, {"closeImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hefaIKnoyXSIFnFPdZX8u_dwAMV0u0RfKJgPDjFETh3g1&t=633887970297152468","highlightCssClass":"invalidInput","id":"LoginUserControl1_LoginEmailFormatValidatorExtender","warningIconImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hpBwM9IEYB0L_JPlcVCV_StBVa8rc0SgI1L1ARCQ2e4o1&t=633887970297152468"}, null, null, $get("LoginUserControl1_LoginEmailFormatValidator"));
});
document.getElementById('LoginUserControl1_LoginEmailRequiredFieldValidator').dispose = function() {
Array.remove(Page_Validators, document.getElementById('LoginUserControl1_LoginEmailRequiredFieldValidator'));
}
document.getElementById('LoginUserControl1_LoginEmailFormatValidator').dispose = function() {
Array.remove(Page_Validators, document.getElementById('LoginUserControl1_LoginEmailFormatValidator'));
}
document.getElementById('LoginUserControl1_LoginPasswordRequiredFieldValidator').dispose = function() {
Array.remove(Page_Validators, document.getElementById('LoginUserControl1_LoginPasswordRequiredFieldValidator'));
}
//]]>
</script>
</form>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-6040050-1");
pageTracker._trackPageview();
</script>
</body>
</html>
You can usually get the source for any website by hitting ctrl+u (at least for Chrome)
You need to read up on XHR.
See here: http://code.google.com/chrome/extensions/xhr.html
This will let you load the contents of http://met.guc.edu.eg into a variable.
Then you you need to read up on regexp, which would let you extract the information that you want.
It is almost impossible to give a full answer without actually doing it.
You may find it easier to load the content in an Iframe that you control the dimensions / scroll of.
