#javascript #html #google-chrome #google-chrome-extension
#javascript #HTML #google-chrome #google-chrome-extension
Вопрос:
У меня есть расширение Chrome, которое я настроил слишком идеально для входа на веб-сайт. Все, что нужно, это ввести мой адрес электронной почты, нажать enter и ввести мой пароль и цифровой код, который отображается на веб-сайте. Я уже создал страницу параметров расширения, где я ввожу свой адрес электронной почты и пароль, чтобы они сохранялись как значение: HTML:
<!DOCTYPE html>
<html>
<head><title>Charter Gradebook Helper Options</title></head>
<body>
<div class="header">
<h1>Charter Gradebook Helper Options:</h1>
<p>Change the username and password to login with</p>
</div>
Email:
<label>
<input type="text" id="ema">
</label>
<br>
Password:
<label>
<input type="text" id="pas">
</label>
<div id="status"></div>
<button id="save">Save</button>
<script src="options.js"></script>
</body>
</html> JS:
function save_options() {
var email = document.getElementById('ema').value;
var password = document.getElementById('pas').value;
chrome.storage.sync.set({
email: ema,
password: pas,
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Saving...';
setTimeout(function() {
status.textContent = 'Saved successfully!';
}, 750);
});
} Я создал то, что, по моему мнению, прослушивает правильную веб-страницу:
// Copyright (c) 2011 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
// That fires when a page's URL contains a 'cdacharter.org/portal/' ...
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlEquals: 'https://www.cdacharter.org/portal/' },
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
}); Я просто не знаю, как это сделать:
- type in my email and hit enter
- Type in my password
- Copy and paste a code that is shown on screen
(preferably automatically, but if that’s not possible I could click the extension if need be)
Here is the first and second page of the website that I am trying to log into
<!-- saved from url=(0034)https://www.cdacharter.org/portal/ -->
<html data-kantu="1"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CDA Charter Panther Portal</title>
<link rel="stylesheet" type="text/css" href="./First_files/stylesheet.css">
</head>
<body translate="no" data-new-gr-c-s-check-loaded="14.984.0" data-gr-ext-installed="">
<div id="page-wrapper">
<div id="title">
Coeur d'Alene Charter Academy Panther Portal
</div>
<div id="maincontent" style="border-style: none;">
<center>
<table width="50%">
<tbody><tr>
<td align="center">
Email Address:
<input type="text" size="45" maxlength="64" name="email" id="email" onchange="startlogin(this);">
</td>
</tr>
<tr>
<td>
<p>amp;nbsp;</p><hr><p></p>
To login, enter your email address above and press [Enter]. Students, you will
need to type in your full school-assigned email address. Parents, please note
that we must have your email address on file for this to work.
<p>
You can request a password reset by checking this box
<input type="checkbox" id="passreset" value="1">
and <u>then</u> filling in your email address above and pressing [Enter]. A message
will be emailed to you with a PIN you will need. Note this this will only
work if your email address is on file with our office.
</p><p>amp;nbsp;</p><hr><p></p>
<p>amp;nbsp;</p>
<p>amp;nbsp;</p>
<p>amp;nbsp;</p>
<p>amp;nbsp;</p>
Footnotes: Please allow popup windows and web browser cookies for our web site. The popups
will allow you to see the detailed gradebook reports. The cookies will allow the
security features of this site to pass information unique to you to our server
to correctly identify you and grant you access to your data. The cookie is simply
a random string stored by your browser and has no other information imbedded in it
that could identify you nor does it have any information about you covertly taken
from your computer.
<p>
</p></td>
</tr>
</tbody></table>
</center>
</div>
</div>
<script src="./First_files/jquery-3.2.1.js"></script>
<script language="javascript">
function validateEmail(email)
{
var re = /(?:[a-z0-9!#$%amp;'* /=?^_`{|}~-] (?:.[a-z0-9!#$%amp;'* /=?^_`{|}~-] )*|"(?:[x01-x08x0bx0cx0e-x1fx21x23-x5bx5d-x7f]|\[x01-x09x0bx0cx0e-x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.) [a-z0-9](?:[a-z0-9-]*[a-z0-9])?|[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[x01-x08x0bx0cx0e-x1fx21-x5ax53-x7f]|\[x01-x09x0bx0cx0e-x7f]) )])/;
return(re.test(email));
}
function startlogin(obj)
{
if (validateEmail(obj.value))
{
var email = obj.value;
}
else
{
alert("Email address does not appear to be in a valid format.");
obj.focus();
return;
}
if (document.getElementById("passreset").checked)
var nextstep = "passreset.php";
else
var nextstep = "startlogin.php";
$("#maincontent").html("<center><p>amp;nbsp;</p><p>amp;nbsp;</p><p><i>Generating a random PIN...</i></p></center>");
$.ajax( {
type: "POST",
url: nextstep,
data: "email=" email,
dataType: "html"
})
.done (function(data) {
$("#maincontent").html(data);
$("#maincontent").focus();
})
.fail ( function(data) {
alert('Login system error.');
});
return;
}
</script>
</body></html> Второй:
<!-- saved from url=(0034)https://www.cdacharter.org/portal/ -->
<html data-kantu="1"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CDA Charter Panther Portal</title>
<link rel="stylesheet" type="text/css" href="./CDA Charter Panther Portal_files/stylesheet.css">
</head>
<body translate="no" data-new-gr-c-s-check-loaded="14.984.0" data-gr-ext-installed="">
<div id="page-wrapper">
<div id="title">
Coeur d'Alene Charter Academy Panther Portal
</div>
<div id="maincontent" style="border-style: none;">
If/when we go to 2-step authentication, you will need your password <u>and</u> a random PIN<br>(<i>which will be emailed or texted to you</i>) to login. amp;nbsp; For now, we'll just show you the PIN here.<br> <b>40321</b> <br>Use this to complete the login below.<br><p>Student Login Initiated</p><form method="POST" id="completeloginform"><table align="center"><input type="hidden" name="cdacaemail" value="macdun24@cdapanthers.org"><tbody><tr><td>PIN:</td><td><input autocomplete="off" type="text" name="cdacapinnum" size="32" maxlength="5" value="" style="text-align:center;"></td></tr><tr><td>Password:</td><td><input autocomplete="off" type="password" name="cdacapass" size="32" maxlength="32" value="" style="text-align:center;"></td></tr><tr><td></td><td align="center"><input type="button" value=" Login " onclick="completelogin();"></td></tr></tbody></table></form><p></p><script language="javascript">
function completelogin()
{
var cdacaemail = document.getElementById("completeloginform").elements.namedItem("cdacaemail").value;
var cdacapinnum = document.getElementById("completeloginform").elements.namedItem("cdacapinnum").value;
var cdacapass = document.getElementById("completeloginform").elements.namedItem("cdacapass").value;
$("#maincontent").html("<center><p>amp;nbsp;</p><p>amp;nbsp;</p><p><i>Verifying credentials...</i></p></center>");
$.ajax( {
type: "POST",
url: 'startlogin.php',
data: "cdacaemail=" cdacaemail "amp;cdacapinnum=" cdacapinnum "amp;cdacapass=" cdacapass,
dataType: "html"
})
.done (function(data) {
$("#maincontent").html(data);
$("#maincontent").focus();
})
.fail ( function(data) {
alert('Login system error..');
});
return;
}
function openemup()
{
document.getElementById("completeloginform").elements.namedItem("cdacapinnum").disabled = false;
document.getElementById("completeloginform").elements.namedItem("cdacapass").disabled = false;
document.getElementById("completeloginform").elements.namedItem("cdacapinnum").focus();
return(1);
}
timerID = setTimeout('openemup();',1000);
</script>
</div>
</div>
<script src="./CDA Charter Panther Portal_files/jquery-3.2.1.js"></script>
<script language="javascript">
function validateEmail(email)
{
var re = /(?:[a-z0-9!#$%amp;'* /=?^_`{|}~-] (?:.[a-z0-9!#$%amp;'* /=?^_`{|}~-] )*|"(?:[x01-x08x0bx0cx0e-x1fx21x23-x5bx5d-x7f]|\[x01-x09x0bx0cx0e-x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.) [a-z0-9](?:[a-z0-9-]*[a-z0-9])?|[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[x01-x08x0bx0cx0e-x1fx21-x5ax53-x7f]|\[x01-x09x0bx0cx0e-x7f]) )])/;
return(re.test(email));
}
function startlogin(obj)
{
if (validateEmail(obj.value))
{
var email = obj.value;
}
else
{
alert("Email address does not appear to be in a valid format.");
obj.focus();
return;
}
if (document.getElementById("passreset").checked)
var nextstep = "passreset.php";
else
var nextstep = "startlogin.php";
$("#maincontent").html("<center><p>amp;nbsp;</p><p>amp;nbsp;</p><p><i>Generating a random PIN...</i></p></center>");
$.ajax( {
type: "POST",
url: nextstep,
data: "email=" email,
dataType: "html"
})
.done (function(data) {
$("#maincontent").html(data);
$("#maincontent").focus();
})
.fail ( function(data) {
alert('Login system error.');
});
return;
}
</script>
</body></html> Комментарии:
1. Чтобы ввести учетные данные, сначала выполните поиск в полях ввода, используя соответствующий селектор CSS. Например,
document.querySelector('input#username'). Затем задайте для свойства value предполагаемое значение. Для ввода имени пользователя задайте значение имени пользователя. Как только все поля ввода будут заполнены, найдите кнопку входа и вызовите метод clickbutton.click().