feat: add "Open in New Tab" functionality and update manifest permissions

Author: MaxITService

manifest.json

@@ -31,12 +31,7 @@
     "type": "module"
   },
 
-  "web_accessible_resources": [
-    {
-      "resources": ["welcome.html"],
-      "matches": ["<all_urls>"]
-    }
-  ],
+
 
   "content_scripts": [
     {

popup-page-scripts/popup-page-script.js

@@ -38,6 +38,9 @@ const copyProfileInput = document.getElementById('copyProfileInput');
 const cancelAddProfileButton = document.getElementById('cancelAddProfile');
 const cancelCopyProfileButton = document.getElementById('cancelCopyProfile');
 
+// Open in Tab Button
+const openInTabButton = document.getElementById('open-in-tab-button');
+
 // -------------------------
 // Debounced Save Function
 // -------------------------
@@ -164,6 +167,19 @@ function updateInterface() {
 // -------------------------
 
 document.addEventListener('DOMContentLoaded', () => {
+    // Check if the page is opened in a tab and apply appropriate styling
+    const urlParams = new URLSearchParams(window.location.search);
+    const isTab = urlParams.get('isTab') === 'true';
+    
+    if (isTab) {
+        // Hide the "Open in New Tab" button when already in a tab
+        if (openInTabButton) {
+            openInTabButton.style.display = 'none';
+        }
+        // Add tab-mode class to body for centering
+        document.body.classList.add('tab-mode');
+    }
+    
     loadProfiles();
 
     // Profile management
@@ -301,6 +317,18 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
+    // Open in New Tab Button Click
+    if (openInTabButton) {
+        openInTabButton.addEventListener('click', () => {
+            // Open popup.html in a new tab with isTab parameter
+            chrome.tabs.create({
+                url: chrome.runtime.getURL('popup.html?isTab=true')
+            });
+            // Close the popup window
+            window.close();
+        });
+    }
+
     // Initialize event listeners for dynamic elements
     textareaSaverAndResizerFunc();
     attachEmojiInputListeners();

popup-page-styles/popup-base.css

@@ -47,7 +47,7 @@ body {
     transition: background-color var(--transition-duration) ease;
 }
 
-/* Hide version container when the user is adding or copying a profile */
+/* Hide version container when the user is adding or copying a profile, as this space is used for that functionality at that sequence */
 body:has(#addProfileContainer:not([style*="display: none"])) #versionContainer,
 body:has(#copyProfileContainer:not([style*="display: none"])) #versionContainer {
     opacity: 0;
@@ -58,21 +58,21 @@ body:has(#copyProfileContainer:not([style*="display: none"])) #versionContainer
 #versionContainer {
     opacity: 1;
     pointer-events: auto;
+    text-align: center;
     transition: opacity 0.5s ease;
 }
 
 /* Centered version text styling */
 #version {
-    text-align: center;
     color: #666666;
     width: 100%;
 }
 
 /* Explanation text styling */
 #topExplanationText {
-    text-align: center;
     color: #666666;
     width: 100%;
+    margin-bottom: 12px; /* Reduces space below the paragraph, above the button */
 }
 
 /* Notification text styling */
@@ -139,3 +139,4 @@ h2:hover {
     color: #6a4abd;
     transition: color var(--transition-duration-release) ease;
 }
+