fix: csp violation, add theme & transition handlers

manifest.json

@@ -41,7 +41,9 @@
             "resources": [
                 "src/assets/images/copy-icon.png",
                 "src/assets/images/check-icon.png",
-                "src/assets/images/languages/*"
+                "src/assets/images/languages/*",
+                "src/popup/theme-handler.js",
+                "src/popup/transition-handler.js"
             ],
             "matches": [
                 "<all_urls>"

src/popup/popup.css

@@ -8,6 +8,8 @@
     --transition-speed: 0.2s;
     --border-color: black;
     --link-color: #303134;
+    --text-color: black;
+
 }
 
 /* Dark theme */
@@ -67,17 +69,18 @@ body {
 /* Common button styles */
 .material-button, .code-btn {
     background-color: var(--button-bg-color);
-    color: var(--button-text-color);
+    color: var(--text-color);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
     cursor: pointer;
-    font-weight: var(--font-weight);
     font-size: var(--base-font-size);
-    transition: background-color var(--transition-speed) ease;
+    transition: all var(--transition-speed) ease;
 }
 
 .material-button:hover, .code-btn:hover {
     background-color: var(--button-hover-bg);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 /* Links */
@@ -103,18 +106,26 @@ a {
 }
 
 .tab {
+    background: transparent;
     border: none;
     font-size: var(--base-font-size);
     padding: calc(var(--spacing) * 0.6) var(--spacing);
     cursor: pointer;
+    color: var(--text-color);
+    transition: color var(--transition-speed) ease, border-bottom var(--transition-speed) ease;
+}
+
+.tab:hover {
+    color: var(--link-color);
 }
 
 .tab.active {
     border-bottom: 2px solid var(--link-color);
     color: var(--link-color);
+    background: transparent;
 }
 
-/* Main content */
+/* Main content on popup and settings*/
 .main-content {
     padding: var(--spacing);
     margin-top: calc(var(--button-height) + 5px);
@@ -155,7 +166,6 @@ a {
     padding: var(--spacing);
     margin-bottom: var(--spacing);
     font-size: var(--base-font-size);
-    font-weight: var(--font-weight);
     color: var(--color);
     border-radius: 8px;
     background-color: var(--info-message-bg);
@@ -235,7 +245,6 @@ a {
 
 .settings-row label {
     margin-bottom: 5px;
-    font-weight: var(--font-weight);
 }
 
 .settings-btn {
@@ -250,11 +259,6 @@ a {
     margin-right: var(--spacing);
 }
 
-#theme-text {
-    font-weight: var(--font-weight);
-}
-
-/* Dropdown select */
 .select {
     text-align: center !important;
     padding: 5px 10px;
@@ -264,7 +268,6 @@ a {
     background-position: right 0.7em top 50%;
     background-size: 0.65em auto;
     padding-right: 20px;
-    font-weight: 600;
     font-size: var(--base-font-size);
 }
 
@@ -273,7 +276,6 @@ a {
     padding-top: var(--spacing);
     font-size: var(--base-font-size);
     opacity: 0.8;
-    font-weight: 500;
     display: inline-block;
 }
 

src/popup/popup.html

@@ -6,34 +6,7 @@
     <link rel="stylesheet" href="./popup.css">
     <link rel="stylesheet" href="prism.css">
     <!-- Preload theme handler script before anything else -->
-    <script>
-        // Check localStorage first for faster loading
-        const isDark = localStorage.getItem('leetcode-explained-theme') === 'dark';
-
-        // Set initial theme attribute
-        document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
-
-        // Add initial dark theme styles if needed
-        if (isDark) {
-            const style = document.createElement('style');
-            style.id = 'preload-dark-theme';
-            style.innerHTML = `
-                html, body {
-                    background-color: #202124 !important;
-                    color: #e8eaed !important;
-                }
-                pre, code, .response-container {
-                    background-color: #303134 !important;
-                    color: #e8eaed !important;
-                    border-color: #5f6368 !important;
-                }
-                a {
-                    color: #8ab4f8 !important;
-                }
-            `;
-            document.head.appendChild(style);
-        }
-    </script>
+    <script src="./theme-handler.js"></script>
     <style>
         /* Prevent any visible transition on initial load */
         * {
@@ -102,18 +75,7 @@
 
     <script src="prism.js"></script>
     <!-- Enable transitions after load -->
-    <script>
-        // Enable smooth transitions after initial rendering
-        window.addEventListener('load', function() {
-            // Short delay to ensure everything is rendered first
-            setTimeout(function() {
-                // Remove the inline style forcing no transitions
-                const style = document.createElement('style');
-                style.innerHTML = '* { transition: color 0.3s, background-color 0.3s, border-color 0.3s !important; }';
-                document.head.appendChild(style);
-            }, 100);
-        });
-    </script>
+    <script src="./transition-handler.js"></script>
 </body>
 
 </html>

src/popup/settings.html

@@ -5,34 +5,7 @@
     <title>Settings</title>
     <link rel="stylesheet" href="./popup.css">
     <!-- Preload theme handler script before anything else -->
-    <script>
-        // Check localStorage first for faster loading
-        const isDark = localStorage.getItem('leetcode-explained-theme') === 'dark';
-
-        // Set initial theme attribute
-        document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
-
-        // Add initial dark theme styles if needed
-        if (isDark) {
-            const style = document.createElement('style');
-            style.id = 'preload-dark-theme';
-            style.innerHTML = `
-                html, body {
-                    background-color: #202124 !important;
-                    color: #e8eaed !important;
-                }
-                pre, code, .response-container {
-                    background-color: #303134 !important;
-                    color: #e8eaed !important;
-                    border-color: #5f6368 !important;
-                }
-                a {
-                    color: #8ab4f8 !important;
-                }
-            `;
-            document.head.appendChild(style);
-        }
-    </script>
+    <script src="./theme-handler.js"></script>
     <style>
         /* Prevent any visible transition on initial load */
         * {
@@ -97,18 +70,7 @@
     </div>
 
     <!-- Enable transitions after load -->
-    <script>
-        // Enable smooth transitions after initial rendering
-        window.addEventListener('load', function() {
-            // Short delay to ensure everything is rendered first
-            setTimeout(function() {
-                // Remove the inline style forcing no transitions
-                const style = document.createElement('style');
-                style.innerHTML = '* { transition: color 0.3s, background-color 0.3s, border-color 0.3s !important; }';
-                document.head.appendChild(style);
-            }, 100);
-        });
-    </script>
+    <script src="./transition-handler.js"></script>
 </body>
 
 </html>

src/popup/settings.js

@@ -0,0 +1,118 @@
+/*
+    Handles settings page functionality with proper message passing
+*/
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Home button navigation
+    const homeButton = document.getElementById('open-home-btn');
+    homeButton.onclick = () => {
+        window.location.href = 'popup.html';
+    };
+
+    // Theme toggle handlers
+    const themeSelect = document.getElementById('theme-select');
+    const fontSizeSelect = document.getElementById('font-size-select');
+
+    // Initialize settings icons
+    chrome.storage.local.get(['showCompanyTags', 'showExamples', 'showDifficulty', 'showRating'], (result) => {
+        const showCompanyTagsIcon = document.getElementById('show-company-tags-icon');
+        const showExamplesIcon = document.getElementById('show-examples-icon');
+        const showDifficultyIcon = document.getElementById('show-difficulty-icon');
+        const showRatingIcon = document.getElementById('show-rating-icon');
+
+        if (showCompanyTagsIcon) showCompanyTagsIcon.textContent = result.showCompanyTags ? '✅' : '❌';
+        if (showExamplesIcon) showExamplesIcon.textContent = result.showExamples ? '✅' : '❌';
+        if (showDifficultyIcon) showDifficultyIcon.textContent = result.showDifficulty ? '✅' : '❌';
+        if (showRatingIcon) showRatingIcon.textContent = result.showRating ? '✅' : '❌';
+    });
+
+    // Helper function to send messages safely to content script
+    function safelySendMessage(message) {
+        console.log('Sending message to content script:', message);
+        chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
+            if (!tabs || !tabs[0] || !tabs[0].id) {
+                console.log('No active tab found');
+                return;
+            }
+
+            try {
+                chrome.tabs.sendMessage(tabs[0].id, message, response => {
+                    if (chrome.runtime.lastError) {
+                        console.log('Error sending message:', chrome.runtime.lastError.message);
+                        // Attempt to inject the content script if it's not already injected
+                        chrome.scripting.executeScript({
+                            target: { tabId: tabs[0].id },
+                            files: ['dist/content-script/update-description-tab.js']
+                        }).then(() => {
+                            // Try sending the message again after injecting the script
+                            setTimeout(() => {
+                                chrome.tabs.sendMessage(tabs[0].id, message);
+                            }, 100);
+                        }).catch(err => {
+                            console.log('Error injecting content script:', err);
+                        });
+                    } else {
+                        console.log('Message sent successfully, response:', response);
+                    }
+                });
+            } catch (error) {
+                console.log('Error sending message:', error);
+            }
+        });
+    }
+
+    // Set up toggle event handlers
+    const showCompanyTagsBtn = document.getElementById('show-company-tags-btn');
+    showCompanyTagsBtn && showCompanyTagsBtn.addEventListener('click', function() {
+        chrome.storage.local.get(['showCompanyTags'], (result) => {
+            const showCompanyTags = !result.showCompanyTags;
+            chrome.storage.local.set({ showCompanyTags: showCompanyTags }, () => {
+                const showCompanyTagsIcon = document.getElementById('show-company-tags-icon');
+                if (showCompanyTagsIcon) showCompanyTagsIcon.textContent = showCompanyTags ? '✅' : '❌';
+                safelySendMessage({ action: 'updateDescription', title: document.title || 'title' });
+            });
+        });
+    });
+
+    const showExamplesBtn = document.getElementById('show-examples-btn');
+    showExamplesBtn && showExamplesBtn.addEventListener('click', function() {
+        chrome.storage.local.get(['showExamples'], (result) => {
+            const showExamples = !result.showExamples;
+            chrome.storage.local.set({ showExamples: showExamples }, () => {
+                const showExamplesIcon = document.getElementById('show-examples-icon');
+                if (showExamplesIcon) showExamplesIcon.textContent = showExamples ? '✅' : '❌';
+                safelySendMessage({ action: 'updateDescription', title: document.title || 'title' });
+            });
+        });
+    });
+
+    const showDifficultyBtn = document.getElementById('show-difficulty-btn');
+    showDifficultyBtn && showDifficultyBtn.addEventListener('click', function() {
+        chrome.storage.local.get(['showDifficulty'], (result) => {
+            const showDifficulty = !result.showDifficulty;
+            chrome.storage.local.set({ showDifficulty: showDifficulty }, () => {
+                const showDifficultyIcon = document.getElementById('show-difficulty-icon');
+                if (showDifficultyIcon) showDifficultyIcon.textContent = showDifficulty ? '✅' : '❌';
+                safelySendMessage({ action: 'updateDescription', title: document.title || 'title' });
+            });
+        });
+    });
+
+    const showRatingBtn = document.getElementById('show-rating-btn');
+    showRatingBtn && showRatingBtn.addEventListener('click', function() {
+        chrome.storage.local.get(['showRating'], (result) => {
+            const showRating = !result.showRating;
+            chrome.storage.local.set({ showRating: showRating }, () => {
+                const showRatingIcon = document.getElementById('show-rating-icon');
+                if (showRatingIcon) showRatingIcon.textContent = showRating ? '✅' : '❌';
+                safelySendMessage({ action: 'updateDescription', title: document.title || 'title' });
+            });
+        });
+    });
+
+    // Font size handler (simplified for this fix)
+    fontSizeSelect && fontSizeSelect.addEventListener('change', function() {
+        const fontSize = this.value;
+        chrome.storage.local.set({ fontSize: parseInt(fontSize) });
+    });
+}); 

src/popup/theme-handler.js

@@ -0,0 +1,26 @@
+// Check localStorage first for faster loading
+const isDark = localStorage.getItem('leetcode-explained-theme') === 'dark';
+
+// Set initial theme attribute
+document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+
+// Add initial dark theme styles if needed
+if (isDark) {
+    const style = document.createElement('style');
+    style.id = 'preload-dark-theme';
+    style.innerHTML = `
+        html, body {
+            background-color: #202124 !important;
+            color: #e8eaed !important;
+        }
+        pre, code, .response-container {
+            background-color: #303134 !important;
+            color: #e8eaed !important;
+            border-color: #5f6368 !important;
+        }
+        a {
+            color: #8ab4f8 !important;
+        }
+    `;
+    document.head.appendChild(style);
+} 

src/popup/transition-handler.js

@@ -0,0 +1,10 @@
+// Enable smooth transitions after initial rendering
+window.addEventListener('load', function() {
+    // Short delay to ensure everything is rendered first
+    setTimeout(function() {
+        // Remove the inline style forcing no transitions
+        const style = document.createElement('style');
+        style.innerHTML = '* { transition: color 0.3s, background-color 0.3s, border-color 0.3s !important; }';
+        document.head.appendChild(style);
+    }, 100);
+});