feat: allow user select system for which to generate fingerprint

src/components/camoufox-config-dialog.tsx

@@ -10,7 +10,16 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import type { BrowserProfile, CamoufoxConfig } from "@/types";
+import type { BrowserProfile, CamoufoxConfig, CamoufoxOS } from "@/types";
+
+const getCurrentOS = (): CamoufoxOS => {
+  if (typeof navigator === "undefined") return "linux";
+  const platform = navigator.platform.toLowerCase();
+  if (platform.includes("win")) return "windows";
+  if (platform.includes("mac")) return "macos";
+  return "linux";
+};
+
 import { LoadingButton } from "./loading-button";
 import { RippleButton } from "./ui/ripple";
 
@@ -29,9 +38,10 @@ export function CamoufoxConfigDialog({
   onSave,
   isRunning = false,
 }: CamoufoxConfigDialogProps) {
-  const [config, setConfig] = useState<CamoufoxConfig>({
+  const [config, setConfig] = useState<CamoufoxConfig>(() => ({
     geoip: true,
-  });
+    os: getCurrentOS(),
+  }));
   const [isSaving, setIsSaving] = useState(false);
 
   // Initialize config when profile changes
@@ -40,6 +50,7 @@ export function CamoufoxConfigDialog({
       setConfig(
         profile.camoufox_config || {
           geoip: true,
+          os: getCurrentOS(),
         },
       );
     }
@@ -88,6 +99,7 @@ export function CamoufoxConfigDialog({
       setConfig(
         profile.camoufox_config || {
           geoip: true,
+          os: getCurrentOS(),
         },
       );
     }

src/components/create-profile-dialog.tsx

@@ -29,7 +29,16 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useBrowserDownload } from "@/hooks/use-browser-download";
 import { useProxyEvents } from "@/hooks/use-proxy-events";
 import { getBrowserIcon } from "@/lib/browser-utils";
-import type { BrowserReleaseTypes, CamoufoxConfig } from "@/types";
+import type { BrowserReleaseTypes, CamoufoxConfig, CamoufoxOS } from "@/types";
+
+const getCurrentOS = (): CamoufoxOS => {
+  if (typeof navigator === "undefined") return "linux";
+  const platform = navigator.platform.toLowerCase();
+  if (platform.includes("win")) return "windows";
+  if (platform.includes("mac")) return "macos";
+  return "linux";
+};
+
 import { RippleButton } from "./ui/ripple";
 
 type BrowserTypeString =
@@ -111,9 +120,10 @@ export function CreateProfileDialog({
   const [selectedProxyId, setSelectedProxyId] = useState<string>();
 
   // Camoufox anti-detect states
-  const [camoufoxConfig, setCamoufoxConfig] = useState<CamoufoxConfig>({
+  const [camoufoxConfig, setCamoufoxConfig] = useState<CamoufoxConfig>(() => ({
     geoip: true, // Default to automatic geoip
-  });
+    os: getCurrentOS(), // Default to current OS
+  }));
 
   // Handle browser selection from the initial screen
   const handleBrowserSelect = (browser: BrowserTypeString) => {
@@ -379,6 +389,7 @@ export function CreateProfileDialog({
     setReleaseTypes({});
     setCamoufoxConfig({
       geoip: true, // Reset to automatic geoip
+      os: getCurrentOS(), // Reset to current OS
     });
     onClose();
   };

src/components/shared-camoufox-config-form.tsx

@@ -15,7 +15,11 @@ import {
 } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import type { CamoufoxConfig, CamoufoxFingerprintConfig } from "@/types";
+import type {
+  CamoufoxConfig,
+  CamoufoxFingerprintConfig,
+  CamoufoxOS,
+} from "@/types";
 
 interface SharedCamoufoxConfigFormProps {
   config: CamoufoxConfig;
@@ -31,6 +35,22 @@ const isFingerprintEditingDisabled = (config: CamoufoxConfig): boolean => {
   return config.randomize_fingerprint_on_launch === true;
 };
 
+// Detect the current operating system
+const getCurrentOS = (): CamoufoxOS => {
+  if (typeof navigator === "undefined") return "linux";
+  const platform = navigator.platform.toLowerCase();
+  if (platform.includes("win")) return "windows";
+  if (platform.includes("mac")) return "macos";
+  return "linux";
+};
+
+// OS display labels
+const osLabels: Record<CamoufoxOS, string> = {
+  windows: "Windows",
+  macos: "macOS",
+  linux: "Linux",
+};
+
 // Component for editing nested objects like webGl:parameters
 interface ObjectEditorProps {
   value: Record<string, unknown> | undefined;
@@ -102,6 +122,11 @@ export function SharedCamoufoxConfigForm({
   );
   const [fingerprintConfig, setFingerprintConfig] =
     useState<CamoufoxFingerprintConfig>({});
+  const [currentOS] = useState<CamoufoxOS>(getCurrentOS);
+
+  // Get selected OS (defaults to current OS)
+  const selectedOS = config.os || currentOS;
+  const isOSDifferent = selectedOS !== currentOS;
 
   // Set screen resolution to user's screen size when creating a new profile
   useEffect(() => {
@@ -188,6 +213,35 @@ export function SharedCamoufoxConfigForm({
 
   const renderAdvancedForm = () => (
     <div className="space-y-6">
+      {/* Operating System Selection */}
+      <div className="space-y-3">
+        <Label>Operating System Fingerprint</Label>
+        <Select
+          value={selectedOS}
+          onValueChange={(value: CamoufoxOS) => onConfigChange("os", value)}
+          disabled={readOnly}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select operating system" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="windows">{osLabels.windows}</SelectItem>
+            <SelectItem value="macos">{osLabels.macos}</SelectItem>
+            <SelectItem value="linux">{osLabels.linux}</SelectItem>
+          </SelectContent>
+        </Select>
+        {isOSDifferent && (
+          <Alert className="border-yellow-500/50 bg-yellow-500/10">
+            <AlertDescription className="text-yellow-600 dark:text-yellow-400">
+              ⚠️ Warning: Selecting an OS different from your current system (
+              {osLabels[currentOS]}) increases the risk of detection. Websites
+              can detect mismatches between your fingerprint and actual system
+              behavior.
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
+
       {/* Randomize Fingerprint Option */}
       <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
         <div className="flex items-center space-x-2">
@@ -906,8 +960,40 @@ export function SharedCamoufoxConfigForm({
           </TabsList>
 
           <TabsContent value="automatic" className="space-y-6">
+            {/* Operating System Selection */}
+            <div className="mt-4 space-y-3">
+              <Label>Operating System Fingerprint</Label>
+              <Select
+                value={selectedOS}
+                onValueChange={(value: CamoufoxOS) =>
+                  onConfigChange("os", value)
+                }
+                disabled={readOnly}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select operating system" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="windows">{osLabels.windows}</SelectItem>
+                  <SelectItem value="macos">{osLabels.macos}</SelectItem>
+                  <SelectItem value="linux">{osLabels.linux}</SelectItem>
+                </SelectContent>
+              </Select>
+              {isOSDifferent && (
+                <Alert className="border-yellow-500/50 bg-yellow-500/10">
+                  <AlertDescription className="text-yellow-600 dark:text-yellow-400">
+                    ⚠️ Warning: Selecting an OS different from your current
+                    system ({osLabels[currentOS]}) increases the risk of
+                    detection. Websites with advanced protections can detect
+                    mismatches between your fingerprint and actual system
+                    behavior.
+                  </AlertDescription>
+                </Alert>
+              )}
+            </div>
+
             {/* Randomize Fingerprint Option */}
-            <div className="mt-4 space-y-3 p-4 border rounded-lg bg-muted/30">
+            <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
               <div className="flex items-center space-x-2">
                 <Checkbox
                   id="randomize-fingerprint-auto"

src/types.ts

@@ -82,6 +82,8 @@ export interface AppUpdateProgress {
   message: string;
 }
 
+export type CamoufoxOS = "windows" | "macos" | "linux";
+
 export interface CamoufoxConfig {
   proxy?: string;
   screen_max_width?: number;
@@ -95,6 +97,7 @@ export interface CamoufoxConfig {
   executable_path?: string;
   fingerprint?: string; // JSON string of the complete fingerprint config
   randomize_fingerprint_on_launch?: boolean; // Generate new fingerprint on every launch
+  os?: CamoufoxOS; // Operating system for fingerprint generation
 }
 
 // Extended interface for the advanced fingerprint configuration