You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
5.2 KiB
196 lines
5.2 KiB
/** global: chrome */
|
|
/** global: browser */
|
|
|
|
let pinnedCategory = null;
|
|
|
|
const func = (tabs) => {
|
|
(chrome || browser).runtime.sendMessage({
|
|
id: 'get_apps',
|
|
tab: tabs[0],
|
|
source: 'popup.js',
|
|
}, (response) => {
|
|
pinnedCategory = response.pinnedCategory;
|
|
|
|
replaceDomWhenReady(appsToDomTemplate(response));
|
|
});
|
|
};
|
|
|
|
browser.tabs.query({ active: true, currentWindow: true })
|
|
.then(func)
|
|
.catch(console.error);
|
|
|
|
function replaceDomWhenReady(dom) {
|
|
if (/complete|interactive|loaded/.test(document.readyState)) {
|
|
replaceDom(dom);
|
|
} else {
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
replaceDom(dom);
|
|
});
|
|
}
|
|
}
|
|
|
|
function replaceDom(domTemplate) {
|
|
const container = document.getElementsByClassName('container')[0];
|
|
|
|
while (container.firstChild) {
|
|
container.removeChild(container.firstChild);
|
|
}
|
|
|
|
container.appendChild(jsonToDOM(domTemplate, document, {}));
|
|
|
|
const nodes = document.querySelectorAll('[data-i18n]');
|
|
|
|
Array.prototype.forEach.call(nodes, (node) => {
|
|
node.childNodes[0].nodeValue = browser.i18n.getMessage(node.dataset.i18n);
|
|
});
|
|
|
|
Array.from(document.querySelectorAll('.detected__category-pin-wrapper')).forEach((pin) => {
|
|
pin.addEventListener('click', () => {
|
|
const categoryId = parseInt(pin.dataset.categoryId, 10);
|
|
|
|
if (categoryId === pinnedCategory) {
|
|
pin.className = 'detected__category-pin-wrapper';
|
|
|
|
pinnedCategory = null;
|
|
} else {
|
|
const active = document.querySelector('.detected__category-pin-wrapper--active');
|
|
|
|
if (active) {
|
|
active.className = 'detected__category-pin-wrapper';
|
|
}
|
|
|
|
pin.className = 'detected__category-pin-wrapper detected__category-pin-wrapper--active';
|
|
|
|
pinnedCategory = categoryId;
|
|
}
|
|
|
|
(chrome || browser).runtime.sendMessage({
|
|
id: 'set_option',
|
|
key: 'pinnedCategory',
|
|
value: pinnedCategory,
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function appsToDomTemplate(response) {
|
|
let template = [];
|
|
|
|
if (response.tabCache && Object.keys(response.tabCache.detected).length > 0) {
|
|
const categories = {};
|
|
|
|
// Group apps by category
|
|
for (const appName in response.tabCache.detected) {
|
|
response.apps[appName].cats.forEach((cat) => {
|
|
categories[cat] = categories[cat] || { apps: [] };
|
|
|
|
categories[cat].apps[appName] = appName;
|
|
});
|
|
}
|
|
|
|
for (const cat in categories) {
|
|
const apps = [];
|
|
|
|
for (const appName in categories[cat].apps) {
|
|
const confidence = response.tabCache.detected[appName].confidenceTotal;
|
|
const version = response.tabCache.detected[appName].version;
|
|
|
|
apps.push(
|
|
[
|
|
'a', {
|
|
class: 'detected__app',
|
|
target: '_blank',
|
|
href: `https://www.wappalyzer.com/technologies/${slugify(appName)}`,
|
|
}, [
|
|
'img', {
|
|
class: 'detected__app-icon',
|
|
src: `../images/icons/${response.apps[appName].icon || 'default.svg'}`,
|
|
},
|
|
], [
|
|
'span', {
|
|
class: 'detected__app-name',
|
|
},
|
|
appName,
|
|
], version ? [
|
|
'span', {
|
|
class: 'detected__app-version',
|
|
},
|
|
version,
|
|
] : null, confidence < 100 ? [
|
|
'span', {
|
|
class: 'detected__app-confidence',
|
|
},
|
|
`${confidence}% sure`,
|
|
] : null,
|
|
],
|
|
);
|
|
}
|
|
|
|
template.push(
|
|
[
|
|
'div', {
|
|
class: 'detected__category',
|
|
}, [
|
|
'div', {
|
|
class: 'detected__category-name',
|
|
}, [
|
|
'a', {
|
|
class: 'detected__category-link',
|
|
target: '_blank',
|
|
href: `https://www.wappalyzer.com/categories/${slugify(response.categories[cat].name)}`,
|
|
},
|
|
browser.i18n.getMessage(`categoryName${cat}`),
|
|
], [
|
|
'span', {
|
|
class: `detected__category-pin-wrapper${pinnedCategory == cat ? ' detected__category-pin-wrapper--active' : ''}`,
|
|
'data-category-id': cat,
|
|
title: browser.i18n.getMessage('categoryPin'),
|
|
}, [
|
|
'img', {
|
|
class: 'detected__category-pin detected__category-pin--active',
|
|
src: '../images/pin-active.svg',
|
|
},
|
|
], [
|
|
'img', {
|
|
class: 'detected__category-pin detected__category-pin--inactive',
|
|
src: '../images/pin.svg',
|
|
},
|
|
],
|
|
],
|
|
], [
|
|
'div', {
|
|
class: 'detected__apps',
|
|
},
|
|
apps,
|
|
],
|
|
],
|
|
);
|
|
}
|
|
|
|
template = [
|
|
'div', {
|
|
class: 'detected',
|
|
},
|
|
template,
|
|
];
|
|
} else {
|
|
template = [
|
|
'div', {
|
|
class: 'empty',
|
|
},
|
|
[
|
|
'span', {
|
|
class: 'empty__text',
|
|
},
|
|
browser.i18n.getMessage('noAppsDetected'),
|
|
],
|
|
];
|
|
}
|
|
|
|
return template;
|
|
}
|
|
|
|
function slugify(string) {
|
|
return string.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/--+/g, '-').replace(/(?:^-|-$)/, '');
|
|
}
|