Additional search engines on ghosterysearch

src/background.js

@@ -91,7 +91,7 @@ async function start() {
   }, { urls: [`${SERP_BASE_URL}/search*`]}, ["blocking", "requestHeaders"]);
 
 
-  browser.runtime.onMessage.addListener(async ({ action }) => {
+  browser.runtime.onMessage.addListener(async ({ action, args }, { tab }) => {
     if (action === 'getTokenCount') {
       return Promise.resolve(tokenPool.tokens.length);
     }
@@ -101,6 +101,17 @@ async function start() {
         includeFavicon: true,
       })).filter(site => site.type === 'url');
     }
+    if (action === 'getSearchEngines') {
+      return browser.search.get();
+    }
+    if (action === 'search') {
+      const { query, engine } = args[0];
+      return browser.search.search({
+        query,
+        engine,
+        tabId: tab.id,
+      });
+    }
     return false;
   })
 }

src/content/additional-search-engines.js

@@ -0,0 +1,76 @@
+"use strict";
+
+(async function () {
+
+  function cleanup() {
+    const $content = document.querySelector('.main-content');
+    const $searchEngines = document.querySelector('.searchengines');
+    if ($searchEngines) {
+      $content.removeChild($searchEngines);
+    }
+  }
+
+  async function addSearchEngines() {
+    const query = new URLSearchParams(window.location.search).get('q');
+    const $content = document.querySelector('.main-content');
+    const searchEngines = await browser.runtime.sendMessage({
+      action: 'getSearchEngines',
+    });
+    const $searchEnginesWrapper = document.createElement('div');
+    $searchEnginesWrapper.classList.add('searchengines');
+    $searchEnginesWrapper.style.display = 'flex';
+    $searchEnginesWrapper.style.flexDirection = 'row';
+    $searchEnginesWrapper.style.margin = '40px 0 40px 0';
+    $searchEnginesWrapper.style.flexWrap = 'wrap';
+
+    searchEngines.forEach(engine => {
+      const $engine = document.createElement('a');
+      $engine.style.display = 'flex';
+      $engine.style.flexDirection = 'column';
+      $engine.style.alignItems = 'center';
+      $engine.style.margin = '10px 7px';
+      $engine.style.textDecoration = 'none';
+      $engine.style.color = 'black';
+      $engine.style.cursor = 'pointer';
+      $engine.addEventListener('click', () => {
+        browser.runtime.sendMessage({
+          action: 'search',
+          args: [{
+            query,
+            engine: engine.name,
+          }],
+        });
+      });
+
+      const $favicon = document.createElement('img');
+      $favicon.setAttribute('src', engine.favIconUrl);
+      $favicon.style.height = '24px';
+      $favicon.style.width = '24px';
+      $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';
+      $engine.appendChild($favicon);
+
+      const $title = document.createElement('span');
+      $title.innerText = engine.name;
+      $title.style.marginTop = '5px';
+      $engine.appendChild($title);
+
+      $searchEnginesWrapper.appendChild($engine);
+    });
+
+    $content.appendChild($searchEnginesWrapper);
+  }
+
+  if (document.readyState === 'complete' || document.readyState === 'interactive') {
+    cleanup();
+    addSearchEngines();
+  } else {
+    document.addEventListener('DOMContentLoaded', function onLoad() {
+      document.removeEventListener('DOMContentLoaded', onLoad);
+      cleanup();
+      addSearchEngines();
+    });
+  }
+}());

src/content/top-sites.js

@@ -14,7 +14,6 @@
     const topSites = await browser.runtime.sendMessage({
       action: 'getTopSites'
     });
-    console.warn(topSites)
 
     const $topSitesWrapper = document.createElement('div');
     $topSitesWrapper.classList.add('topsites');

src/manifest.json

@@ -20,10 +20,17 @@
       "http://localhost/*"
     ],
     "js": ["content/login-cta.js", "content/top-sites.js"]
+  }, {
+    "matches": [
+      "https://*.ghosterysearch.com/search*",
+      "http://localhost/search*"
+    ],
+    "js": ["content/additional-search-engines.js"]
   }],
   "manifest_version": 2,
   "name": "Ghostery Search",
   "permissions": [
+    "search",
     "storage",
     "cookies",
     "webRequest",