feat(extension): Add custom header support for extension (#2111)

Fixes #1287

2 files changed, 20 insertions, 6 deletions

diff --git a/apps/browser-extension/src/utils/settings.ts b/apps/browser-extension/src/utils/settings.ts
index c3ac50d2..463efd2b 100644
--- a/apps/browser-extension/src/utils/settings.ts
+++ b/apps/browser-extension/src/utils/settings.ts
@@ -7,20 +7,22 @@ export const DEFAULT_SHOW_COUNT_BADGE = false;
 const zSettingsSchema = z.object({
   apiKey: z.string(),
   apiKeyId: z.string().optional(),
-  address: z.string(),
+  address: z.string().optional().default("https://cloud.karakeep.app"),
   theme: z.enum(["light", "dark", "system"]).optional().default("system"),
   showCountBadge: z.boolean().default(DEFAULT_SHOW_COUNT_BADGE),
   useBadgeCache: z.boolean().default(true),
   badgeCacheExpireMs: z.number().min(0).default(DEFAULT_BADGE_CACHE_EXPIRE_MS),
+  customHeaders: z.record(z.string(), z.string()).optional().default({}),
 });
 
 const DEFAULT_SETTINGS: Settings = {
   apiKey: "",
-  address: "",
+  address: "https://cloud.karakeep.app",
   theme: "system",
   showCountBadge: DEFAULT_SHOW_COUNT_BADGE,
   useBadgeCache: true,
   badgeCacheExpireMs: DEFAULT_BADGE_CACHE_EXPIRE_MS,
+  customHeaders: {},
 };
 
 export type Settings = z.infer<typeof zSettingsSchema>;
diff --git a/apps/browser-extension/src/utils/trpc.ts b/apps/browser-extension/src/utils/trpc.ts
index 76534bcb..b3215d9d 100644
--- a/apps/browser-extension/src/utils/trpc.ts
+++ b/apps/browser-extension/src/utils/trpc.ts
@@ -18,10 +18,11 @@ let currentSettings: {
   apiKey: string;
   badgeCacheExpireMs: number;
   useBadgeCache: boolean;
+  customHeaders: Record<string, string>;
 } | null = null;
 
 export async function initializeClients() {
-  const { address, apiKey, badgeCacheExpireMs, useBadgeCache } =
+  const { address, apiKey, badgeCacheExpireMs, useBadgeCache, customHeaders } =
     await getPluginSettings();
 
   if (currentSettings) {
@@ -31,6 +32,9 @@ export async function initializeClients() {
       currentSettings.badgeCacheExpireMs !== badgeCacheExpireMs;
     const useBadgeCacheChanged =
       currentSettings.useBadgeCache !== useBadgeCache;
+    const customHeadersChanged =
+      JSON.stringify(currentSettings.customHeaders) !==
+      JSON.stringify(customHeaders);
 
     if (!address || !apiKey) {
       // Invalid configuration, clean
@@ -40,7 +44,7 @@ export async function initializeClients() {
       return;
     }
 
-    if (addressChanged || apiKeyChanged) {
+    if (addressChanged || apiKeyChanged || customHeadersChanged) {
       // Switch context completely → discard the old instance and wipe persisted cache
       const persisterForCleanup = createChromeStorage();
       await persisterForCleanup.removeClient();
@@ -58,7 +62,8 @@ export async function initializeClients() {
       !addressChanged &&
       !apiKeyChanged &&
       !cacheTimeChanged &&
-      !useBadgeCacheChanged
+      !useBadgeCacheChanged &&
+      !customHeadersChanged
     ) {
       return;
     }
@@ -66,7 +71,13 @@ export async function initializeClients() {
 
   if (address && apiKey) {
     // Store current settings
-    currentSettings = { address, apiKey, badgeCacheExpireMs, useBadgeCache };
+    currentSettings = {
+      address,
+      apiKey,
+      badgeCacheExpireMs,
+      useBadgeCache,
+      customHeaders,
+    };
 
     // Create new QueryClient with updated settings
     queryClient = new QueryClient();
@@ -92,6 +103,7 @@ export async function initializeClients() {
           headers() {
             return {
               Authorization: `Bearer ${apiKey}`,
+              ...customHeaders,
             };
           },
           transformer: superjson,