前言

VideoTracker v0 的视频记录仅保存在本地。当使用者更换电脑或浏览器时数据完全失效，导致跨设备使用体验极差。这是我们决定为插件添加云端同步功能的主要痛点。

技术选型

后端只需要完成登录和数据存储两项功能，Supabase 已足够满足需求。插件使用 Google 登录 作为第三方认证，同时提供邮箱注册备选方案。

Google Cloud 设置

1. 登录 Google Cloud 控制台。新建项目，例如命名为 video-tracker。说起来，
2. 在左侧菜单中选择 API 和服务 – 已启用 API 与服务接下来打开 API 库并启用 Google+ API。这一步常被忽略导致后续 OAuth 调用失败。
3. 进入 API 和服务 – 凭据 页面新建凭据：选择 OAuth 客户端 ID. 虽然我们的应用是浏览器插件。但为了能在 Supabase 完成登录流程，需要将其设置为 “Web 应用”。填写必要信息后创建，并记下弹窗中出现的 Client ID 与 Client Secret——这些将在后面 Supabase 配置中使用。怎么说呢，
4. 常见错误：
   • No client ID found for this application.
   • The requested redirect URI is not registered.
   • The requested scopes are not allowed.

Supabase 配置

1. 登录 Supabase 控制台，新建项目。
2. 左侧导航点击 Auntication – Sign In / Providers,勾选 Confirm email;新使用者通过邮箱注册后会收到确认邮件。若未确认，则无法正常登录。
3. Sroll down 至 Auth Providers – Google。填写从 Google Cloud 获得的 Client ID、Client Secret，并将回调地址设为刚才在 Google Cloud 创建的 OAuth 客户端 ID 所对应的网址。此步骤经常因回调地址错误导致授权失败。
4. 错误检查：
   • Error loading auth providers.
   • The callback URL does not match any registered domain.
   • The client secret has expired.
5. 完成上述步骤，即可在 Supabase 中启用 Google 登录功能。

注册邮箱授权补充

If you opt for email registration。verification link sent by Supabase will point to your plugin’s address. Therefore you must add this address under:

Auntication → URL Configuration → Add Plugin Address

This ensures that email verification callback reaches your extension correctly.

代码实现细节

先让 AI 一下关键流程，再逐步拆解代码实现。

插件登录流程概览： 1️⃣ 调用 `supabase.auth.signInWithOAuth })` 获取授权 URL 2️⃣ 用 `chrome.identity.launchWebAuthFlow` 打开授权窗口 3️⃣ 使用者完成 Google 授权后被重定向到 Supabase 回调地址 4️⃣ Supabase 验证返回结果并创建 session。接下来 重定向回 `chrome.identity.getRedirectURL` 5️⃣ Chrome 捕获该回调，将 access_token & refresh_token 存入 会话 6️⃣ 插件完成登录流程。以上步骤中的每一步都可能出现错误，需要细致处理异常。不过，

下面给出完整 TypeScript 实现。包括错误捕获与状态检查，

/**
* 使用 supabase + Chrome identity 实现 Google OAuth 登录
*/
async function signInWithOAuth: Promise<{success:boolean,error?:string}> {
// 获取 Chrome 预留回调地址
const redirectUrl = chrome.identity.getRedirectURL;
// Step 1 — 请求 supabase 返回授权链接
const {data,error} = await supabase.auth.signInWithOAuth({
provider。options:{
redirectTo:redirectUrl,skipBrowserRedirect:true // 防止 supabase 自动跳转到浏览器窗口
}
});if throw error;if return {success:false,error:'Missing auth URL'};return new Promise => {
// Step 2 — 打开授权窗口
chrome.identity.launchWebAuthFlow(
再看{url。data.url,interactive:true},async => {
// Chrome API 错误处理
if {
return resolve;}
if {
return resolve;怎么说呢，}
// Step 3 — 从返回 URL 中解析 token 信息
const url = new URL;const hashParams = new URLSearchParams);const accessToken = hashParams.get;const refreshToken = hashParams.get;if {
return resolve;}
try {
// Step 4 — 在 supabase 上建立 session 并存储 token
const {data:{session}。error:sessionError} =
await supabase.auth.setSession({
access_token:accessToken,refresh_token:refreshToken || ''
});if {
return resolve({
success:false,error:sessionError?.message，?'Failed to establish session'
});}
// Optional：检查 session 是否有效，例如获取使用者信息等
await checkSession;resolve，} catch{
resolve});}
}
)，});}
// 简单检查 session 示例
async function checkSession{
const {data:{user}}=await supabase.auth.getUser;话说回来，console.log;}
// 示例调用：
signInWithOAuth
.n(res=>{
if{ console.log;}
else{ console.error;}
})
.catch);/**
* 注意事项：
* • 确保 supabase 项目已正确配置 Google Provider 而且 callback 地址与 Chrome 身份验证回调匹配。* • 若 Chrome
未获得 “identity” 权限，将报错 “Missing permission”.
* • 当使用者拒绝授权时请友好提示并允许重新尝试。*/