私は HTML と javaScript を使用しています。ポップアップに Web サイトからの情報を表示する chrome extension を作成しようとしています。
私の Web ページのコンテキストでhttp://met.guc.edu.egのページ ソースを取得し、それを使用して "li" タグをいくつか取得し、それらに対していくつかの作業を行う必要があります ( RegEx )
たとえば、学生が受講したコースを Web ページに表示します -- http://met.guc.edu.egから取得して、ポップアップに適切な方法で表示します
これに対する本当の答えはまだないので、私が使用する方法を投稿します-それが最善の方法かどうかはわかりません-しかし、それは機能します。
XHRが最良のアイデアではない理由は、特定のタブの正確なソースが常に提供されるとは限らないためです。この方法で提供されます。
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);
});
求められたとおり、ここにソースがあります：
<!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>
通常、ctrl+u を押すと、任意の Web サイトのソースを取得できます (少なくとも 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.