我正在创建一个带有登录弹出窗口的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()
函数未执行。有什么问题?
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/"
-无需指定端口或*