From ec87813a257e63f8a161e7bc04679e9fab6fbcf6 Mon Sep 17 00:00:00 2001 From: Mohamed Bassem Date: Sun, 9 Nov 2025 12:21:54 +0000 Subject: feat(extension): Add custom header support for extension (#2111) Fixes #1287 --- apps/browser-extension/src/CustomHeadersPage.tsx | 155 +++++++++++++++++++++++ apps/browser-extension/src/NotConfiguredPage.tsx | 13 ++ apps/browser-extension/src/SignInPage.tsx | 15 ++- apps/browser-extension/src/main.tsx | 2 + apps/browser-extension/src/utils/settings.ts | 6 +- apps/browser-extension/src/utils/trpc.ts | 20 ++- 6 files changed, 204 insertions(+), 7 deletions(-) create mode 100644 apps/browser-extension/src/CustomHeadersPage.tsx diff --git a/apps/browser-extension/src/CustomHeadersPage.tsx b/apps/browser-extension/src/CustomHeadersPage.tsx new file mode 100644 index 00000000..1b3fd8df --- /dev/null +++ b/apps/browser-extension/src/CustomHeadersPage.tsx @@ -0,0 +1,155 @@ +import { useEffect, useState } from "react"; +import { Plus, Trash2 } from "lucide-react"; +import { useNavigate } from "react-router-dom"; + +import { Button } from "./components/ui/button"; +import { Input } from "./components/ui/input"; +import Logo from "./Logo"; +import usePluginSettings from "./utils/settings"; + +export default function CustomHeadersPage() { + const navigate = useNavigate(); + const { settings, setSettings } = usePluginSettings(); + + // Convert headers object to array of entries for easier manipulation + const [headers, setHeaders] = useState<{ key: string; value: string }[]>([]); + const [newHeaderKey, setNewHeaderKey] = useState(""); + const [newHeaderValue, setNewHeaderValue] = useState(""); + + // Update headers when settings change (e.g., when loaded from storage) + useEffect(() => { + setHeaders( + Object.entries(settings.customHeaders || {}).map(([key, value]) => ({ + key, + value, + })), + ); + }, [settings.customHeaders]); + + const handleAddHeader = () => { + if (!newHeaderKey.trim() || !newHeaderValue.trim()) { + return; + } + + // Check if header already exists + const existingIndex = headers.findIndex((h) => h.key === newHeaderKey); + if (existingIndex >= 0) { + // Update existing header + const updatedHeaders = [...headers]; + updatedHeaders[existingIndex].value = newHeaderValue; + setHeaders(updatedHeaders); + } else { + // Add new header + setHeaders([...headers, { key: newHeaderKey, value: newHeaderValue }]); + } + + setNewHeaderKey(""); + setNewHeaderValue(""); + }; + + const handleRemoveHeader = (index: number) => { + setHeaders(headers.filter((_, i) => i !== index)); + }; + + const handleSave = () => { + // Convert array back to object + const headersObject = headers.reduce( + (acc, { key, value }) => { + if (key.trim() && value.trim()) { + acc[key] = value; + } + return acc; + }, + {} as Record, + ); + + setSettings((s) => ({ ...s, customHeaders: headersObject })); + navigate(-1); + }; + + const handleCancel = () => { + navigate(-1); + }; + + return ( +
+ + Custom Headers +

+ Add custom HTTP headers that will be sent with every API request. +

+
+ + {/* Existing Headers List */} +
+ {headers.length === 0 ? ( +

+ No custom headers configured +

+ ) : ( + headers.map((header, index) => ( +
+
+

{header.key}

+

+ {header.value} +

+
+ +
+ )) + )} +
+ +
+ + {/* Add New Header */} +
+

Add New Header

+ setNewHeaderKey(e.target.value)} + autoCapitalize="none" + /> + setNewHeaderValue(e.target.value)} + autoCapitalize="none" + /> + +
+ +
+ + {/* Action Buttons */} +
+ + +
+
+ ); +} diff --git a/apps/browser-extension/src/NotConfiguredPage.tsx b/apps/browser-extension/src/NotConfiguredPage.tsx index ed8cbeb4..94b95ed4 100644 --- a/apps/browser-extension/src/NotConfiguredPage.tsx +++ b/apps/browser-extension/src/NotConfiguredPage.tsx @@ -14,6 +14,7 @@ export default function NotConfiguredPage() { const [error, setError] = useState(""); const [serverAddress, setServerAddress] = useState(settings.address); + useEffect(() => { setServerAddress(settings.address); }, [settings.address]); @@ -51,6 +52,18 @@ export default function NotConfiguredPage() { onChange={(e) => setServerAddress(e.target.value)} /> +
+ +
); diff --git a/apps/browser-extension/src/SignInPage.tsx b/apps/browser-extension/src/SignInPage.tsx index 1d849028..6cf8b35d 100644 --- a/apps/browser-extension/src/SignInPage.tsx +++ b/apps/browser-extension/src/SignInPage.tsx @@ -15,7 +15,7 @@ const enum LoginState { export default function SignInPage() { const navigate = useNavigate(); - const { setSettings } = usePluginSettings(); + const { settings, setSettings } = usePluginSettings(); const { mutate: login, @@ -156,6 +156,19 @@ export default function SignInPage() { Login with API key + +
+ +
); } diff --git a/apps/browser-extension/src/main.tsx b/apps/browser-extension/src/main.tsx index 65456012..123e505e 100644 --- a/apps/browser-extension/src/main.tsx +++ b/apps/browser-extension/src/main.tsx @@ -6,6 +6,7 @@ import { HashRouter, Route, Routes } from "react-router-dom"; import BookmarkDeletedPage from "./BookmarkDeletedPage.tsx"; import BookmarkSavedPage from "./BookmarkSavedPage.tsx"; +import CustomHeadersPage from "./CustomHeadersPage.tsx"; import Layout from "./Layout.tsx"; import NotConfiguredPage from "./NotConfiguredPage.tsx"; import OptionsPage from "./OptionsPage.tsx"; @@ -33,6 +34,7 @@ function App() { } /> } /> } /> + } /> 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; 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; } | 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, -- cgit v1.2.3-70-g09d2