如何处理Chrome扩展程序弹出窗口中的点击?

问题描述 投票:0回答:1

我正在创建一个带有登录弹出窗口的chrome扩展程序。我应该将登录表单数据发送到后端API,以获取身份验证令牌。然后,我想将此令牌保存在本地存储中,并将登录弹出窗口更改为另一个具有“退出”按钮的弹出窗口。此按钮将从本地存储中删除身份验证令牌,然后再次将弹出窗口更改回登录状态。我编写了以下代码来执行相同的操作:

popup.html

<html>
  <script src="popup.js"></script>
  <div id="welcome" align="left">
    <h3>TimeTracker</h3>
    <form id="login_form" method="post" name="login_form">
      <label>Email :</label>
      <input type="text" name="email" id="email" />
      <br /><br />
      <label>Password :</label>
      <input type="password" name="password" id="password" />
      <br /><br />
      <button type="submit" id="login">Login</button>
    </form>
  </div>
</html>

popup.js

document.addEventListener("DOMContentLoaded", function() {
  var signin_btn = document.getElementById("login");

  signin_btn.addEventListener("click", function() {
    validate();
  });
});

function validate() {
  var username = document.getElementById("email").value;
  var password = document.getElementById("password").value;

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      auth_token = JSON.parse(this.responseText)["token"];
      localStorage.setItem("auth_token", auth_token);
      console.log("auth from popup.js: ", auth_token);
      chrome.browserAction.setPopup({ popup: "popup_signed_in.html" });
    }
    xhttp.open("POST", "http://127.0.0.1:5000/userauth/login", true);
    xhttp.setRequestHeader("Content-Type", "application/json");
    xhttp.send(JSON.stringify({ email: username, password: password }));
  };
}

popup_signed_in.html

<html>
  <script src="popup_signed_in.js"></script>
  <div align="center">
    Dont waste time! Timetracker is monitoring your productivity
    <br />
    <br />
    <button id="signout">Sign out</button>
  </div>
</html>

popup_signed_in.js

document.addEventListener("DOMContentLoaded", function() {
  var signout_btn = document.getElementById("signout");

  signout_btn.addEventListener("click", function() {
    signout();
  });
});

function signout() {
  localStorage.removeItem("auth_token");
  chrome.browserAction.setPopup({ popup: "popup.html" });
}

manifest.json

{
    "manifest_version": 2,
    "name": "TimeTracker",
    "description": "Track your web and app browsing habbits!",
    "version": "1.0",
    "author": "Tarun Khare",
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "Just observing your current url.",
        "default_popup": "popup.html"
    },
    "permissions": ["tabs", "activeTab", "http://127.0.0.1:5000/*", "storage"],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    }
}

但是当我填写登录详细信息并单击“登录”时,什么也没有发生。弹出窗口不会更改,也不会在控制台中显示任何错误或日志。我假设表单和事件侦听器存在问题,因此validate()函数未执行。有什么问题?

javascript google-chrome google-chrome-extension
1个回答
0
投票
  • chrome.browserAction.setPopup不会立即切换弹出窗口。为此,您需要location.href = "popup_signed_in.html"
  • [xhttp.open和后续行应移出xhttp.onreadystatechange

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        //.......
      }
    };
    xhttp.open('POST', 'http://127.0.0.1:5000/userauth/login', true);
    xhttp.setRequestHeader('Content-Type', 'application/json');
    xhttp.send(JSON.stringify({ email: username, password: password }));
    
  • ["http://127.0.0.1:5000/*"可以是"http://127.0.0.1/"-无需指定端口或*

  • 弹出窗口是一个单独的窗口,因此它具有自己的devtools,您可以在其中调试代码并查看错误:右键单击弹出窗口内部,然后单击“检查”。
© www.soinside.com 2019 - 2024. All rights reserved.