Question

用户登录后，我有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"
    }
  }

点击按钮后如何在Chrome扩展程序中显示另一个页面？

0 个答案: