我如何改变与谷歌Chrome扩展登录后的UI

How do I change the UI after a login with Google Chrome Extensions?

本文关键字：扩展 Chrome 登录 UI 谷歌 何改变 改变      更新时间：2023-09-26

好的，所以我正在构建一个扩展在谷歌浏览器，我有它，当我的扩展的图标被点击一个登录表单弹出(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，但很明显，如果没有沙箱，扩展不支持它。

就像用JavaScript隐藏和显示元素一样简单。默认情况下隐藏#logged-indiv。一旦认证完成，隐藏#login-form，显示#logged-in。假设您将在他们登录后存储某种令牌，您可以将其存储在localStorage中，并在每次加载pop .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>
相关文章：