Iframe and position tweaks (#678)

browser-extension/src/entrypoints/content.ts

@@ -10,6 +10,10 @@ import { createShadowRootUi } from 'wxt/client';
 export default defineContentScript({
   matches: ['<all_urls>'],
   cssInjectionMode: 'ui',
+  allFrames: true,
+  matchAboutBlank: true,
+  runAt: 'document_start',
+
   /**
    * Main entry point for the content script.
    */
@@ -100,6 +104,6 @@ export default defineContentScript({
     });
 
     // Mount the UI to create the shadow root
-    ui.mount();
+    ui.autoMount();
   },
 });

browser-extension/src/entrypoints/contentScript/Form.ts

@@ -166,8 +166,8 @@ function triggerInputEvents(element: HTMLInputElement | HTMLSelectElement) : voi
   const overlay = document.createElement('div');
 
   /**
-  * Update position of the overlay.
-  */
+   * Update position of the overlay.
+   */
   const updatePosition = () : void => {
     const rect = element.getBoundingClientRect();
     overlay.style.cssText = `
@@ -215,5 +215,5 @@ function triggerInputEvents(element: HTMLInputElement | HTMLSelectElement) : voi
     element.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
     element.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
     element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-}
+  }
 }

browser-extension/src/entrypoints/contentScript/Popup.ts

@@ -28,15 +28,25 @@ export function createBasePopup(input: HTMLInputElement, rootContainer: HTMLElem
   popup.id = 'aliasvault-credential-popup';
   popup.className = 'av-popup';
 
-  // Position popup below the input field
-  const rect = input.getBoundingClientRect();
-  const scrollTop = window.scrollY || document.documentElement.scrollTop;
-  const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+  // Get position of the input field relative to the viewport
+  const inputRect = input.getBoundingClientRect();
 
-  popup.style.top = `${rect.bottom + scrollTop}px`;
-  popup.style.left = `${rect.left + scrollLeft}px`;
+  // Get position of the root container relative to the viewport
+  const rootContainerRect = rootContainer.getBoundingClientRect();
 
-  // Append popup to document body or container
+  /*
+   * Calculate the position relative to the root container
+   * This accounts for any offset the shadow root might have in the page
+   */
+  const relativeTop = inputRect.bottom - rootContainerRect.top;
+  const relativeLeft = inputRect.left - rootContainerRect.left;
+
+  // Set the position
+  popup.style.position = 'absolute';
+  popup.style.top = `${relativeTop}px`;
+  popup.style.left = `${relativeLeft}px`;
+
+  // Append popup to the root container
   rootContainer.appendChild(popup);
 
   return popup;
@@ -622,9 +632,6 @@ export async function createEditNamePopup(defaultName: string, rootContainer: HT
   // Close existing popup
   removeExistingPopup(rootContainer);
 
-  // Sanitize default name, remove any special characters and convert to lowercase iwth only first char uppercase
-  const sanitizedName = defaultName.replace(/[^a-zA-Z0-9]/g, '').toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase());
-
   return new Promise((resolve) => {
     // Create modal overlay
     const overlay = document.createElement('div');
@@ -642,7 +649,7 @@ export async function createEditNamePopup(defaultName: string, rootContainer: HT
         type="text"
         id="service-name-input"
         data-aliasvault-ignore="true"
-        value="${sanitizedName}"
+        value="${defaultName}"
         class="av-create-popup-input"
       >
       <div class="av-create-popup-actions">

browser-extension/src/entrypoints/contentScript/style.css

@@ -1,9 +1,12 @@
 /* AliasVault Content Script Styles */
+body {
+    position: absolute;
+}
 
 /* Base Popup Styles */
 .av-popup {
   position: absolute;
-  z-index: 2147483647;
+  z-index: 2147483646;
   background-color: rgb(31, 41, 55);
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -211,6 +214,10 @@
   padding: 6px 12px;
 }
 
+.av-search-input::placeholder {
+  color: #bdbebe;
+}
+
 .av-search-input:focus {
   border-color: #2563eb;
   box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
@@ -261,7 +268,7 @@
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 999999995;
+  z-index: 2147483647;
   display: flex;
   align-items: center;
   justify-content: center;