How do I make a chrome extension type on a webpage?

user_14673222 0
Viewed 922

I have a chrome extension that I've set up too ideally log me in to a website. All that is needed is too type in my email, click enter, and type in my password and a number code that appears on the website. I've already created extension options page where I input my email and password so it is saved as a value: 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);
  });
}

I've created the thing that listens for the correct web page I believe:

// 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() ]
      }
    ]);
  });
});

I just don't know how to make it:

  1. type in my email and hit enter
  2. Type in my password
  3. 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>&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>&nbsp;</p><hr><p></p>
                                        <p>&nbsp;</p>
                                        <p>&nbsp;</p>
                                        <p>&nbsp;</p>
                                        <p>&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!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\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-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\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>&nbsp;</p><p>&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>

Second:

<!-- 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. &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>&nbsp;</p><p>&nbsp;</p><p><i>Verifying credentials...</i></p></center>");
    $.ajax( {
            type: "POST",
            url: 'startlogin.php',
            data: "cdacaemail=" + cdacaemail + "&cdacapinnum=" + cdacapinnum + "&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!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\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-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\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>&nbsp;</p><p>&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>

google-chrome-extension google-chrome html javascript
0 Answers
Related