Fix image loading in contentscript, fix password fill (#541)

lanedirt · Jan 24, 2025 · dd5f6f0 · dd5f6f0
1 parent 58f8686
commit dd5f6f0
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 18 deletions.
diff --git a/browser-extensions/chrome/manifest.json b/browser-extensions/chrome/manifest.json
@@ -29,11 +29,6 @@
         "css": ["src/contentScript.css"]
       }
     ],
-    "web_accessible_resources": [{
-      "resources": ["images/*"],
-      "matches": ["<all_urls>"],
-      "use_dynamic_url": true
-    }],
     "host_permissions": [
       "<all_urls>"
     ]

diff --git a/browser-extensions/chrome/src/background.ts b/browser-extensions/chrome/src/background.ts
@@ -73,8 +73,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 
           // Parse the decrypted vault and send response
           try {
-            const parsedVault = JSON.parse(decryptedVault);
-            sendResponse({ vault: parsedVault });
+            sendResponse({ vault: decryptedVault });
           } catch (parseError) {
             console.error('Failed to parse decrypted vault:', parseError);
             sendResponse({ vault: null, error: 'Failed to parse decrypted vault' });

diff --git a/browser-extensions/chrome/src/components/AppContent.tsx b/browser-extensions/chrome/src/components/AppContent.tsx
@@ -9,7 +9,30 @@ interface Credential {
   Id: string;
   ServiceName: string;
   Username: string;
-  Logo?: string; // base64 encoded image data
+  Logo?: any; // Changed from string to any since it's raw buffer data
+}
+
+// Add base64Encode function
+// TODO: this is used in contentScript.ts too.
+function base64Encode(buffer: any): string | null {
+  if (!buffer || typeof buffer !== 'object') {
+    console.log('Empty or invalid buffer received');
+    return null;
+  }
+
+  try {
+    // Convert object to array of numbers
+    const byteArray = Object.values(buffer);
+
+    // Convert to binary string
+    const binary = String.fromCharCode.apply(null, byteArray as number[]);
+
+    // Use btoa to encode binary string to base64
+    return btoa(binary);
+  } catch (error) {
+    console.error('Error encoding to base64:', error);
+    return null;
+  }
 }
 
 const AppContent: React.FC = () => {
@@ -79,9 +102,13 @@ const AppContent: React.FC = () => {
                     {credentials.map(cred => (
                       <li key={cred.Id} className="p-2 border dark:border-gray-600 rounded flex items-center bg-gray-50 dark:bg-gray-800">
                         <img
-                          src={cred.Logo ? `data:image/png;base64,${cred.Logo}` : '/images/service-placeholder.webp'}
+                          src={cred.Logo ? `data:image/x-icon;base64,${base64Encode(cred.Logo)}` : '/images/service-placeholder.webp'}
                           alt={cred.ServiceName}
                           className="w-8 h-8 mr-2 flex-shrink-0"
+                          onError={(e) => {
+                            const target = e.target as HTMLImageElement;
+                            target.src = '/images/service-placeholder.webp';
+                          }}
                         />
                         <div>
                           <p className="font-medium text-gray-900 dark:text-white">{cred.ServiceName}</p>

diff --git a/browser-extensions/chrome/src/contentScript.ts b/browser-extensions/chrome/src/contentScript.ts
@@ -5,6 +5,8 @@ console.log('Content script loaded!'); // This will help verify the script is ru
 // Track active input field
 let activeInput: HTMLInputElement | null = null;
 
+const placeholderBase64 = 'UklGRjoEAABXRUJQVlA4IC4EAAAwFwCdASqAAIAAPpFCm0olo6Ihp5IraLASCWUA0eb/0s56RrLtCnYfLPiBshdXWMx8j1Ez65f169iA4xUDBTEV6ylMQeCIj2b7RngGi7gKZ9WjKdSoy9R8JcgOmjCMlDmLG20KhNo/i/Dc/Ah5GAvGfm8kfniV3AkR6fxN6eKwjDc6xrDgSfS48G5uGV6WzQt24YAVlLSK9BMwndzfHnePK1KFchFrL7O3ulB8cGNCeomu4o+l0SrS/JKblJ4WTzj0DAD++lCUEouSfgRKdiV2TiYCD+H+l3tANKSPQFPQuzi7rbvxqGeRmXB9kDwURaoSTTpYjA9REMUi9uA6aV7PWtBNXgUzMLowYMZeos6Xvyhb34GmufswMHA5ZyYpxzjTphOak4ZjNOiz8aScO5ygiTx99SqwX/uL+HSeVOSraHw8IymrMwm+jLxqN8BS8dGcItLlm/ioulqH2j4V8glDgSut+ExkxiD7m8TGPrrjCQNJbRDzpOFsyCyfBZupvp8QjGKW2KGziSZeIWes4aTB9tRmeEBhnUrmTDZQuXcc67Fg82KHrSfaeeOEq6jjuUjQ8wUnzM4Zz3dhrwSyslVz/WvnKqYkr4V/TTXPFF5EjF4rM1bHZ8bK63EfTnK41+n3n4gEFoYP4mXkNH0hntnYcdTqiE7Gn+q0BpRRxnkpBSZlA6Wa70jpW0FGqkw5e591A5/H+OV+60WAo+4Mi+NlsKrvLZ9EiVaPnoEFZlJQx1fA777AJ2MjXJ4KSsrWDWJi1lE8yPs8V6XvcC0chDTYt8456sKXAagCZyY+fzQriFMaddXyKQdG8qBqcdYjAsiIcjzaRFBBoOK9sU+sFY7N6B6+xtrlu3c37rQKkI3O2EoiJOris54EjJ5OFuumA0M6riNUuBf/MEPFBVx1JRcUEs+upEBsCnwYski7FT3TTqHrx7v5AjgFN97xhPTkmVpu6sxRnWBi1fxIRp8eWZeFM6mUcGgVk1WeVb1yhdV9hoMo2TsNEPE0tHo/wvuSJSzbZo7wibeXM9v/rRfKcx7X93rfiXVnyQ9f/5CaAQ4lxedPp/6uzLtOS4FyL0bCNeZ6L5w+AiuyWCTDFIYaUzhwfG+/YTQpWyeZCdQIKzhV+3GeXI2cxoP0ER/DlOKymf1gm+zRU3sqf1lBVQ0y+mK/Awl9bS3uaaQmI0FUyUwHUKP7PKuXnO+LcwDv4OfPT6hph8smc1EtMe5ib/apar/qZ9dyaEaElALJ1KKxnHziuvVl8atk1fINSQh7OtXDyqbPw9o/nGIpTnv5iFmwmWJLis2oyEgPkJqyx0vYI8rjkVEzKc8eQavAJBYSpjMwM193Swt+yJyjvaGYWPnqExxKiNarpB2WSO7soCAZXhS1uEYHryrK47BH6W1dRiruqT0xpLih3MXiwU3VDwAAAA==';
+
 // Listen for input field focus
 document.addEventListener('focusin', (e) => {
   const target = e.target as HTMLInputElement;
@@ -68,13 +70,25 @@ function createPopup(input: HTMLInputElement, credentials: any[]) {
       gap: 8px;
     `;
 
-    // Use chrome.runtime.getURL for the fallback image
-    const placeholderImage = chrome.runtime.getURL('images/service-placeholder.webp');
-    console.log('placeholderImage:', placeholderImage);
-    item.innerHTML = `
-      <img src="${cred.Logo || placeholderImage}" style="width: 16px; height: 16px;">
-      <span>${cred.Username}</span>
-    `;
+    const imgElement = document.createElement('img');
+    imgElement.style.width = '16px';
+    imgElement.style.height = '16px';
+
+    // Handle base64 image data
+    if (cred.Logo) {
+        const base64Logo = base64Encode(cred.Logo);
+        console.log(base64Logo);
+        if (base64Logo) {
+            imgElement.src = `data:image/x-icon;base64,${base64Logo}`;
+        } else {
+            imgElement.src = `data:image/x-icon;base64,${placeholderBase64}`;
+        }
+    } else {
+        imgElement.src = `data:image/x-icon;base64,${placeholderBase64}`;
+    }
+
+    item.appendChild(imgElement);
+    item.appendChild(document.createTextNode(cred.Username));
 
     item.addEventListener('click', () => {
       fillCredential(cred);
@@ -108,16 +122,38 @@ function fillCredential(credential: any) {
 
   const form = forms[0];
   if (form.usernameField) {
-    form.usernameField.value = credential.username;
+    form.usernameField.value = credential.Username;
     triggerInputEvents(form.usernameField);
   }
   if (form.passwordField) {
-    form.passwordField.value = credential.password;
+    form.passwordField.value = credential.Password;
     triggerInputEvents(form.passwordField);
   }
 }
 
 function triggerInputEvents(element: HTMLInputElement) {
   element.dispatchEvent(new Event('input', { bubbles: true }));
   element.dispatchEvent(new Event('change', { bubbles: true }));
+}
+
+// Remove the Buffer import and replace with a base64 encoding function
+function base64Encode(buffer: any): string | null {
+    if (!buffer || typeof buffer !== 'object') {
+        console.log('Empty or invalid buffer received');
+        return null;
+    }
+
+    try {
+        // Convert object to array of numbers
+        const byteArray = Object.values(buffer);
+
+        // Convert to binary string
+        const binary = String.fromCharCode.apply(null, byteArray as number[]);
+
+        // Use btoa to encode binary string to base64
+        return btoa(binary);
+    } catch (error) {
+        console.error('Error encoding to base64:', error);
+        return null;
+    }
 }