From da8506cadbecfb2eae5a273f2485d77c74416588 Mon Sep 17 00:00:00 2001 From: Elbert Alias <77259+AliasIO@users.noreply.github.com> Date: Fri, 26 Jun 2020 09:49:48 +1000 Subject: [PATCH] Change webextension to browser action, add badges --- package.json | 2 +- src/drivers/webextension/css/styles.css | 16 ++++++++ src/drivers/webextension/js/driver.js | 28 +++++++------- src/drivers/webextension/js/options.js | 8 +--- src/drivers/webextension/js/popup.js | 49 ++++++++++++++++--------- src/drivers/webextension/manifest.json | 2 +- 6 files changed, 65 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index 8b99cfbc1..f998d553d 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,6 @@ "convert": "cd ./src/drivers/webextension/images/icons ; cp *.svg converted ; cd converted ; convert-svg-to-png *.svg --width 32 --height 32 ; rm *.svg", "prettify": "jsonlint -si --trim-trailing-commas --enforce-double-quotes ./src/apps.json", "build": "yarn run link && yarn run validate && yarn run prettify && yarn run convert && node ./bin/build.js", - "build:safari": "xcrun safari-web-extension-converter --swift --project-location build --bundle-identifier com.wappalyzer.webextension --force src/drivers/webextension" + "build:safari": "xcrun safari-web-extension-converter --swift --project-location build --force src/drivers/webextension" } } diff --git a/src/drivers/webextension/css/styles.css b/src/drivers/webextension/css/styles.css index bab5ea177..9ebe6a132 100644 --- a/src/drivers/webextension/css/styles.css +++ b/src/drivers/webextension/css/styles.css @@ -68,6 +68,10 @@ a:hover { width: 100%; } +.alerts--hidden { + visibility: hidden; +} + .alerts__icon { color: var(--color-primary); height: 1.1rem; @@ -90,12 +94,20 @@ a:hover { padding: 1.5rem 1.5rem .5rem 1.5rem; } +.detections--hidden { + display: none; +} + .empty { opacity: .3; padding: 3rem 1.5rem .5rem 1.5rem; text-align: center; } +.empty--hidden { + display: none; +} + .category { page-break-inside: avoid; break-inside: avoid-column; @@ -185,6 +197,10 @@ a:hover { width: 36rem; } +.terms--hidden { + display: none; +} + .terms__wrapper { display: none; height: 100%; diff --git a/src/drivers/webextension/js/driver.js b/src/drivers/webextension/js/driver.js index 9427f5f3a..4195fa04f 100644 --- a/src/drivers/webextension/js/driver.js +++ b/src/drivers/webextension/js/driver.js @@ -55,11 +55,16 @@ const Driver = { ads: await getOption('ads', []) } + await promisify(chrome.browserAction, 'setBadgeBackgroundColor', { + color: '#6B39BD' + }) + chrome.webRequest.onCompleted.addListener( Driver.onWebRequestComplete, { urls: ['http://*/*', 'https://*/*'], types: ['main_frame'] }, ['responseHeaders'] ) + chrome.tabs.onRemoved.addListener((id) => (Driver.cache.tabs[id] = null)) // Enable messaging between scripts @@ -361,11 +366,7 @@ const Driver = { * @param {Object} technologies */ async setIcon(url, technologies) { - if (!chrome.pageAction.show) { - return - } - - const dynamicIcon = await getOption('dynamicIcon', true) + const dynamicIcon = await getOption('dynamicIcon', false) let icon = 'default.svg' @@ -382,9 +383,13 @@ const Driver = { const tabs = await promisify(chrome.tabs, 'query', { url }) await Promise.all( - tabs.map(async ({ id: tabId }) => { - await Promise.race([ - promisify(chrome.pageAction, 'setIcon', { + tabs.map(({ id: tabId }) => + Promise.all([ + promisify(chrome.browserAction, 'setBadgeText', { + tabId, + text: technologies.length.toString().toString() + }), + promisify(chrome.browserAction, 'setIcon', { tabId, path: chrome.extension.getURL( `../images/icons/${ @@ -393,12 +398,9 @@ const Driver = { : icon }` ) - }), - new Promise((resolve) => setTimeout(resolve, 500)) + }) ]) - - chrome.pageAction.show(tabId) - }) + ) ) }, diff --git a/src/drivers/webextension/js/options.js b/src/drivers/webextension/js/options.js index 26f066c59..fd378a27c 100644 --- a/src/drivers/webextension/js/options.js +++ b/src/drivers/webextension/js/options.js @@ -18,7 +18,7 @@ const Options = { ;[ ['upgradeMessage', true], - ['dynamicIcon', true], + ['dynamicIcon', false], ['tracking', true], ['themeMode', false] ].map(async ([option, defaultValue]) => { @@ -36,12 +36,6 @@ const Options = { }) }) - if (!chrome.pageAction.show) { - document - .querySelector('[data-i18n="optionDynamicIcon"]') - .parentNode.remove() - } - i18n() } } diff --git a/src/drivers/webextension/js/popup.js b/src/drivers/webextension/js/popup.js index c5125a227..119bdcc80 100644 --- a/src/drivers/webextension/js/popup.js +++ b/src/drivers/webextension/js/popup.js @@ -40,24 +40,26 @@ const Popup = { agent === 'chrome' || (await getOption('termsAccepted', false)) if (termsAccepted) { + document.querySelector('.terms').classList.add('terms--hidden') + document.querySelector('.empty').classList.remove('empty--hidden') + Popup.onGetDetections(await Popup.driver('getDetections')) } else { - document.querySelector('.terms').style.display = 'flex' - document.querySelector('.detections').style.display = 'none' - document.querySelector('.empty').style.display = 'none' + document.querySelector('.terms').classList.remove('terms--hidden') + document.querySelector('.detections').classList.add('detections--hidden') + document.querySelector('.empty').classList.add('empty--hidden') document.querySelector('.terms').addEventListener('click', async () => { await setOption('termsAccepted', true) - document.querySelector('.terms').remove() - document.querySelector('.detections').style.display = 'block' - document.querySelector('.empty').style.display = 'block' + document.querySelector('.terms').classList.remove('terms--hidden') + document + .querySelector('.detections') + .classList.add('.detections--hidden') + document.querySelector('.empty').classList.add('empty--hidden') chrome.runtime.sendMessage('getDetections', Popup.onGetDetections) }) - - // Apply internationalization - i18n() } // Alert @@ -66,15 +68,24 @@ const Popup = { currentWindow: true }) - document.querySelector( - '.alerts__link' - ).href = `https://www.wappalyzer.com/alerts/manage?url=${encodeURIComponent( - `${url}` - )}` + if (url.startsWith('http')) { + document.querySelector('.alerts').classList.remove('alerts--hidden') + + document.querySelector( + '.alerts__link' + ).href = `https://www.wappalyzer.com/alerts/manage?url=${encodeURIComponent( + `${url}` + )}` + } else { + document.querySelector('.alerts').classList.add('alerts--hidden') + } document .querySelector('.footer__settings') .addEventListener('click', () => chrome.runtime.openOptionsPage()) + + // Apply internationalization + i18n() }, driver(func, args) { @@ -115,12 +126,14 @@ const Popup = { * @param {Array} detections */ async onGetDetections(detections = []) { - const pinnedCategory = await getOption('pinnedCategory') - - if (detections.length) { - document.querySelector('.empty').remove() + if (!detections || !detections.length) { + return } + document.querySelector('.empty').classList.add('empty--hidden') + + const pinnedCategory = await getOption('pinnedCategory') + const categorised = Popup.categorise(detections) categorised.forEach(({ id, name, slug: categorySlug, technologies }) => { diff --git a/src/drivers/webextension/manifest.json b/src/drivers/webextension/manifest.json index a1ee31340..57c9ade6f 100644 --- a/src/drivers/webextension/manifest.json +++ b/src/drivers/webextension/manifest.json @@ -14,7 +14,7 @@ "38": "images/icon_38.png", "128": "images/icon_128.png" }, - "page_action": { + "browser_action": { "default_icon": { "16": "images/icon_16.png", "19": "images/icon_19.png",