Top sites on ghosterysearch

src/background.js

@@ -90,10 +90,17 @@ async function start() {
     };
   }, { urls: [`${SERP_BASE_URL}/search*`]}, ["blocking", "requestHeaders"]);
 
-  browser.runtime.onMessage.addListener(({ action }) => {
+
+  browser.runtime.onMessage.addListener(async ({ action }) => {
     if (action === 'getTokenCount') {
       return Promise.resolve(tokenPool.tokens.length);
     }
+    if (action === 'getTopSites') {
+      return (await browser.topSites.get({
+        newtab: true,
+        includeFavicon: true,
+      })).filter(site => site.type === 'url');
+    }
     return false;
   })
 }

src/content/top-sites.js

@@ -0,0 +1,68 @@
+"use strict";
+
+(async function () {
+  function cleanup() {
+    const $content = document.querySelector('.content');
+    const $oldTopSites = $content.querySelector('.topsites');
+    if ($oldTopSites) {
+      $content.removeChild($oldTopSites);
+    }
+  }
+
+  async function loadTopSites() {
+    const $content = document.querySelector('.content');
+    const topSites = await browser.runtime.sendMessage({
+      action: 'getTopSites'
+    });
+    console.warn(topSites)
+
+    const $topSitesWrapper = document.createElement('div');
+    $topSitesWrapper.classList.add('topsites');
+    $topSitesWrapper.style.display = 'flex';
+    $topSitesWrapper.style.flexDirection = 'row';
+    $topSitesWrapper.style.margin = '40px 0 0 0';
+    $topSitesWrapper.style.flexWrap = 'wrap';
+    $topSitesWrapper.style.justifyContent = 'center';
+
+    topSites.forEach(site => {
+      const $site = document.createElement('a');
+      $site.setAttribute('href', site.url);
+      $site.style.display = 'flex';
+      $site.style.flexDirection = 'column';
+      $site.style.alignItems = 'center';
+      $site.style.margin = '10px 7px';
+      $site.style.textDecoration = 'none';
+      $site.style.color = 'black';
+
+      const $favicon = document.createElement('img');
+      $favicon.setAttribute('src', site.favicon);
+      $favicon.style.height = '48px';
+      $favicon.style.width = '48px';
+      $favicon.style.boxShadow = 'inset 0 0 0 1px rgba(249, 249, 250, 0.2), 0 1px 8px 0 rgba(12, 12, 13, 0.2)';
+      $favicon.style.transition = 'box-shadow 150ms';
+      $favicon.style.borderRadius = '5px';
+      $favicon.style.backgroundColor = 'white';
+      $site.appendChild($favicon);
+
+      const $title = document.createElement('span');
+      $title.innerText = site.title;
+      $title.style.marginTop = '5px';
+      $site.appendChild($title);
+
+      $topSitesWrapper.appendChild($site);
+    });
+
+    $content.appendChild($topSitesWrapper);
+  }
+
+  if (document.readyState === 'complete' || document.readyState === 'interactive') {
+    cleanup();
+    loadTopSites();
+  } else {
+    document.addEventListener('DOMContentLoaded', function onLoad() {
+      document.removeEventListener('DOMContentLoaded', onLoad);
+      cleanup();
+      loadTopSites();
+    });
+  }
+}());

src/manifest.json

@@ -19,7 +19,7 @@
       "https://*.ghosterysearch.com/",
       "http://localhost/*"
     ],
-    "js": ["content/login-cta.js"]
+    "js": ["content/login-cta.js", "content/top-sites.js"]
   }],
   "manifest_version": 2,
   "name": "Ghostery Search",
@@ -28,6 +28,7 @@
     "cookies",
     "webRequest",
     "webRequestBlocking",
+    "topSites",
     "https://www.ghostery.com/*",
     "https://consumerapi.ghostery.com/*",
     "https://www.ghosterystage.com/*",