Refactoring

main
Elbert Alias 5 years ago
parent 6b77f4cadf
commit 2a54f1cd4f

@ -8,7 +8,7 @@
"optionUpgradeMessage": { "message": "Tell me about upgrades" },
"optionDynamicIcon": { "message": "Use technology icon instead of Wappalyzer logo" },
"optionTracking": { "message": "Anonymously send identified technologies to wappalyzer.com" },
"optionThemeMode": { "message": "Enable dark mode compatibility." },
"optionThemeMode": { "message": "Enable dark mode compatibility" },
"nothingToDo": { "message": "Nothing to do here." },
"noAppsDetected": { "message": "No technologies detected." },
"categoryPin": { "message": "Always show icon" },

@ -1,108 +0,0 @@
body {
color: #303942;
cursor: default;
direction: __MSG_@@bidi_dir__;
font-family: Helvetica, Arial, sans-serif;
font-size: .8rem;
line-height: 1.4rem;
margin: 0;
}
p {
margin: 0 0 1rem 0;
}
h1, h2, h3 {
font-weight: normal;
line-height: 1;
}
h1 {
border-bottom: 1px solid #dbdbdb;
font-size: 1.5rem;
margin: 0 0 1.5rem 0;
padding: 1rem 0 1.5rem 0;
}
h2 {
font-size: 1.3em;
margin-bottom: 0.4em;
}
h3 {
color: black;
font-size: 1.2em;
margin-bottom: 0.5em;
}
a {
color: rgb(17, 85, 204);
text-decoration: underline;
}
label {
display: block;
}
button {
background: #4608ad;
border: none;
border-radius: .2rem;
color: white;
font-size: inherit;
padding: 0 .6rem;
line-height: 1.8rem;
}
a:active {
color: rgb(5, 37, 119);
}
.hero {
background: linear-gradient(160deg, #32067c, #150233);
padding: 1.5rem 1.5rem 1rem 1.5rem;
}
.hero img {
height: 3rem;
}
.container {
margin: 0 auto;
max-width: 800px;
}
.content {
padding: 1.5rem;
}
#options-saved {
display: none;
margin-left: .5rem;
-webkit-animation: fadeout 2s;
}
#about {
border-top: 1px solid #dbdbdb;
margin-top: 1.5rem;
padding: 1.5rem 0 0 0;
}
#about img {
margin-right: .2rem;
vertical-align: middle;
}
#about button {
background: white;
border: 1px solid #dbdbdb;
cursor: pointer;
color: #303942;
margin-bottom: .5rem;
margin-inline-end: 1rem;
}
@-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}

@ -10,6 +10,7 @@
body {
background: #fff;
color: var(--color-text);
direction: __MSG_@@bidi_dir__;
font-family: Helvetica, Arial, sans-serif;
font-size: .9rem;
@ -36,7 +37,7 @@ a:hover {
align-items: center;
border-bottom: 1px solid var(--color-secondary);
display: flex;
height: 4rem;
height: 4.5rem;
}
.header__logo {
@ -79,6 +80,12 @@ a:hover {
padding: 1.5rem 1.5rem .5rem 1.5rem;
}
.empty {
opacity: .3;
padding: 3rem 1.5rem .5rem 1.5rem;
text-align: center;
}
.category {
page-break-inside: avoid;
break-inside: avoid-column;
@ -189,9 +196,19 @@ a:hover {
margin-top: 1rem;
}
.options {
padding: 1.5rem 1.5rem 1rem 1.5rem;
}
.options__label {
display: block;
margin-bottom: .5rem;
}
@media (prefers-color-scheme: dark) {
body.theme-mode {
background: var(--color-primary-darken);
color: var(--color-text-dark);
}
.theme-mode a {
@ -222,6 +239,10 @@ a:hover {
border-color: var(--color-secondary-dark)
}
.theme-mode .footer__settings {
color: var(--color-text-dark);
}
.theme-mode .alerts__icon {
color:var(--color-text-dark);
}

@ -1,69 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title data-i18n="options">Wappalyzer options</title>
<link rel="icon" href="../images/icon_32.png">
<title data-i18n="options"></title>
<link rel="stylesheet" href="../css/options.css">
<link rel="stylesheet" href="../css/styles.css">
<script src="../node_modules/webextension-polyfill/dist/browser-polyfill.js"></script>
<script src="../js/utils.js"></script>
<script src="../js/options.js"></script>
</head>
<body>
<div class="hero">
<div class="container">
<img src="../images/logo-white.svg">
</div>
</div>
<div class="options">
<label class="options__label">
<input class="options__checkbox" type="checkbox">
<div class="content">
<div class="container">
<h1 data-i18n="options">Options</h1>
<span data-i18n="optionUpgradeMessage">&nbsp;</span>
</label>
<p>
<label for="option-upgrade-message">
<input id="option-upgrade-message" type="checkbox">
<span data-i18n="optionUpgradeMessage">Tell me about upgrades</span>
</label>
<label for="option-dynamic-icon">
<input id="option-dynamic-icon" type="checkbox">
<span data-i18n="optionDynamicIcon">Use application icon instead of Wappalyzer logo</span>
</label>
<label for="option-tracking">
<input id="option-tracking" type="checkbox">
<span data-i18n="optionTracking">Anonymously send reports on detected applications to wappalyzer.com for research</span>
</label>
<label for="option-theme-mode">
<input id="option-theme-mode" type="checkbox">
<span data-i18n="optionThemeMode">Enable dark mode compatibility</span>
</label>
</p>
<label class="options__label">
<input class="options__checkbox" type="checkbox">
<div id="about">
<p>
<button id="github">
<img src="../images/github.png" width="16" height="16" alt="GitHub icon" />
<span data-i18n="github">Fork Wappalyzer on GitHub!</span>
</button>
<button id="twitter">
<img src="../images/twitter.png" width="16" height="16" alt="Twitter icon" />
<span data-i18n="twitter">Follow Wappalyzer on Twitter</span>
</button>
<button id="wappalyzer">
<img src="../images/icon_16.png" width="16" height="16" alt="Wappalyzer icon" />
<span data-i18n="website">Go to wappalyzer.com</span>
</button>
</p>
</div>
</div>
<span data-i18n="optionDynamicIcon">&nbsp;</span>
</label>
<label class="options__label">
<input class="options__checkbox" type="checkbox">
<span data-i18n="optionTracking">&nbsp;</span>
</label>
<label class="options__label">
<input class="options__checkbox" type="checkbox">
<span data-i18n="optionThemeMode">&nbsp;</span>
</label>
</div>
</body>
</html>

@ -4,7 +4,9 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/popup.css">
<title data-i18n="options"></title>
<link rel="stylesheet" href="../css/styles.css">
<script src="../js/utils.js"></script>
<script src="../js/popup.js"></script>
@ -25,6 +27,8 @@
<a class="terms__privacy" href="https://www.wappalyzer.com/privacy" data-i18n="privacyPolicy"></a>
</div>
<div class="empty" data-i18n="noAppsDetected"></div>
<div class="detections"></div>
<div data-template="category" class="category">
@ -50,6 +54,9 @@
<img class="technology__icon" alt="" src="../images/icons/default.svg" />
<a class="technology__link" href="#"></a>
<span class="technology__confidence">&nbsp;</span>
<span class="technology__version">&nbsp;</span>
</div>
</div>

@ -2,10 +2,10 @@
/* eslint-env browser */
/* globals chrome */
const port = chrome.runtime.connect({ name: 'content.js' })
const Content = {
port: chrome.runtime.connect({ name: 'content.js' }),
;(async function() {
if (typeof chrome !== 'undefined' && typeof document.body !== 'undefined') {
async init() {
await new Promise((resolve) => setTimeout(resolve, 1000))
try {
@ -25,13 +25,13 @@ const port = chrome.runtime.connect({ name: 'content.js' })
html = chunks.join('\n')
// Scripts
// Script tags
const scripts = Array.from(document.scripts)
.filter(({ src }) => src)
.map(({ src }) => src)
.filter((script) => script.indexOf('data:text/javascript;') !== 0)
// Meta
// Meta tags
const meta = Array.from(document.querySelectorAll('meta'))
.map((meta) => ({
key: meta.getAttribute('name') || meta.getAttribute('property'),
@ -39,61 +39,64 @@ const port = chrome.runtime.connect({ name: 'content.js' })
}))
.filter(({ value }) => value)
port.postMessage({
Content.port.postMessage({
func: 'onContentLoad',
args: [location.href, { html, scripts, meta }]
})
// JavaScript variables
const script = document.createElement('script')
script.onload = () => {
const onMessage = (event) => {
if (event.data.id !== 'js') {
return
}
window.removeEventListener('message', onMessage)
Content.port.postMessage({ func: 'getTechnologies' })
} catch (error) {
Content.port.postMessage({ func: 'error', args: [error, 'content.js'] })
}
},
port.postMessage({
func: 'analyze',
args: [new URL(location.href), { js: event.data.js }]
})
onGetTechnologies(technologies) {
const script = document.createElement('script')
script.remove()
script.onload = () => {
const onMessage = ({ data }) => {
if (!data.wappalyzer || !data.wappalyzer.js) {
return
}
window.addEventListener('message', onMessage)
window.removeEventListener('message', onMessage)
Content.port.postMessage({
func: 'analyzeJs',
args: [location.href, data.wappalyzer.js]
})
port.postMessage({ id: 'get_js_patterns' })
script.remove()
}
script.setAttribute('src', chrome.extension.getURL('js/inject.js'))
window.addEventListener('message', onMessage)
document.body.appendChild(script)
} catch (error) {
port.postMessage({ func: 'error', args: [error, 'content.js'] })
window.postMessage({
wappalyzer: {
technologies: technologies
.filter(({ js }) => Object.keys(js).length)
.filter(({ name }) => name === 'jQuery')
.map(({ name, js }) => ({ name, chains: Object.keys(js) }))
}
})
}
script.setAttribute('src', chrome.extension.getURL('js/inject.js'))
document.body.appendChild(script)
}
})()
port.onMessage.addListener((message) => {
switch (message.id) {
case 'get_js_patterns':
postMessage(
{
id: 'patterns',
patterns: message.response.patterns
},
window.location.href
)
break
default:
// Do nothing
}
Content.port.onMessage.addListener(({ func, args }) => {
const onFunc = `on${func.charAt(0).toUpperCase() + func.slice(1)}`
if (Content[onFunc]) {
Content[onFunc](args)
}
})
// https://stackoverflow.com/a/44774834
// https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/executeScript#Return_value
undefined // eslint-disable-line no-unused-expressions
if (/complete|interactive|loaded/.test(document.readyState)) {
Content.init()
} else {
document.addEventListener('DOMContentLoaded', Content.init)
}

@ -2,7 +2,14 @@
/* eslint-env browser */
/* globals chrome, Wappalyzer, Utils */
const { setTechnologies, setCategories, analyze, resolve, unique } = Wappalyzer
const {
setTechnologies,
setCategories,
analyze,
analyzeManyToMany,
resolve,
unique
} = Wappalyzer
const { promisify, getOption } = Utils
const Driver = {
@ -52,6 +59,26 @@ const Driver = {
}
},
async analyzeJs(href, js) {
const url = new URL(href)
await Driver.onDetect(
url,
Array.prototype.concat.apply(
[],
await Promise.all(
js.map(({ name, chain, value }) =>
analyzeManyToMany(
Wappalyzer.technologies.find(({ name: _name }) => name === _name),
'js',
{ [chain]: [value] }
)
)
)
)
)
},
onRuntimeConnect(port) {
port.onMessage.addListener(async ({ func, args }) => {
if (!func) {
@ -60,6 +87,12 @@ const Driver = {
Driver.log({ port: port.name, func, args })
if (!Driver[func]) {
Driver.error(new Error(`Method does not exist: Driver.${func}`))
return
}
port.postMessage({
func,
args: await Driver[func].call(port.sender, ...(args || []))
@ -175,7 +208,10 @@ const Driver = {
headers['content-type'] &&
/\/x?html/.test(headers['content-type'][0])
) {
await Driver.onDetect(url, await analyze(url, { headers }, { tab }))
await Driver.onDetect(
url,
await analyze(url.href, { headers }, { tab })
)
}
}
} catch (error) {
@ -192,12 +228,16 @@ const Driver = {
domain: `.${url.hostname}`
})
await Driver.onDetect(url, await analyze(url, items))
await Driver.onDetect(url, await analyze(href, items))
} catch (error) {
Driver.error(error)
}
},
getTechnologies() {
return Wappalyzer.technologies
},
async onDetect(url, detections = []) {
Driver.cache.hostnames[url.hostname] = unique([
...(Driver.cache.hostnames[url.hostname] || []),

@ -1,62 +1,44 @@
/* eslint-env browser */
/* eslint-disable no-restricted-globals, no-prototype-builtins */
;(() => {
;(function() {
try {
const detectJs = (chain) => {
const properties = chain.split('.')
let value = properties.length ? window : null
for (let i = 0; i < properties.length; i += 1) {
const property = properties[i]
if (value && value.hasOwnProperty(property)) {
value = value[property]
} else {
value = null
break
}
}
return typeof value === 'string' || typeof value === 'number'
? value
: !!value
}
const onMessage = (event) => {
if (event.data.id !== 'patterns') {
const onMessage = ({ data }) => {
if (!data.wappalyzer) {
return
}
removeEventListener('message', onMessage)
const patterns = event.data.patterns || {}
const js = {}
for (const appName in patterns) {
if (patterns.hasOwnProperty(appName)) {
js[appName] = {}
const { technologies } = data.wappalyzer || {}
for (const chain in patterns[appName]) {
if (patterns[appName].hasOwnProperty(chain)) {
js[appName][chain] = {}
for (const index in patterns[appName][chain]) {
const value = detectJs(chain)
removeEventListener('message', onMessage)
if (value && patterns[appName][chain].hasOwnProperty(index)) {
js[appName][chain][index] = value
}
}
}
}
postMessage({
wappalyzer: {
js: technologies.reduce((results, { name, chains }) => {
chains.forEach((chain) => {
const value = chain
.split('.')
.reduce(
(value, method) =>
value && value.hasOwnProperty(method)
? value[method]
: undefined,
window
)
technologies.push({
name,
chain,
value:
typeof value === 'string' || typeof value === 'number'
? value
: !!value
})
})
return technologies
}, [])
}
}
postMessage({ id: 'js', js }, window.location.href)
})
}
addEventListener('message', onMessage)

@ -1,109 +1,44 @@
/** global: browser */
/** global: Wappalyzer */
/* globals browser Wappalyzer */
'use strict'
/* eslint-env browser */
/* globals Utils */
const wappalyzer = new Wappalyzer()
const { i18n, getOption, setOption } = Utils
/**
* Get a value from localStorage
*/
function getOption(name, defaultValue = null) {
return new Promise(async (resolve, reject) => {
let value = defaultValue
const Options = {
async init() {
// Theme mode
const themeMode = await getOption('themeMode', false)
try {
const option = await browser.storage.local.get(name)
if (option[name] !== undefined) {
value = option[name]
}
} catch (error) {
wappalyzer.log(error.message, 'driver', 'error')
return reject(error.message)
if (themeMode) {
document.querySelector('body').classList.add('theme-mode')
}
return resolve(value)
})
;[
['upgradeMessage', true],
['dynamicIcon', true],
['tracking', true],
['themeMode', false]
].map(async ([option, defaultValue]) => {
const el = document
.querySelector(
`[data-i18n="option${option.charAt(0).toUpperCase() +
option.slice(1)}"]`
)
.parentNode.querySelector('input')
el.checked = !!(await getOption(option, defaultValue))
el.addEventListener('click', async () => {
await setOption(option, !!el.checked)
})
})
i18n()
}
}
/**
* Set a value in localStorage
*/
function setOption(name, value) {
return new Promise(async (resolve, reject) => {
try {
await browser.storage.local.set({ [name]: value })
} catch (error) {
wappalyzer.log(error.message, 'driver', 'error')
return reject(error.message)
}
return resolve()
})
if (/complete|interactive|loaded/.test(document.readyState)) {
Options.init()
} else {
document.addEventListener('DOMContentLoaded', Options.init)
}
document.addEventListener('DOMContentLoaded', async () => {
const nodes = document.querySelectorAll('[data-i18n]')
Array.prototype.forEach.call(nodes, (node) => {
node.childNodes[0].nodeValue = browser.i18n.getMessage(node.dataset.i18n)
})
document.querySelector('#github').addEventListener('click', () => {
window.open(wappalyzer.config.githubURL)
})
document.querySelector('#twitter').addEventListener('click', () => {
window.open(wappalyzer.config.twitterURL)
})
document.querySelector('#wappalyzer').addEventListener('click', () => {
window.open(wappalyzer.config.websiteURL)
})
let el
let value
// Upgrade message
value = await getOption('upgradeMessage', true)
el = document.querySelector('#option-upgrade-message')
el.checked = value
el.addEventListener('change', (e) =>
setOption('upgradeMessage', e.target.checked)
)
// Dynamic icon
value = await getOption('dynamicIcon', true)
el = document.querySelector('#option-dynamic-icon')
el.checked = value
el.addEventListener('change', (e) =>
setOption('dynamicIcon', e.target.checked)
)
// Tracking
value = await getOption('tracking', true)
el = document.querySelector('#option-tracking')
el.checked = value
el.addEventListener('change', (e) => setOption('tracking', e.target.checked))
// Theme Mode
value = await getOption('themeMode', false)
el = document.querySelector('#option-theme-mode')
el.checked = value
el.addEventListener('change', (e) => setOption('themeMode', e.target.checked))
})

@ -2,7 +2,7 @@
/* eslint-env browser */
/* globals chrome, Utils */
const { agent, getOption, setOption, promisify } = Utils
const { agent, i18n, getOption, setOption, promisify } = Utils
const Popup = {
port: chrome.runtime.connect({ name: 'popup.js' }),
@ -37,7 +37,7 @@ const Popup = {
} else {
document.querySelector('.detections').style.display = 'none'
Popup.i18n()
i18n()
}
// Alert
@ -65,12 +65,6 @@ const Popup = {
Popup.driver('log', message, 'popup.js')
},
i18n() {
Array.from(document.querySelectorAll('[data-i18n]')).forEach(
(node) => (node.innerHTML = chrome.i18n.getMessage(node.dataset.i18n))
)
},
categorise(technologies) {
return Object.values(
technologies.reduce((categories, technology) => {
@ -91,6 +85,10 @@ const Popup = {
async onGetDetections(detections) {
const pinnedCategory = await getOption('pinnedCategory')
if (detections.length) {
document.querySelector('.empty').remove()
}
Popup.categorise(detections).forEach(
({ id, name, slug: categorySlug, technologies }) => {
const categoryNode = Popup.templates.category.cloneNode(true)
@ -149,7 +147,7 @@ const Popup = {
a.addEventListener('click', () => Popup.driver('open', a.href))
)
Popup.i18n()
i18n()
}
}

@ -43,5 +43,11 @@ const Utils = {
} catch (error) {
throw new Error(error.message || error.toString())
}
},
i18n() {
Array.from(document.querySelectorAll('[data-i18n]')).forEach(
(node) => (node.innerHTML = chrome.i18n.getMessage(node.dataset.i18n))
)
}
}

Loading…
Cancel
Save