Change webextension to browser action, add badges

main
Elbert Alias 5 years ago
parent 9d77cd5b48
commit da8506cadb

@ -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", "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", "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": "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"
} }
} }

@ -68,6 +68,10 @@ a:hover {
width: 100%; width: 100%;
} }
.alerts--hidden {
visibility: hidden;
}
.alerts__icon { .alerts__icon {
color: var(--color-primary); color: var(--color-primary);
height: 1.1rem; height: 1.1rem;
@ -90,12 +94,20 @@ a:hover {
padding: 1.5rem 1.5rem .5rem 1.5rem; padding: 1.5rem 1.5rem .5rem 1.5rem;
} }
.detections--hidden {
display: none;
}
.empty { .empty {
opacity: .3; opacity: .3;
padding: 3rem 1.5rem .5rem 1.5rem; padding: 3rem 1.5rem .5rem 1.5rem;
text-align: center; text-align: center;
} }
.empty--hidden {
display: none;
}
.category { .category {
page-break-inside: avoid; page-break-inside: avoid;
break-inside: avoid-column; break-inside: avoid-column;
@ -185,6 +197,10 @@ a:hover {
width: 36rem; width: 36rem;
} }
.terms--hidden {
display: none;
}
.terms__wrapper { .terms__wrapper {
display: none; display: none;
height: 100%; height: 100%;

@ -55,11 +55,16 @@ const Driver = {
ads: await getOption('ads', []) ads: await getOption('ads', [])
} }
await promisify(chrome.browserAction, 'setBadgeBackgroundColor', {
color: '#6B39BD'
})
chrome.webRequest.onCompleted.addListener( chrome.webRequest.onCompleted.addListener(
Driver.onWebRequestComplete, Driver.onWebRequestComplete,
{ urls: ['http://*/*', 'https://*/*'], types: ['main_frame'] }, { urls: ['http://*/*', 'https://*/*'], types: ['main_frame'] },
['responseHeaders'] ['responseHeaders']
) )
chrome.tabs.onRemoved.addListener((id) => (Driver.cache.tabs[id] = null)) chrome.tabs.onRemoved.addListener((id) => (Driver.cache.tabs[id] = null))
// Enable messaging between scripts // Enable messaging between scripts
@ -361,11 +366,7 @@ const Driver = {
* @param {Object} technologies * @param {Object} technologies
*/ */
async setIcon(url, technologies) { async setIcon(url, technologies) {
if (!chrome.pageAction.show) { const dynamicIcon = await getOption('dynamicIcon', false)
return
}
const dynamicIcon = await getOption('dynamicIcon', true)
let icon = 'default.svg' let icon = 'default.svg'
@ -382,9 +383,13 @@ const Driver = {
const tabs = await promisify(chrome.tabs, 'query', { url }) const tabs = await promisify(chrome.tabs, 'query', { url })
await Promise.all( await Promise.all(
tabs.map(async ({ id: tabId }) => { tabs.map(({ id: tabId }) =>
await Promise.race([ Promise.all([
promisify(chrome.pageAction, 'setIcon', { promisify(chrome.browserAction, 'setBadgeText', {
tabId,
text: technologies.length.toString().toString()
}),
promisify(chrome.browserAction, 'setIcon', {
tabId, tabId,
path: chrome.extension.getURL( path: chrome.extension.getURL(
`../images/icons/${ `../images/icons/${
@ -393,12 +398,9 @@ const Driver = {
: icon : icon
}` }`
) )
}),
new Promise((resolve) => setTimeout(resolve, 500))
])
chrome.pageAction.show(tabId)
}) })
])
)
) )
}, },

@ -18,7 +18,7 @@ const Options = {
;[ ;[
['upgradeMessage', true], ['upgradeMessage', true],
['dynamicIcon', true], ['dynamicIcon', false],
['tracking', true], ['tracking', true],
['themeMode', false] ['themeMode', false]
].map(async ([option, defaultValue]) => { ].map(async ([option, defaultValue]) => {
@ -36,12 +36,6 @@ const Options = {
}) })
}) })
if (!chrome.pageAction.show) {
document
.querySelector('[data-i18n="optionDynamicIcon"]')
.parentNode.remove()
}
i18n() i18n()
} }
} }

@ -40,24 +40,26 @@ const Popup = {
agent === 'chrome' || (await getOption('termsAccepted', false)) agent === 'chrome' || (await getOption('termsAccepted', false))
if (termsAccepted) { if (termsAccepted) {
document.querySelector('.terms').classList.add('terms--hidden')
document.querySelector('.empty').classList.remove('empty--hidden')
Popup.onGetDetections(await Popup.driver('getDetections')) Popup.onGetDetections(await Popup.driver('getDetections'))
} else { } else {
document.querySelector('.terms').style.display = 'flex' document.querySelector('.terms').classList.remove('terms--hidden')
document.querySelector('.detections').style.display = 'none' document.querySelector('.detections').classList.add('detections--hidden')
document.querySelector('.empty').style.display = 'none' document.querySelector('.empty').classList.add('empty--hidden')
document.querySelector('.terms').addEventListener('click', async () => { document.querySelector('.terms').addEventListener('click', async () => {
await setOption('termsAccepted', true) await setOption('termsAccepted', true)
document.querySelector('.terms').remove() document.querySelector('.terms').classList.remove('terms--hidden')
document.querySelector('.detections').style.display = 'block' document
document.querySelector('.empty').style.display = 'block' .querySelector('.detections')
.classList.add('.detections--hidden')
document.querySelector('.empty').classList.add('empty--hidden')
chrome.runtime.sendMessage('getDetections', Popup.onGetDetections) chrome.runtime.sendMessage('getDetections', Popup.onGetDetections)
}) })
// Apply internationalization
i18n()
} }
// Alert // Alert
@ -66,15 +68,24 @@ const Popup = {
currentWindow: true currentWindow: true
}) })
if (url.startsWith('http')) {
document.querySelector('.alerts').classList.remove('alerts--hidden')
document.querySelector( document.querySelector(
'.alerts__link' '.alerts__link'
).href = `https://www.wappalyzer.com/alerts/manage?url=${encodeURIComponent( ).href = `https://www.wappalyzer.com/alerts/manage?url=${encodeURIComponent(
`${url}` `${url}`
)}` )}`
} else {
document.querySelector('.alerts').classList.add('alerts--hidden')
}
document document
.querySelector('.footer__settings') .querySelector('.footer__settings')
.addEventListener('click', () => chrome.runtime.openOptionsPage()) .addEventListener('click', () => chrome.runtime.openOptionsPage())
// Apply internationalization
i18n()
}, },
driver(func, args) { driver(func, args) {
@ -115,12 +126,14 @@ const Popup = {
* @param {Array} detections * @param {Array} detections
*/ */
async onGetDetections(detections = []) { async onGetDetections(detections = []) {
const pinnedCategory = await getOption('pinnedCategory') if (!detections || !detections.length) {
return
if (detections.length) {
document.querySelector('.empty').remove()
} }
document.querySelector('.empty').classList.add('empty--hidden')
const pinnedCategory = await getOption('pinnedCategory')
const categorised = Popup.categorise(detections) const categorised = Popup.categorise(detections)
categorised.forEach(({ id, name, slug: categorySlug, technologies }) => { categorised.forEach(({ id, name, slug: categorySlug, technologies }) => {

@ -14,7 +14,7 @@
"38": "images/icon_38.png", "38": "images/icon_38.png",
"128": "images/icon_128.png" "128": "images/icon_128.png"
}, },
"page_action": { "browser_action": {
"default_icon": { "default_icon": {
"16": "images/icon_16.png", "16": "images/icon_16.png",
"19": "images/icon_19.png", "19": "images/icon_19.png",