Question

好的，我正在Google Chrome中构建一个扩展程序，并且我已经拥有它，以便在点击我的扩展程序图标时弹出一个登录表单（default_popup）。当他们填写此表单时，它会向我的服务器发送一个ajax请求，进行身份验证并发回我的令牌。

到目前为止一切顺利。

现在，如何更改弹出窗口以显示已经过身份验证的其他内容？

我怀疑这是一个非常简单的问题需要解决，但我一直在寻找解决方案的时间，我找不到一个。

编辑：以下是我到目前为止所做的事情：

$(document).on('submit','#login',function(e){
    e.preventDefault();
    var email = $('#email'),
        password = $('#password');
$.ajax({
    url: 'https://myurl.com/api/request?email='+email+'&password='+password,
    crossDomain: true,
    cache: false,
    async: false,
    dataType: 'json',
    success: function(output) {
        if (output.status == true) {
            api_key = output.results.api_key;
            api_secret = output.results.api_secret;
            localStorage.setItem('api_key',output.results.api_key);
            localStorage.setItem('api_secret',output.results.api_secret);
        }
    }); });

我想在登录完成后将输出重新呈现给其他内容。这样做有干净的方法吗？通常我会使用handlebarsjs，但显然扩展不支持它没有沙盒。

Answer 1

使用JavaScript隐藏和显示元素非常简单。默认情况下隐藏#logged-in div。身份验证完成后，隐藏#login-form并显示#logged-in。假设您在登录后将存储某种令牌，您可以将其存储在localStorage中，并在每次加载popup.html时检查它。如果有，请显示#logged-in，如果不是，则显示#login-form。

<html>
  <body>
    <div id="login-form">
      <!-- All your login form content -->
    </div>
    <div id="logged-in">
      <!-- All your content once authenticated-->
    </div>
  </body>
</html>

使用Google Chrome扩展程序登录后如何更改用户界面？

1 个答案: