如何在Chrome扩展Manifest V3中使用@angular/fire并持久化登录状态？

核心原因 #

Chrome Extension V3的内容脚本/侧边栏环境与普通SPA的localStorage完全隔离，Angular Fire默认存储在localStorage的JWT无法跨扩展会话保留，即便配置了相关权限也无效。

方案1：替换存储为 Chrome Extension Storage（推荐） #

Angular Fire支持自定义身份验证存储实现，直接使用Chrome官方提供的chrome.storage.local（持久化存储）或chrome.storage.session（会话级存储），可完美解决跨加载状态保留问题。

步骤：

1. 实现AuthStorage接口，封装Chrome Storage API：

import { AuthStorage } from '@angular/fire/auth';
import { Injectable } from '@angular/core';

@Injectable()
export class ChromeAuthStorage implements AuthStorage {
  async getItem(key: string): Promise<string | null> {
    const stored = await chrome.storage.local.get(key);
    return stored[key] ?? null;
  }

  async setItem(key: string, value: string): Promise<void> {
    await chrome.storage.local.set({ [key]: value });
  }

  async removeItem(key: string): Promise<void> {
    await chrome.storage.local.remove(key);
  }
}

2. 在Angular模块中替换默认存储实现：

import { NgModule } from '@angular/core';
import { AngularFireAuthModule, AUTH_STORAGE } from '@angular/fire/auth';
import { ChromeAuthStorage } from './chrome-auth-storage.service';

@NgModule({
  imports: [AngularFireAuthModule],
  providers: [
    { provide: AUTH_STORAGE, useClass: ChromeAuthStorage }
  ]
})
export class AuthModule {}

3. 确认manifest中已声明"storage"权限（你的配置已包含，无需修改）。

方案2：配置 Angular Fire 使用 Cookie 存储（不推荐） #

若坚持使用Cookie，需注意扩展环境的Cookie隔离限制：

1. 你的manifest已配置"cookies"权限和<all_urls>主机权限，满足基础要求。
2. 修改Firebase Auth初始化配置，强制启用Cookie存储：

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';

const firebaseConfig = {
  // 你的Firebase项目配置
};

@NgModule({
  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule.setPersistence('local')
  ]
})
export class AppModule {}

注意：扩展上下文的Cookie与网页Cookie完全隔离，仅扩展自身可访问，且Firebase Auth的Cookie存储在扩展环境下可能存在跨域兼容性问题，稳定性不如Chrome Storage。

关键说明 #

扩展的内容脚本/侧边栏属于独立上下文，与宿主页面的localStorage物理隔离，无法通过权限配置打破这种隔离，因此必须使用扩展专属的存储方案。若你的Angular应用运行在侧边栏而非内容脚本，环境权限更完整，存储方案的兼容性会更好。

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