diff --git a/src/background.js b/src/background.js index 9b2a601..02f85d5 100644 --- a/src/background.js +++ b/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; }) } diff --git a/src/content/top-sites.js b/src/content/top-sites.js new file mode 100644 index 0000000..d807520 --- /dev/null +++ b/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(); + }); + } +}()); diff --git a/src/manifest.json b/src/manifest.json index 186afc8..4029c1a 100644 --- a/src/manifest.json +++ b/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/*",