时间戳

首页 > 解决方案 > 如何在网页上制作 chrome 扩展类型？

javascript - 如何在网页上制作 chrome 扩展类型？

问题描述

我有一个 chrome 扩展程序，我设置得太理想了，让我登录到一个网站。所需要的只是输入我的电子邮件，单击输入，然后输入我的密码和网站上显示的数字代码。我已经创建了扩展选项页面，我在其中输入了我的电子邮件和密码，因此它被保存为一个值：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() ]
      }
    ]);
  });
});

我只是不知道怎么做：

  1. 输入我的电子邮件并按回车
  2. 输入我的密码
  3. 复制并粘贴屏幕上显示的代码

（最好是自动的，但如果不可能的话，我可以点击扩展名）

这是我要登录的网站的第一页和第二页

<!-- 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>

第二：

<!-- 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>

标签： javascripthtmlgoogle-chromegoogle-chrome-extension

解决方案

推荐阅读