Chrome扩展实现Web应用Cookie认证：登录状态无法持久化问题排查

首先，从你的代码来看，登录请求成功但Cookie没持久化，主要问题出在跨域Cookie的处理和AJAX请求的配置上，我来一步步帮你解决：

一、为什么Cookie没创建/持久化？ #

1. AJAX请求未开启凭证携带 #

jQuery的AJAX默认不会携带Cookie，也不会接收后端返回的Set-Cookie头，必须显式开启withCredentials才能让跨域请求处理Cookie：
修改你的扩展AJAX代码：

$('#registerButton').on('click', function(e){
    e.preventDefault(); // 阻止默认表单提交，避免页面刷新丢失状态
    $.ajax({
        url: 'https://localhost:44327/Test/Login',
        headers: {
            username: $('#username').val(),
            password: $('#password').val()
        },
        type: "POST",
        // 关键配置：允许携带和接收跨域Cookie
        xhrFields: {
            withCredentials: true
        },
        crossDomain: true
    }).done(function (data){
        console.log("登录成功，Cookie已设置");
    }).fail(function(xhr){
        console.error("登录失败：", xhr.responseText);
    });
});

2. 后端Cookie的SameSite配置问题 #

Chrome现在默认Cookie的SameSite属性为Lax，而Chrome扩展的请求属于跨域场景（扩展页面域名是chrome-extension://xxx，和你的后端域名不同），所以需要将Cookie的SameSite设为None，同时必须开启Secure（因为你用的是HTTPS）：
修改Startup.cs的Cookie配置：

services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(o => 
    {
        o.LoginPath = new PathString("/");
        // 跨域场景下必须设置SameSite为None，同时开启Secure
        o.Cookie.SameSite = SameSiteMode.None;
        o.Cookie.SecurePolicy = CookieSecurePolicy.Always;
        o.Cookie.HttpOnly = true; // 保持HttpOnly防止XSS攻击，扩展无法直接读取，但可通过Chrome API获取
        o.Cookie.MaxAge = TimeSpan.FromDays(1); // 和ExpiresUtc配置保持一致
    });

3. 扩展权限配置 #

要让扩展能访问后端域名的Cookie，需要在manifest.json中添加对应权限：

"permissions": [
    "cookies",
    "https://localhost:44327/*"
]

二、获取已登录用户信息&持久化登录状态的最佳方案 #

1. 后端提供用户信息接口 #

创建一个需要身份认证的接口，从HttpContext.User中提取用户Claims信息返回：

[Authorize]
[HttpGet("api/User/GetProfile")]
public IActionResult GetProfile()
{
    var username = User.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Name)?.Value;
    var role = User.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Role)?.Value;
    return Ok(new { Username = username, Role = role });
}

扩展通过AJAX请求该接口（同样带上withCredentials: true），就能获取登录用户的详细信息。

2. 利用Chrome Storage缓存用户状态 #

为了避免每次都请求后端，可以用Chrome的chrome.storage.local缓存用户信息，同时监听Cookie变化来同步状态：

// 登录成功后拉取并缓存用户信息
function fetchAndCacheUserProfile() {
    $.ajax({
        url: 'https://localhost:44327/api/User/GetProfile',
        type: "GET",
        xhrFields: { withCredentials: true },
        crossDomain: true
    }).done(function(user){
        chrome.storage.local.set({ currentUser: user }, function(){
            console.log("用户信息已缓存");
        });
    });
}

// 监听Cookie变化，当登录Cookie被删除时清除本地缓存
chrome.cookies.onChanged.addListener(function(changeInfo) {
    if (changeInfo.cookie.name === ".AspNetCore.Cookies" && changeInfo.removed) {
        chrome.storage.local.remove("currentUser");
    }
});

3. 持久化登录的保障 #

• 后端已经配置了IsPersistent = true和ExpiresUtc = DateTimeOffset.Now.AddDays(1)，只要Cookie未过期，用户下次打开扩展时，请求带上Cookie就能自动保持登录状态。
• 确保Chrome浏览器没有禁用第三方Cookie（开发时可以临时在设置中开启，正式环境建议引导用户开启对应权限）。

内容的提问来源于stack exchange，提问作者RobertWelting