1.0.5

Use topSites to list user's top sites Set options to not open in a new tab
Supernova3339 · Jun 8, 2023 · a62676c · a62676c
1 parent aa9dac3
commit a62676c
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 54 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,12 +1,13 @@
 {
   "manifest_version": 3,
   "name": "Supernova's Tab Page",
-  "version": "1.0.4",
   "description": "This is my custom tab page extension I built to increase my productivity.",
+  "version": "1.0.5",
   "permissions": [
     "storage",
     "scripting",
     "activeTab",
+    "topSites",
     "http://*/*",
     "https://*/*"
   ],
@@ -20,7 +21,7 @@
   },
   "options_ui": {
     "page": "options.html",
-    "open_in_tab": true
+    "open_in_tab": false
   },
   "icons": {
     "16": "icon16.png",

diff --git a/newtab.css b/newtab.css
@@ -16,35 +16,30 @@ html, body {
 
   .quote {
     font-size: 24px;
-    color: var(--text-color);
+    color: var(--text-color, white);
     margin-bottom: 20px;
   }
 
   .time {
     font-size: 48px;
-    color: var(--text-color);
+    color: var(--text-color, white);
     margin-bottom: 20px;
   }
 
   .weather {
     font-size: 24px;
-    color: var(--text-color);
+    color: var(--text-color, white);
+  }
+
+  .topSites {
+    font-size: 24px;
+    color: var(--text-color, white);
   }
 
   .container {
     position: relative;
   }
 
-  .quote,
-  .time,
-  .weather {
-    opacity: 0;
-    animation-name: fade-in;
-    animation-duration: 1s;
-    animation-delay: 0.5s;
-    animation-fill-mode: forwards;
-  }
-
   @keyframes fade-in {
     0% {
       opacity: 0;
@@ -59,16 +54,23 @@ html, body {
     top: 10px;
     right: 10px;
     z-index: 9999;
+    opacity: 0;
+    animation-name: fade-in;
+    animation-duration: 1s;
+    animation-delay: 1.5s;
+    animation-fill-mode: forwards;
   }
+
+  /* POPUP */
 
   .popup {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 400px;
-    height: 300px;
-    background-color: #fff;
+    height: 425px;
+    background-color: var(--wallpaper-color, white);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     z-index: 9999;
     display: none;
@@ -82,4 +84,45 @@ html, body {
 
   .popup.show {
     display: block;
+  }
+
+  /* TOP SITES */
+
+  .top-sites {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr); /* Display 8 sites per row */
+    gap: 10px; /* Adjust the gap between site containers */
+  }
+
+  .site-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100px; /* Adjust the width of the site container */
+    height: 100px; /* Adjust the height of the site container */
+    background-color: var(--text-color, white); /* Set the background color of the site container */
+    border-radius: 10px; /* Apply rounded corners to the site container */
+    text-align: center;
+    overflow: hidden;
+  }
+
+  .site-favicon {
+    width: 32px; /* Adjust the width of the favicon */
+    height: 32px; /* Adjust the height of the favicon */
+  }
+
+  .site-title {
+    width: 100%;
+    margin-top: 5px; /* Adjust the margin between the favicon and the site title */
+    font-size: 12px; /* Adjust the font size of the site title */
+    color: var(--wallpaper-color, black); /* Set the color of the site title */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .container, .quote, .time, .weather, .top-sites {
+    opacity: 0;
+    animation: fade-in 1.5s ease-in-out forwards;
   }
diff --git a/newtab.html b/newtab.html
@@ -9,10 +9,14 @@
 </head>
 
 <body>
+
+
   <div class="container">
     <div class="quote"></div>
     <div class="time"></div>
     <div class="weather"></div>
+    <br><br><br>
+    <div class="top-sites"></div>
   </div>
 
   <div class="settings-icon">

diff --git a/newtab.js b/newtab.js
@@ -2,9 +2,12 @@ document.addEventListener("DOMContentLoaded", function() {
   var quoteElement = document.querySelector(".quote");
   var timeElement = document.querySelector(".time");
   var weatherElement = document.querySelector(".weather");
+  var topSitesElement = document.querySelector(".top-sites");
   var containerElement = document.querySelector(".container");
   var settingsIcon = document.querySelector(".settings-icon");
   var popup = document.querySelector(".popup");
+  const textColorInput = document.getElementById("textColor");
+  const toggleTopSitesInput = document.getElementById("toggleTopSites");
 
   // Display colors
   displayColors();
@@ -15,13 +18,21 @@ document.addEventListener("DOMContentLoaded", function() {
 
   // Get the weather information
   getWeather();
-  
+
   // Fetch the quote
   fetchQuote();
 
-  settingsIcon.addEventListener("click", function() {
-    popup.classList.toggle("show");
-  });
+  // Get the top sites
+  var toggleTopSites = localStorage.getItem("toggleTopSites");
+  if (toggleTopSites === "true") {
+    getTopSites();
+  }
+
+  if (settingsIcon && popup) {
+    settingsIcon.addEventListener("click", function() {
+      popup.classList.toggle("show");
+    });
+  }
 
   function displayColors() {
     containerElement.style.setProperty("--text-color", getTextColor());
@@ -61,7 +72,6 @@ document.addEventListener("DOMContentLoaded", function() {
   }
 
   function getWeather() {
-
     setTimeout(function() {
       fetch('https://api.ip.sb/geoip')
       .then(res => res.json())
@@ -70,7 +80,8 @@ document.addEventListener("DOMContentLoaded", function() {
           localStorage.setItem('state', data.region)
           localStorage.setItem('country', data.country)
       })
-      }, 5184000000);
+    }, 1000);
+
     const city = localStorage.getItem('city');
     const state = localStorage.getItem('region');
     const country = localStorage.getItem('country');
@@ -81,37 +92,37 @@ document.addEventListener("DOMContentLoaded", function() {
     if(!temperatureUnit) {
       localStorage.setItem('temperatureUnit', "Fahrenheit")
     }
-  
+
     if (!apiKey) {
       weatherElement.innerHTML = "Please provide an API Key in the options.";
       return;
     }
-  
+
     var apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city},${state},${country}&appid=${apiKey}&units=metric`;
-  
+
     fetch(apiUrl)
       .then(response => response.json())
       .then(data => {
         var temperature = data.main.temp;
         var temperatureSymbol = temperatureUnit === "fahrenheit" ? "°F" : "°C";
         var description = data.weather[0].description;
-  
+
         if (temperatureUnit === "fahrenheit") {
           temperature = (temperature * 9 / 5) + 32;
         }
-  
+
         temperature = temperature.toFixed(1);
-  
+
         var weatherText = `Current temperature: ${temperature}${temperatureSymbol} / ${description}`;
         weatherElement.textContent = weatherText;
-  
+
         // Show the container after weather data is loaded
         containerElement.classList.add("show");
       })
       .catch(error => {
         console.log("Error fetching weather:", error);
         weatherElement.innerHTML = "Failed to fetch weather data.";
-  
+
         // Show the container even if weather data fails to load
         containerElement.classList.add("show");
       });
@@ -127,22 +138,44 @@ document.addEventListener("DOMContentLoaded", function() {
     return textColor || "#ffffff";
   }
 
-  const textColorInput = document.getElementById("textColor");
-
-  textColorInput.addEventListener("change", function () {
-    document.documentElement.style.setProperty(
-      "--text-color",
-      textColorInput.value
-    );
-  });
-
-  function sleep(milliseconds) {
-    const date = Date.now();
-    let currentDate = null;
-    do {
-      currentDate = Date.now();
-    } while (currentDate - date < milliseconds);
-  }
+  function getTopSites() {
+    var showTopSites = localStorage.getItem("showTopSites");
+
+    // Check if the showTopSites option is enabled (default: true)
+    if (showTopSites !== "false") {
+      chrome.topSites.get(function (topSites) {
+        var topSitesContainer = document.querySelector(".top-sites");
 
+        // hardcoded for now - make this customizable in future
+        for (var i = 0; i < 9 && i < topSites.length; i++) {
+          var site = topSites[i];
+
+          var siteContainer = document.createElement("a");
+          siteContainer.href = site.url;
+          siteContainer.classList.add("site-container");
+          siteContainer.setAttribute("target", "_blank");
+
+          var siteFavicon = document.createElement("img");
+          siteFavicon.classList.add("site-favicon");
+          siteFavicon.onerror = function () {
+            // Fallback to SVG if favicon is not available
+            siteFavicon.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-world' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'%3E%3C/path%3E%3Cpath d='M3.6 9h16.8'%3E%3C/path%3E%3Cpath d='M3.6 15h16.8'%3E%3C/path%3E%3Cpath d='M11.5 3a17 17 0 0 0 0 18'%3E%3C/path%3E%3Cpath d='M12.5 3a17 17 0 0 1 0 18'%3E%3C/path%3E%3C/svg%3E";
+          };
+          siteFavicon.src = "https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=" + encodeURIComponent(site.url) + "&size=32";
+
+          var siteTitle = document.createElement("span");
+          siteTitle.classList.add("site-title");
+          siteTitle.textContent = site.title;
+
+          siteContainer.appendChild(siteFavicon);
+          siteContainer.appendChild(siteTitle);
+          topSitesContainer.appendChild(siteContainer);
+
+          containerElement.classList.add("show");
+
+        }
+      });
+    }
+  }  
 
-});
+});
diff --git a/options.css b/options.css
@@ -68,4 +68,20 @@ input[type="color"]::-webkit-color-swatch {
   border: none;
   border-radius: 5px;
   padding: 0;
-}
+}
+
+/* custom checkbox styling */
+
+.checkbox-container {
+  display: flex;
+  align-items: center;
+}
+
+.checkbox-label {
+  margin-left: 8px;
+}
+
+.checkbox {
+  width: 20px;
+  height: 20px;
+}
diff --git a/options.html b/options.html
@@ -1,14 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>New Tab Page Options</title>
   <link rel="stylesheet" href="options.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.js"></script>
 </head>
-
 <body>
   <div class="container">
     <h1 class="title">New Tab Page Options</h1>
@@ -32,13 +29,15 @@ <h1 class="title">New Tab Page Options</h1>
         <label for="textColor" class="label">Text Color:</label>
         <input type="color" id="textColor" class="input">
       </div>
+      <div class="checkbox-container">
+        <label for="topSitesCheckbox" class="checkbox-label">Show Top Sites</label>
+        <input type="checkbox" id="toggleTopSites" class="checkbox">
+      </div>
       <div class="form-group">
         <button type="submit" class="optionItem button submitButton">Save Options</button>
       </div>
     </form>
   </div>
-
   <script src="options.js"></script>
 </body>
-
 </html>