Added settings page (backgrond-color, sidebar width)

Author: chrishaensel

manifest.json

@@ -17,7 +17,7 @@
         {
             "resources": [
                 "sidebar.html",
-                 "google_sidebar.html"
+                "settings.html"
             ],
             "matches": [
                 "*://*/*"
@@ -41,7 +41,8 @@
                 "https://*/*"
             ],
             "js": [
-                "content_script.js"
+                "content_script.js",
+                "sidebar_injector.js"
             ],
             "run_at": "document_end"
         }
@@ -50,5 +51,7 @@
         "16": "icons/sidebar-icon-16.png",
         "48": "icons/sidebar-icon-48.png",
         "128": "icons/sidebar-icon-128.png"
-    }
-}
+    },
+    "options_page": "settings.html"
+
+}

scripts.js

@@ -11,7 +11,6 @@ document.addEventListener('DOMContentLoaded', function () {
         document.getElementById('h1').value = pageData.firstH1;
         document.getElementById('http_status_code').value = pageData.httpStatusCode;
 
-
         // Update word and character counts
         document.getElementById('page_title_counts').innerHTML = `Words: ${pageData.titleWordCount}, Characters: ${pageData.titleCharacterCount}`;
         document.getElementById('meta_description_counts').innerHTML = `Words: ${pageData.metaDescriptionWordCount}, Characters: ${pageData.metaDescriptionCharacterCount}`;
@@ -41,7 +40,6 @@ document.addEventListener('DOMContentLoaded', function () {
 
         // Update robots.txt content
         document.getElementById('robots_txt').value = pageData.robotsTxtContent;
-
     }
 
     // Recursive function to create nested list elements for schema types
@@ -88,10 +86,6 @@ document.addEventListener('DOMContentLoaded', function () {
         return div;
     }
 
-
-
-
-
     // Get the collected page data from storage and fill the form
     chrome.storage.local.get(['pageData', 'responseHeaders', 'hreflangLinks'], function (result) {
         if (result.pageData) {
@@ -101,7 +95,6 @@ document.addEventListener('DOMContentLoaded', function () {
             document.getElementById('download-json').addEventListener('click', function () {
                 downloadJSON(result.pageData);
             });
-
         }
         if (result.responseHeaders) {
             const responseHeadersText = result.responseHeaders.map(header => `${header.name}: ${header.value}`).join('\n');
@@ -133,11 +126,10 @@ document.addEventListener('DOMContentLoaded', function () {
         }
     }
 
-
     // Get the link element by its ID
     var validator_link = document.getElementById('openValidatorLink');
     var rich_result_link = document.getElementById('validateInGoogleRichResult');
-
+    var settings_link = document.getElementById('openSettingsLink');
 
     // Add a click event listener to the link
     validator_link.addEventListener('click', function (event) {
@@ -169,6 +161,27 @@ document.addEventListener('DOMContentLoaded', function () {
         });
     });
 
+    // Add a click event listener to the settings link
+    settings_link.addEventListener('click', function (event) {
+        event.preventDefault();
+        chrome.runtime.openOptionsPage().catch(err => console.error(err));
+    });
+
+    // Listen for changes in the storage to update sidebar appearance
+    chrome.storage.onChanged.addListener(function (changes, area) {
+        if (area === 'local') {
+            if (changes.sidebarWidth || changes.sidebarBgColor) {
+                chrome.storage.local.get(['sidebarWidth', 'sidebarBgColor'], function (result) {
+                    const sidebar = document.getElementById('persistent-sidebar');
+                    if (sidebar) {
+                        sidebar.style.width = (result.sidebarWidth || 500) + 'px';
+                        sidebar.style.backgroundColor = result.sidebarBgColor || '#f1f1f1';
+                        document.body.style.marginLeft = (result.sidebarWidth || 500) + 'px';
+                    }
+                });
+            }
+        }
+    });
 
     // Download data as JSON file
     function downloadJSON(data) {
@@ -191,8 +204,4 @@ document.addEventListener('DOMContentLoaded', function () {
             });
         });
     });
-
-
-
-
 });

settings.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Extension Settings</title>
+    <link rel="stylesheet" type="text/css" href="sidebar.css">
+    <link rel="stylesheet" type="text/css" href="sidebar-options.css">
+</head>
+
+<body>
+    <div class="settings-content">
+        <h1>SEO Sidebar Settings</h1>
+
+        <div class="section">
+            <h2>Appearance</h2>
+            <label for="sidebarWidth">Sidebar Width (pixels):</label>
+            <input type="number" id="sidebarWidth" min="100" max="1000" step="10">
+            <br><br>
+            <label for="sidebarBgColor">Sidebar Background Color:</label>
+            <input type="color" id="sidebarBgColor">
+        </div>
+
+
+        <div class="section">
+            <h2>Links, Help and more</h2>
+            <ul>
+                <li>
+                    <a href="https://github.com/chrishaensel/seo-sidebar" target="_blank">SEO Sidebar Project on GitHub</a> (feel free to send a pull request)
+                </li>
+                <li>
+                    <a href="https://github.com/chrishaensel/seo-sidebar/issues" target="_blank">Issues on GitHub</a> - Send feature requests or bug reports
+                </li>
+                <li>
+                    <a href="https://x.com/chaensel" target="_blank">Find me on Twitter / X</a> @chaensel
+                </li>
+                <li>
+                    <a href="mailto:[email protected]?subject=SEO Sidebar Extension">Send me an email</a>
+                </li>
+
+            </ul>
+        </div>
+
+    </div>
+    <script src="settings.js"></script>
+</body>
+
+</html>

settings.js

@@ -0,0 +1,51 @@
+document.addEventListener('DOMContentLoaded', function () {
+
+    const sidebarWidthInput = document.getElementById('sidebarWidth');
+    const sidebarBgColorInput = document.getElementById('sidebarBgColor');
+
+    // Load the current settings and update the input fields
+    chrome.storage.local.get(['sidebarWidth', 'sidebarBgColor'], function (result) {
+    
+        sidebarWidthInput.value = result.sidebarWidth || 500;
+        sidebarBgColorInput.value = result.sidebarBgColor || '#f1f1f1';
+    });
+
+    sidebarWidthInput.addEventListener('input', function () {
+        const width = sidebarWidthInput.value;
+        chrome.storage.local.set({ sidebarWidth: width }, function () {
+            applySettings();
+        });
+    });
+
+    sidebarBgColorInput.addEventListener('input', function () {
+        const color = sidebarBgColorInput.value;
+        chrome.storage.local.set({ sidebarBgColor: color }, function () {
+            applySettings();
+        });
+    });
+
+    function applySettings() {
+        chrome.storage.local.get(['sidebarWidth', 'sidebarBgColor'], function (result) {
+            chrome.tabs.query({}, function (tabs) {
+                tabs.forEach(tab => {
+                    chrome.scripting.executeScript({
+                        target: { tabId: tab.id },
+                        func: (width, color) => {
+                            const sidebar = document.getElementById('persistent-sidebar');
+                            if (sidebar) {
+                                sidebar.style.width = width + 'px';
+                                sidebar.style.backgroundColor = color;
+                            }
+
+                            // Apply margin-left only if we're in the main document
+                            if (window.location.href !== chrome.runtime.getURL('sidebar.html')) {
+                                document.body.style.marginLeft = width + 'px';
+                            }
+                        },
+                        args: [result.sidebarWidth || 500, result.sidebarBgColor || '#f1f1f1']
+                    });
+                });
+            });
+        });
+    }
+});

sidebar-options.css

@@ -0,0 +1,4 @@
+.settings-content {
+    max-width: 80%;
+    margin: 0 auto;
+}

sidebar.css

@@ -1,9 +1,24 @@
+#persistent-sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    border-right: 1px solid #ccc;
+    z-index: 9999999; /* Max z-index value */
+    overflow-y: scroll;
+    transform: translateZ(0); /* Create a new stacking context */
+    transition: width 0.3s ease, background-color 0.3s ease;
+}
+
+
+
 body {
     font-family: Arial, sans-serif;
     line-height: 1.6;
     margin: 0;
     padding: 0;
     background-color: #f9f9f9;
+    transition: margin-left 0.3s ease;
 }
 
 #sidebar-content {

sidebar.html

@@ -13,7 +13,7 @@
         <h1>SEO Sidebar</h1>
         <p>
             <a href="https://haensel.pro" target="_blank" title="The creator of this shiny object">&raquo;
-                haensel.pro</a><br>
+                haensel.pro</a> &middot; <a id="openSettingsLink" href="#"> &raquo; Extension Settings</a> <br>
             <small>You can toggle this sidebar by clicking the extension icon in your browser.</small>
         </p>
 
@@ -113,6 +113,8 @@ <h2>Download Page Data</h2>
     </div>
 
     <script src="scripts.js" defer></script>
+    <script src="sidebar_settings.js" defer></script>
+
 </body>
 
 </html>

sidebar_injector.js

@@ -1,24 +1,29 @@
 (function () {
-    if (!document.getElementById('persistent-sidebar')) {
-        var sidebar = document.createElement('div');
-        sidebar.id = 'persistent-sidebar';
-        sidebar.style.position = 'fixed';
-        sidebar.style.top = '0';
-        sidebar.style.left = '0';
-        sidebar.style.width = '500px';
-        sidebar.style.height = '100vh';
-        sidebar.style.backgroundColor = '#f1f1f1';
-        sidebar.style.borderRight = '1px solid #ccc';
-        sidebar.style.zIndex = '9999999'; // Max z-index value
-        sidebar.style.overflowY = 'scroll';
-        sidebar.style.transform = 'translateZ(0)'; // Create a new stacking context
+    chrome.storage.local.get(['sidebarWidth', 'sidebarBgColor'], function (result) {
+        if (!document.getElementById('persistent-sidebar')) {
+            console.log(result)
+            var sidebar = document.createElement('div');
+            sidebar.id = 'persistent-sidebar';
+            sidebar.style.position = 'fixed';
+            sidebar.style.top = '0';
+            sidebar.style.left = '0';
+            sidebar.style.width = (result.sidebarWidth || 500) + 'px';
+            sidebar.style.height = '100vh';
+            sidebar.style.backgroundColor = result.sidebarBgColor || '#f1f1f1';
+            sidebar.style.borderRight = '1px solid #ccc';
+            sidebar.style.zIndex = '9999999'; // Max z-index value
 
-        sidebar.innerHTML = '<iframe src="' + chrome.runtime.getURL('sidebar.html') + '" style="width: 100%; height: 100%; border: none;"></iframe>';
-        document.body.appendChild(sidebar);
-        console.log("Sidebar appended to the body.");
+            sidebar.style.transform = 'translateZ(0)'; // Create a new stacking context
 
-        // Adjust body margin to accommodate the sidebar
-        document.body.style.marginLeft = '500px';
-        console.log("Body margin adjusted.");
-    }
+            sidebar.innerHTML = '<iframe src="' + chrome.runtime.getURL('sidebar.html') + '" style="width: 100%; height: 100%; border: none;"></iframe>';
+            document.body.appendChild(sidebar);
+            console.log("Sidebar appended to the body.");
+
+            // Adjust body margin to accommodate the sidebar only if not in the sidebar itself
+            if (window.location.href !== chrome.runtime.getURL('sidebar.html')) {
+                document.body.style.marginLeft = (result.sidebarWidth || 500) + 'px';
+                console.log("Body margin adjusted.");
+            }
+        }
+    });
 })();

sidebar_settings.js

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Apply stored settings only if we're in the main document
+    if (window.location.href === chrome.runtime.getURL('sidebar.html')) {
+        // This is inside the sidebar, apply the background color only
+        chrome.storage.local.get(['sidebarBgColor'], function (result) {
+            const sidebar = document.getElementById('sidebar-content');
+            if (sidebar) {
+                sidebar.style.backgroundColor = result.sidebarBgColor || '#f1f1f1';
+            }
+        });
+    } else {
+        // This is the main document, apply the width and margin-left
+        chrome.storage.local.get(['sidebarWidth'], function (result) {
+            document.body.style.marginLeft = (result.sidebarWidth || 500) + 'px';
+        });
+    }
+});