feat: add option to open links in new window and update button behavior

Author: lcandy2

entrypoints/content/git-ingest-button.ts

@@ -31,9 +31,20 @@ export async function createGitIngestButton(): Promise<HTMLLIElement> {
   const link = document.createElement('a');
   link.className = 'btn-sm btn';
 
-  // Get custom base URL from storage, default to gitingest.com if not set
-  const baseUrl = await storage.getItem<string>('sync:baseUrl') || 'gitingest.com';
-  link.href = window.location.href.replace('github.com', baseUrl);
+  // Get custom base URL and window preference from storage
+  const [baseUrl, openInNewWindow] = await Promise.all([
+    storage.getItem<string>('sync:baseUrl'),
+    storage.getItem<boolean>('sync:openInNewWindow')
+  ]);
+
+  // Set default base URL if not set
+  link.href = window.location.href.replace('github.com', baseUrl || 'gitingest.com');
+  
+  // Set target based on preference
+  if (openInNewWindow) {
+    link.target = '_blank';
+    link.rel = 'noopener noreferrer';
+  }
 
   // Create spans for different screen sizes
   const linkContent = `
@@ -45,7 +56,6 @@ export async function createGitIngestButton(): Promise<HTMLLIElement> {
 
   // Add button to container
   li.appendChild(link);
-
   li.id = 'git-ingest-button';
 
   return li;
@@ -69,7 +79,12 @@ storage.watch('sync:baseUrl', () => {
     const link = button.querySelector('a');
     if (link) {
       createGitIngestButton().then(newButton => {
-        link.href = newButton.querySelector('a')?.href || link.href;
+        const newLink = newButton.querySelector('a');
+        if (newLink) {
+          link.href = newLink.href;
+          link.target = newLink.target;
+          link.rel = newLink.rel;
+        }
       });
     }
   }

entrypoints/popup/App.tsx

@@ -3,6 +3,7 @@ import { storage } from 'wxt/storage';
 
 function App() {
   const [baseUrl, setBaseUrl] = useState<string>('');
+  const [openInNewWindow, setOpenInNewWindow] = useState(false);
   const [isSaved, setIsSaved] = useState(false);
 
   useEffect(() => {
@@ -11,6 +12,9 @@ function App() {
         setBaseUrl(savedUrl);
       }
     });
+    storage.getItem<boolean>('sync:openInNewWindow').then((value) => {
+      setOpenInNewWindow(value ?? false);
+    });
   }, []);
 
   const handleSave = async (e: React.FormEvent) => {
@@ -20,6 +24,11 @@ function App() {
     setTimeout(() => setIsSaved(false), 2500);
   };
 
+  const handleToggleChange = async (checked: boolean) => {
+    setOpenInNewWindow(checked);
+    await storage.setItem('sync:openInNewWindow', checked);
+  };
+
   return (
     <div className="min-w-32 p-4 bg-[#fff4da]">
       <div className="mb-4 flex justify-between items-center">
@@ -63,6 +72,19 @@ function App() {
               />
             </div>
           </div>
+
+          <div className="space-y-2">
+            <label className="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                checked={openInNewWindow}
+                onChange={(e) => handleToggleChange(e.target.checked)}
+                className="sr-only peer"
+              />
+              <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer border-[3px] border-gray-900 peer-checked:after:translate-x-[19px] rtl:peer-checked:after:-translate-x-[19px] peer-checked:after:border-gray-900 after:content-[''] after:absolute after:top-[1px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-[#fca847]"></div>
+              <span className="ms-3 text-sm font-bold text-gray-900">Open in New Window</span>
+            </label>
+          </div>
 
           <div className="relative w-full group">
             <div className="w-full h-full rounded bg-gray-800 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>