add import & export

CLAUDE.md

@@ -236,3 +236,18 @@ To load the extension in Chrome:
   }
 }
 ```
+
+### Package Execution
+
+**IMPORTANT: Do not use `npx` in this project.**
+
+- Always use local npm scripts defined in `package.json` (`npm run ...`)
+- Never use `npx` to run packages directly
+
+### Workflow
+
+**After completing code changes, always run in this order:**
+
+1. `npm run lint` — check for type and linting errors
+2. `npm run build` — build the project
+3. `npm run test:e2e` — run tests

src/options/App.css

@@ -22,6 +22,7 @@
 .controls {
   @apply bg-white px-[30px] py-5 rounded-lg mb-5 shadow;
   @apply dark:bg-[#2d2d2d];
+  @apply flex items-center;
 }
 
 /* Buttons */

src/options/App.tsx

@@ -1,19 +1,30 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { Toaster } from 'react-hot-toast';
-import type { ModificationRule, Variable } from '../types';
+import type { ModificationRule, Variable, ExportedSettings } from '../types';
 import { getSettings, saveSettings } from '../utils/storage';
+import {
+  prepareSettingsForExport,
+  generateExportFilename,
+  downloadAsJson,
+  parseImportedFile,
+  mergeSettings,
+  replaceSettings,
+} from '../utils/exportImport';
 import { RuleCard } from './components/RuleCard';
 import { RuleEditor } from './components/RuleEditor';
 import { VariablesManager } from './components/VariablesManager';
 import { ThemeToggle } from './components/ThemeToggle';
-import { showConfirm } from '../utils/toast';
+import { ImportConfirmModal } from './components/ImportConfirmModal';
+import { showConfirm, showSuccess, showError } from '../utils/toast';
 import './index.css';
 
 function App() {
   const [rules, setRules] = useState<ModificationRule[]>([]);
   const [variables, setVariables] = useState<Variable[]>([]);
   const [editingRule, setEditingRule] = useState<ModificationRule | null>(null);
   const [isCreating, setIsCreating] = useState(false);
+  const [importData, setImportData] = useState<ExportedSettings | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const loadRules = useCallback(async () => {
     const settings = await getSettings();
@@ -67,6 +78,60 @@ function App() {
     await loadRules();
   };
 
+  const handleExport = async () => {
+    const settings = await getSettings();
+    const exportData = prepareSettingsForExport(settings);
+    const filename = generateExportFilename();
+    downloadAsJson(exportData, filename);
+    showSuccess('Settings exported successfully');
+  };
+
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    event.target.value = '';
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const content = e.target?.result as string;
+      const parsed = parseImportedFile(content);
+      if (parsed) {
+        setImportData(parsed);
+      } else {
+        showError('Invalid settings file');
+      }
+    };
+    reader.onerror = () => {
+      showError('Failed to read file');
+    };
+    reader.readAsText(file);
+  };
+
+  const handleImportMerge = async () => {
+    if (!importData) return;
+    const existing = await getSettings();
+    const merged = mergeSettings(existing, importData.settings);
+    await saveSettings(merged);
+    await loadRules();
+    setImportData(null);
+    showSuccess('Settings merged successfully');
+  };
+
+  const handleImportReplace = async () => {
+    if (!importData) return;
+    const existing = await getSettings();
+    const replaced = replaceSettings(existing, importData.settings);
+    await saveSettings(replaced);
+    await loadRules();
+    setImportData(null);
+    showSuccess('Settings replaced successfully');
+  };
+
   return (
     <>
       <Toaster
@@ -90,6 +155,14 @@ function App() {
           },
         }}
       />
+      <input
+        type="file"
+        ref={fileInputRef}
+        className="hidden"
+        accept=".json"
+        onChange={handleFileSelect}
+        data-testid="import-file-input"
+      />
       <div className="app">
         <div className="header">
           <div>
@@ -105,13 +178,29 @@ function App() {
         <div className="empty-state">
           <h3>No Rules</h3>
           <p>Create your first rule to modify HTTP headers</p>
-          <button
-            data-testid="create-rule-button"
-            className="btn btn-primary"
-            onClick={() => setIsCreating(true)}
-          >
-            Create Rule
-          </button>
+          <div className="flex gap-2.5 justify-center">
+            <button
+              data-testid="create-rule-button"
+              className="btn btn-primary"
+              onClick={() => setIsCreating(true)}
+            >
+              Create Rule
+            </button>
+            <button
+              data-testid="export-button"
+              className="btn btn-secondary"
+              onClick={handleExport}
+            >
+              Export
+            </button>
+            <button
+              data-testid="import-button"
+              className="btn btn-secondary"
+              onClick={handleImportClick}
+            >
+              Import
+            </button>
+          </div>
         </div>
       ) : (
         <>
@@ -123,6 +212,22 @@ function App() {
             >
               + Create Rule
             </button>
+            <div className="flex gap-2.5 ml-auto">
+              <button
+                data-testid="export-button"
+                className="btn btn-secondary"
+                onClick={handleExport}
+              >
+                Export
+              </button>
+              <button
+                data-testid="import-button"
+                className="btn btn-secondary"
+                onClick={handleImportClick}
+              >
+                Import
+              </button>
+            </div>
           </div>
           <div className="rules-list">
             {rules.map((rule) => (
@@ -148,6 +253,15 @@ function App() {
           }}
         />
       )}
+
+      {importData && (
+        <ImportConfirmModal
+          importedData={importData}
+          onMerge={handleImportMerge}
+          onReplace={handleImportReplace}
+          onCancel={() => setImportData(null)}
+        />
+      )}
       </div>
     </>
   );

src/options/components/ImportConfirmModal.tsx

@@ -0,0 +1,84 @@
+import type { ExportedSettings } from '../../types';
+
+interface ImportConfirmModalProps {
+  importedData: ExportedSettings;
+  onMerge: () => void;
+  onReplace: () => void;
+  onCancel: () => void;
+}
+
+export function ImportConfirmModal({
+  importedData,
+  onMerge,
+  onReplace,
+  onCancel,
+}: ImportConfirmModalProps) {
+  const { settings } = importedData;
+  const ruleCount = settings.rules.length;
+  const variableCount = settings.variables.length;
+  const sensitiveVarsWithEmptyValue = settings.variables.filter(
+    v => v.isSensitive && !v.value
+  ).length;
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal">
+        <h2>Import Settings</h2>
+
+        <div className="mb-5">
+          <p className="text-[#2c3e50] dark:text-[#e4e4e4] mb-2.5">
+            The file contains:
+          </p>
+          <ul className="ml-5 list-disc text-[#7f8c8d] dark:text-[#b0b0b0]">
+            <li>{ruleCount} rule{ruleCount !== 1 ? 's' : ''}</li>
+            <li>{variableCount} variable{variableCount !== 1 ? 's' : ''}</li>
+          </ul>
+        </div>
+
+        {sensitiveVarsWithEmptyValue > 0 && (
+          <div className="mb-5 px-4 py-3 bg-[#fff3cd] dark:bg-[#5a4a1a] border-l-4 border-[#f39c12] rounded">
+            <p className="text-sm text-[#856404] dark:text-[#ffc107]">
+              <strong>Note:</strong> Sensitive variable values are not exported for security.
+              You will need to fill in values for {sensitiveVarsWithEmptyValue}
+              {' '}variable{sensitiveVarsWithEmptyValue !== 1 ? 's' : ''}.
+            </p>
+          </div>
+        )}
+
+        <div className="mb-5 text-sm text-[#7f8c8d] dark:text-[#b0b0b0]">
+          <p className="mb-2">
+            <strong className="text-[#2c3e50] dark:text-[#e4e4e4]">Merge:</strong>
+            {' '}Add new items while keeping existing settings.
+          </p>
+          <p>
+            <strong className="text-[#2c3e50] dark:text-[#e4e4e4]">Replace:</strong>
+            {' '}Remove all existing settings and use imported ones.
+          </p>
+        </div>
+
+        <div className="modal-actions">
+          <button
+            className="btn btn-secondary"
+            onClick={onCancel}
+          >
+            Cancel
+          </button>
+          <button
+            className="btn btn-primary"
+            onClick={onMerge}
+            data-testid="import-merge-button"
+          >
+            Merge
+          </button>
+          <button
+            className="btn btn-danger"
+            onClick={onReplace}
+            data-testid="import-replace-button"
+          >
+            Replace All
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/types/index.ts

@@ -47,3 +47,12 @@ export interface AppSettings {
   variables: Variable[];
   theme?: 'light' | 'dark' | 'auto';
 }
+
+export interface ExportedSettings {
+  version: 1;
+  exportedAt: string;
+  settings: {
+    rules: ModificationRule[];
+    variables: Variable[];
+  };
+}