diff --git a/src/apps.json b/src/apps.json index b8d6860c5..42232232b 100644 --- a/src/apps.json +++ b/src/apps.json @@ -2963,7 +2963,6 @@ ], "cpe": "cpe:/a:docker:engine", "icon": "Docker.svg", - "implies": "Linux", "html": "", "website": "https://www.docker.com/" }, diff --git a/src/drivers/npm/driver.js b/src/drivers/npm/driver.js index fcc6dd6be..b00d05fc6 100644 --- a/src/drivers/npm/driver.js +++ b/src/drivers/npm/driver.js @@ -238,6 +238,8 @@ class Site { this.listeners = {} this.headers = {} + + this.pages = [] } async init() {} @@ -285,6 +287,8 @@ class Site { const page = await this.browser.newPage() + this.pages.push(page) + page.setDefaultTimeout(this.options.maxWait) await page.setRequestInterception(true) @@ -402,6 +406,10 @@ class Site { // Validate response if (!this.analyzedUrls[url.href].status) { + await page.close() + + this.log('Page closed') + throw new Error('NO_RESPONSE') } @@ -452,6 +460,10 @@ class Site { [] ) + await page.close() + + this.log('Page closed') + this.emit('goto', url) return reducedLinks @@ -537,6 +549,24 @@ class Site { } }) } + + async destroy() { + await Promise.all( + this.pages.map(async (page) => { + if (page) { + try { + await page.close() + + this.log('Page closed') + } catch (error) { + // Continue + } + } + }) + ) + + this.log('Site closed') + } } module.exports = Driver diff --git a/src/drivers/webextension/css/popup.css b/src/drivers/webextension/css/popup.css index e364577df..a73551918 100644 --- a/src/drivers/webextension/css/popup.css +++ b/src/drivers/webextension/css/popup.css @@ -1,7 +1,11 @@ :root { --color-primary: #4608ad; + --color-primary-darken: #32067c; --color-secondary: #e0e0e0; + --color-secondary-dark: rgba(255, 255, 255, .2); --color-text: #4a4a4a; + --color-text-dark: rgba(255, 255, 255, .8); + --color-light-grey: #fafafa; } body { @@ -11,7 +15,7 @@ body { font-size: .9rem; line-height: 1.5rem; margin: 0; - min-width: 30rem; + min-width: 35rem; } a { @@ -31,17 +35,13 @@ a:hover { .header { align-items: center; border-bottom: 1px solid var(--color-secondary); - height: 4rem; display: flex; + height: 4rem; } .header__logo { - display: inline-block; - margin: .2rem 1.5rem 0 1.5rem; - -webkit-backface-visibility: hidden; - -webkit-transform: translateZ(0) scale(1.0, 1.0); - transform: translateZ(0); height: 2.5rem; + margin: .5rem 1.5rem 0 1.5rem; } .header__logo--dark { @@ -50,16 +50,33 @@ a:hover { .footer { align-items: center; + justify-content: space-between; border-top: 1px solid var(--color-secondary); height: 3rem; display: flex; padding: 0 1.5rem; } +.alerts__icon { + color: var(--color-primary); + height: 1.1rem; + margin-right: .5rem; + vertical-align: text-bottom; + width: 1.1rem; +} + +.footer__settings { + color: var(--color-primary); + cursor: pointer; + height: 1.1rem; + vertical-align: middle; + width: 1.1rem; +} + .detections { columns: 2; column-gap: 1.5rem; - padding: 1.5rem; + padding: 1.5rem 1.5rem .5rem 1.5rem; } .category { @@ -74,13 +91,56 @@ a:hover { text-decoration: none; } +.category__pin { + color: var(--color-primary); + cursor: pointer; + display: none; + visibility: hidden; + height: 1.1rem; + vertical-align: middle; + width: 1.1rem; +} + +.category__pin--outline { + display: inline; +} + +.category__pin--active { + visibility: visible; +} + +.category__pin.category__pin--active { + display: inline +} + +.category__pin--outline.category__pin--active { + display: none +} + +.category__heading:hover .category__pin { + visibility: visible; +} + .technology { display: block; line-height: 1.7rem; } +.technology__heading { + display: flex; + align-items: center; + margin-bottom: .2rem; +} + +.technology__icon { + height: 16px; + margin-right: .5rem; + width: 16px; + vertical-align: middle; +} + .technology__link { - color: var(--color-text) + color: var(--color-text); } .terms { @@ -128,3 +188,41 @@ a:hover { .terms__privacy { margin-top: 1rem; } + +@media (prefers-color-scheme: dark) { + body.theme-mode { + background: var(--color-primary-darken); + } + + .theme-mode a { + color: var(--color-text-dark); + } + + .theme-mode .header { + border-color: var(--color-secondary-dark) + } + + .theme-mode .header__logo { + display: none; + } + + .theme-mode .header__logo--dark { + display: inline-block; + } + + .theme-mode .category__link { + color: #fff; + } + + .theme-mode .category__pin { + color: #fff + } + + .theme-mode .footer { + border-color: var(--color-secondary-dark) + } + + .theme-mode .alerts__icon { + color:var(--color-text-dark); + } +} diff --git a/src/drivers/webextension/html/popup.html b/src/drivers/webextension/html/popup.html index e7306ecc7..2716c6dac 100644 --- a/src/drivers/webextension/html/popup.html +++ b/src/drivers/webextension/html/popup.html @@ -28,17 +28,43 @@
- +
+ + + + + + + + + + + +
- +
+ + + +
- +
+ + + + + +
+ + + +
diff --git a/src/drivers/webextension/js/driver.js b/src/drivers/webextension/js/driver.js index ed1e51026..5671c66ef 100644 --- a/src/drivers/webextension/js/driver.js +++ b/src/drivers/webextension/js/driver.js @@ -237,7 +237,13 @@ const Driver = { tabs.map(async ({ id: tabId }) => { await promisify(chrome.pageAction, 'setIcon', { tabId, - path: chrome.extension.getURL(`../images/icons/${icon}`) + path: chrome.extension.getURL( + `../images/icons/${ + /\.svg$/i.test(icon) + ? `converted/${icon.replace(/\.svg$/, '.png')}` + : icon + }` + ) }) chrome.pageAction.show(tabId) diff --git a/src/drivers/webextension/js/popup.js b/src/drivers/webextension/js/popup.js index 9cf2b60c8..8170aa98c 100644 --- a/src/drivers/webextension/js/popup.js +++ b/src/drivers/webextension/js/popup.js @@ -2,22 +2,31 @@ /* eslint-env browser */ /* globals chrome, Utils */ -const { agent, getOption } = Utils +const { agent, getOption, setOption, promisify } = Utils const Popup = { port: chrome.runtime.connect({ name: 'popup.js' }), async init() { + // Templates Popup.templates = Array.from( document.querySelectorAll('[data-template]') ).reduce((templates, template) => { - templates[template.dataset.template] = template + templates[template.dataset.template] = template.cloneNode(true) + + template.remove() return templates }, {}) - Popup.log(agent) + // Theme mode + const themeMode = await getOption('themeMode', false) + + if (themeMode) { + document.querySelector('body').classList.add('theme-mode') + } + // Terms const termsAccepted = agent === 'chrome' || (await getOption('termsAccepted', false)) @@ -30,6 +39,22 @@ const Popup = { Popup.i18n() } + + // Alert + const [{ url }] = await promisify(chrome.tabs, 'query', { + active: true, + currentWindow: true + }) + + document.querySelector( + '.alerts__link' + ).href = `https://www.wappalyzer.com/alerts/manage?url=${encodeURIComponent( + `${url}` + )}` + + document + .querySelector('.footer__settings') + .addEventListener('click', () => chrome.runtime.openOptionsPage()) }, driver(func, ...args) { @@ -63,23 +88,52 @@ const Popup = { ) }, - onGetDetections(detections) { + async onGetDetections(detections) { + const pinnedCategory = await getOption('pinnedCategory') + Popup.categorise(detections).forEach( - ({ name, slug: categorySlug, technologies }) => { + ({ id, name, slug: categorySlug, technologies }) => { const categoryNode = Popup.templates.category.cloneNode(true) const link = categoryNode.querySelector('.category__link') - link.href = `https://www.wappalyzer.com/technologie/${categorySlug}` + link.href = `https://www.wappalyzer.com/technologies/${categorySlug}` link.textContent = name + const pins = categoryNode.querySelectorAll('.category__pin') + + if (pinnedCategory === id) { + pins.forEach((pin) => pin.classList.add('category__pin--active')) + } + + pins.forEach((pin) => + pin.addEventListener('click', async () => { + const pinnedCategory = await getOption('pinnedCategory') + + Array.from( + document.querySelectorAll('.category__pin--active') + ).forEach((pin) => pin.classList.remove('category__pin--active')) + + if (pinnedCategory === id) { + await setOption('pinnedCategory', null) + } else { + await setOption('pinnedCategory', id) + + pins.forEach((pin) => pin.classList.add('category__pin--active')) + } + }) + ) + technologies.forEach(({ name, slug, icon, website }) => { - Popup.log(name) const technologyNode = Popup.templates.technology.cloneNode(true) + const image = technologyNode.querySelector('.technology__icon') + + image.src = `../images/icons/${icon}` + const link = technologyNode.querySelector('.technology__link') - link.href = `https://www.wappalyzer.com/technologie/${categorySlug}/${slug}` + link.href = `https://www.wappalyzer.com/technologies/${categorySlug}/${slug}` link.textContent = name categoryNode @@ -91,6 +145,10 @@ const Popup = { } ) + Array.from(document.querySelectorAll('a')).forEach((a) => + a.addEventListener('click', () => Popup.driver('open', a.href)) + ) + Popup.i18n() } }