У меня есть 2 страницы, страница входа и другая, после того как пользователь вошел в систему. После нажатия на кнопку отправить в popup.html
пользователь должен быть перенаправлен на loggedIn.html
.Но после нажатия кнопки «Отправить» страница не перенаправляется на loggedIn.html
. Однако она изменяется после однократного нажатия в другом месте браузера и повторного нажатия на плагин.Как я могу изменить страницу, когда расширение открыто?window.location.href
также не работает.
popup.html
<!doctype html>
<html style="width:325px; height:600px;">
<head>
<title>TITLE</title>
<script src="static/libs/jquery.min.js"></script>
<script src="static/popup.js"></script>
</head>
<body>
<p>SOME TEXT</p>
<p><a href="http://localhost:7080/" target="_blank">Learn more</a></p>
<form id="login" method="post">
<input type="text" name="username" placeholder="Username">
<input type="submit" value="Request Authentication">
</form>
</body>
</html>
popup.js
$(document).ready(function() {
$("#login").submit(function() {
$.ajax({
type: 'POST',
contentType: 'application/json',
url: 'http://localhost:7080/login/',
success: function (data) {
if (data) {
chrome.browserAction.setPopup({popup: "/loggedIn.html"});
}
else {
chrome.browserAction.setPopup({popup: "/loggedIn.html"});
}
},
error: function(data) {
chrome.browserAction.setPopup({popup: "/loggedIn.html"});
}
});
});
});
loggedIn.html
<!doctype html>
<html>
<head>
<title>TITLE</title>
<script src="static/libs/jquery.min.js"></script>
</head>
<body>
<h1>SOME HEADING</h1>
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
<form>
<input type="button" id="loggout" value="Log Out">
</form>
</body>
</html>
manifest.json
{
"name": "NAME",
"version": "1.0",
"description": "Chrome Extension",
"manifest_version": 2,
"permissions": [],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon.png",
"32": "images/icon.png",
"48": "images/icon.png",
"128": "images/icon.png"
}
},
"icons": {
"16": "images/icon.png",
"32": "images/icon.png",
"48": "images/icon.png",
"128": "images/icon.png"
}
}