Elbert Alias
4 years ago
commit
e2c507b2d1
@ -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; }
|
||||
}
|
||||
@ -1,287 +0,0 @@
|
||||
body {
|
||||
background: #fff;
|
||||
direction: __MSG_@@bidi_dir__;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: .8rem;
|
||||
margin: 0;
|
||||
min-width: 30rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header__link:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.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: 2rem;
|
||||
}
|
||||
|
||||
.header__logo--dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
align-items: center;
|
||||
border-top: 1px solid #dbdbdb;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.footer__link {
|
||||
color: #4608ad;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer__link:hover, .footer__link:active {
|
||||
color: #4608ad;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 5rem;
|
||||
padding: 1rem 1.5rem 0rem 1.5rem;
|
||||
}
|
||||
|
||||
.detected {
|
||||
columns: 2;
|
||||
column-gap: 1.5rem;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
|
||||
.detected__category {
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid-column;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.detected__category-name {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.detected__category-link {
|
||||
color: #4608ad;
|
||||
font-weight: bold;
|
||||
line-height: 2rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.detected__category-link:hover {
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
.detected__category-pin-wrapper {
|
||||
margin-left: .2rem;
|
||||
margin-right: .2rem;
|
||||
}
|
||||
|
||||
.detected__category-pin {
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
height: 16px;
|
||||
margin-left: .2rem;
|
||||
width: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.detected__category:hover .detected__category-pin--inactive {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.detected__category-pin-wrapper--active .detected__category-pin--inactive,
|
||||
.detected__category-pin-wrapper:hover .detected__category-pin--inactive {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.detected__category-pin-wrapper--active .detected__category-pin--active,
|
||||
.detected__category-pin-wrapper:hover .detected__category-pin--active {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.detected__app {
|
||||
color: #4a4a4a;
|
||||
display: block;
|
||||
line-height: 1.7rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.detected__app:focus {
|
||||
display: block;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.detected__app-icon {
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
margin-inline-end: .5rem;
|
||||
vertical-align: -.2rem;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.detected__app-name {
|
||||
}
|
||||
|
||||
.detected__app-version, .detected__app-confidence {
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
font-size: .7rem;
|
||||
margin-left: .3rem;
|
||||
padding: .1rem .2rem;
|
||||
}
|
||||
|
||||
.detected__app:hover .detected__app-name {
|
||||
border-bottom: 1px solid #4a4a4a;
|
||||
}
|
||||
|
||||
.detected__app:hover .detected__app-version,
|
||||
.detected__app:hover .detected__app-confidence {
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
.detected-app {
|
||||
padding: 7px 0;
|
||||
}
|
||||
|
||||
.detected-app:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.detected-app:last-child {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
height: 5rem;
|
||||
margin-bottom: 1rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty__text {
|
||||
}
|
||||
|
||||
.terms {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
height: 12rem;
|
||||
width: 36rem;
|
||||
}
|
||||
|
||||
.terms__wrapper {
|
||||
display: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.terms__wrapper--active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.terms__content {
|
||||
font-size: .9rem;
|
||||
line-height: 150%;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.terms__accept {
|
||||
background-color: #4608ad;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: .9rem;
|
||||
padding: .8rem 3rem;
|
||||
}
|
||||
|
||||
.terms__accept:hover {
|
||||
background-color: #4107a1;
|
||||
}
|
||||
|
||||
.terms__privacy {
|
||||
color: #4608ad;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* Add alternative color palette for Dark mode theme. */
|
||||
body.theme-mode-sync {
|
||||
background: linear-gradient(160deg, #32067c, #150233);
|
||||
}
|
||||
|
||||
.theme-mode-sync .header {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .2);
|
||||
}
|
||||
|
||||
.theme-mode-sync .header__logo--dark {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.theme-mode-sync .header__logo--light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-mode-sync .footer {
|
||||
border-top: 1px solid rgba(255, 255, 255, .2);
|
||||
}
|
||||
|
||||
.theme-mode-sync .footer__link {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.theme-mode-sync .footer__link:hover, .theme-mode-sync .footer__link:active {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.theme-mode-sync .container {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.theme-mode-sync .detected__category-link {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.theme-mode-sync .detected__app {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.theme-mode-sync .detected__category-link:hover {
|
||||
color: white;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
.theme-mode-sync .detected__app-version, .theme-mode-sync .detected__app-confidence {
|
||||
background-color: #4608ad;
|
||||
}
|
||||
|
||||
.theme-mode-sync .detected__app:hover .detected__app-name {
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
.theme-mode-sync .detected__app:hover .theme-mode-sync .detected__app-version,
|
||||
.theme-mode-sync .detected__app:hover .theme-mode-sync .detected__app-confidence {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.theme-mode-sync .terms__accept,
|
||||
.theme-mode-sync .terms__privacy {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,271 @@
|
||||
: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 {
|
||||
background: #fff;
|
||||
color: var(--color-text);
|
||||
direction: __MSG_@@bidi_dir__;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: .9rem;
|
||||
line-height: 1.5rem;
|
||||
margin: 0;
|
||||
min-width: 35rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.header {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
display: flex;
|
||||
height: 4.5rem;
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
height: 2.5rem;
|
||||
margin: .5rem 1.5rem 0 1.5rem;
|
||||
}
|
||||
|
||||
.header__logo--dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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 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;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.category__link {
|
||||
font-weight: bold;
|
||||
line-height: 2rem;
|
||||
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);
|
||||
}
|
||||
|
||||
.technology__confidence {
|
||||
opacity: .5;
|
||||
font-size: .7rem;
|
||||
margin-left: .2rem;
|
||||
}
|
||||
|
||||
.technology__version {
|
||||
background: var(--color-secondary);
|
||||
border-radius: 3px;
|
||||
font-size: .7rem;
|
||||
padding: .1rem .3rem;
|
||||
margin-left: .4rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.terms {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
height: 12rem;
|
||||
width: 36rem;
|
||||
}
|
||||
|
||||
.terms__wrapper {
|
||||
display: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.terms__wrapper--active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.terms__content {
|
||||
font-size: .9rem;
|
||||
line-height: 150%;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.terms__accept {
|
||||
background-color: #4608ad;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: .9rem;
|
||||
padding: .8rem 3rem;
|
||||
}
|
||||
|
||||
.terms__accept:hover {
|
||||
background-color: #4107a1;
|
||||
}
|
||||
|
||||
.terms__privacy {
|
||||
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 {
|
||||
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 .technology__confidence {
|
||||
}
|
||||
|
||||
.theme-mode .technology__version {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.theme-mode .footer {
|
||||
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/wappalyzer.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="content">
|
||||
<div class="container">
|
||||
<h1 data-i18n="options">Options</h1>
|
||||
<div class="options">
|
||||
<label class="options__label">
|
||||
<input class="options__checkbox" type="checkbox">
|
||||
|
||||
<p>
|
||||
<label for="option-upgrade-message">
|
||||
<input id="option-upgrade-message" type="checkbox">
|
||||
<span data-i18n="optionUpgradeMessage">Tell me about upgrades</span>
|
||||
<span data-i18n="optionUpgradeMessage"> </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 class="options__label">
|
||||
<input class="options__checkbox" type="checkbox">
|
||||
|
||||
<span data-i18n="optionDynamicIcon"> </span>
|
||||
</label>
|
||||
<label for="option-theme-mode">
|
||||
<input id="option-theme-mode" type="checkbox">
|
||||
<span data-i18n="optionThemeMode">Enable dark mode compatibility</span>
|
||||
|
||||
<label class="options__label">
|
||||
<input class="options__checkbox" type="checkbox">
|
||||
|
||||
<span data-i18n="optionTracking"> </span>
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<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>
|
||||
<label class="options__label">
|
||||
<input class="options__checkbox" type="checkbox">
|
||||
|
||||
<span data-i18n="optionThemeMode"> </span>
|
||||
</label>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,38 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<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="../node_modules/webextension-polyfill/dist/browser-polyfill.js"></script>
|
||||
<script src="../js/lib/jsontodom.js"></script>
|
||||
<script src="../js/utils.js"></script>
|
||||
<script src="../js/popup.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a href="https://www.wappalyzer.com/" class="header__link" target="_blank">
|
||||
<a href="https://www.wappalyzer.com/" class="header__link">
|
||||
<img alt="" class="header__logo header__logo--light" src="../images/logo-purple.svg">
|
||||
<img alt="" class="header__logo header__logo--dark" src="../images/logo-white.svg">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="terms__wrapper">
|
||||
<div class="terms">
|
||||
<div class="terms__content" data-i18n="termsContent"></div>
|
||||
|
||||
<button class="terms__accept" data-i18n="termsAccept" />
|
||||
<button class="terms__accept" data-i18n="termsAccept"> </button>
|
||||
|
||||
<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">
|
||||
<div class="category__heading">
|
||||
<a class="category__link" href="#"></a>
|
||||
|
||||
<svg class="category__pin category__pin--outline" viewBox="0 0 24 24">
|
||||
<title data-i18n="categoryPin"></title>
|
||||
<path fill="currentColor" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z" />
|
||||
</svg>
|
||||
|
||||
<svg class="category__pin" viewBox="0 0 24 24">
|
||||
<title data-i18n="categoryPin"></title>
|
||||
<path fill="currentColor" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="technologies"></div>
|
||||
</div>
|
||||
|
||||
<div data-template="technology" class="technology">
|
||||
<div class="technology__heading">
|
||||
<img class="technology__icon" alt="" src="../images/icons/default.svg" />
|
||||
|
||||
<a class="technology__link" href="#"></a>
|
||||
|
||||
<span>
|
||||
<span class="technology__version"> </span>
|
||||
</span>
|
||||
|
||||
<span class="technology__confidence"> </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<a class="footer__link" href="https://www.wappalyzer.com/alerts/manage" data-i18n="createAlert"></a>
|
||||
<div class="alerts">
|
||||
<svg class="alerts__icon" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M12,8H4A2,2 0 0,0 2,10V14A2,2 0 0,0 4,16H5V20A1,1 0 0,0 6,21H8A1,1 0 0,0 9,20V16H12L17,20V4L12,8M21.5,12C21.5,13.71 20.54,15.26 19,16V8C20.53,8.75 21.5,10.3 21.5,12Z" />
|
||||
</svg>
|
||||
|
||||
<a class="alerts__link" href="https://www.wappalyzer.com/alerts/manage" data-i18n="createAlert"></a>
|
||||
</div>
|
||||
|
||||
<svg class="footer__settings" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,63 +0,0 @@
|
||||
jsonToDOM.namespaces = {
|
||||
html: 'http://www.w3.org/1999/xhtml',
|
||||
xul: 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul',
|
||||
};
|
||||
|
||||
jsonToDOM.defaultNamespace = jsonToDOM.namespaces.html;
|
||||
|
||||
function jsonToDOM(jsonTemplate, doc, nodes) {
|
||||
function namespace(name) {
|
||||
const reElemNameParts = /^(?:(.*):)?(.*)$/.exec(name);
|
||||
return { namespace: jsonToDOM.namespaces[reElemNameParts[1]], shortName: reElemNameParts[2] };
|
||||
}
|
||||
|
||||
// Note that 'elemNameOrArray' is: either the full element name (eg. [html:]div) or an array of elements in JSON notation
|
||||
function tag(elemNameOrArray, elemAttr) {
|
||||
// Array of elements? Parse each one...
|
||||
if (Array.isArray(elemNameOrArray)) {
|
||||
const frag = doc.createDocumentFragment();
|
||||
Array.prototype.forEach.call(arguments, (thisElem) => {
|
||||
frag.appendChild(tag(...thisElem));
|
||||
});
|
||||
return frag;
|
||||
}
|
||||
|
||||
// Single element? Parse element namespace prefix (if none exists, default to defaultNamespace), and create element
|
||||
const elemNs = namespace(elemNameOrArray);
|
||||
const elem = doc.createElementNS(elemNs.namespace || jsonToDOM.defaultNamespace, elemNs.shortName);
|
||||
|
||||
// Set element's attributes and/or callback functions (eg. onclick)
|
||||
for (const key in elemAttr) {
|
||||
const val = elemAttr[key];
|
||||
if (nodes && key == 'key') {
|
||||
nodes[val] = elem;
|
||||
continue;
|
||||
}
|
||||
|
||||
const attrNs = namespace(key);
|
||||
if (typeof val === 'function') {
|
||||
// Special case for function attributes; don't just add them as 'on...' attributes, but as events, using addEventListener
|
||||
elem.addEventListener(key.replace(/^on/, ''), val, false);
|
||||
} else {
|
||||
// Note that the default namespace for XML attributes is, and should be, blank (ie. they're not in any namespace)
|
||||
elem.setAttributeNS(attrNs.namespace || '', attrNs.shortName, val);
|
||||
}
|
||||
}
|
||||
|
||||
// Create and append this element's children
|
||||
const childElems = Array.prototype.slice.call(arguments, 2);
|
||||
childElems.forEach((childElem) => {
|
||||
if (childElem != null) {
|
||||
elem.appendChild(
|
||||
childElem instanceof doc.defaultView.Node ? childElem
|
||||
: Array.isArray(childElem) ? tag(...childElem)
|
||||
: doc.createTextNode(childElem),
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
return tag(...jsonTemplate);
|
||||
}
|
||||
@ -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)
|
||||
}
|
||||
|
||||
return resolve(value)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 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)
|
||||
if (themeMode) {
|
||||
document.querySelector('body').classList.add('theme-mode')
|
||||
}
|
||||
|
||||
return resolve()
|
||||
})
|
||||
}
|
||||
;[
|
||||
['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')
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const nodes = document.querySelectorAll('[data-i18n]')
|
||||
el.checked = !!(await getOption(option, defaultValue))
|
||||
|
||||
Array.prototype.forEach.call(nodes, (node) => {
|
||||
node.childNodes[0].nodeValue = browser.i18n.getMessage(node.dataset.i18n)
|
||||
el.addEventListener('click', async () => {
|
||||
await setOption(option, !!el.checked)
|
||||
})
|
||||
|
||||
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
|
||||
i18n()
|
||||
}
|
||||
}
|
||||
|
||||
el.addEventListener('change', (e) => setOption('themeMode', e.target.checked))
|
||||
})
|
||||
if (/complete|interactive|loaded/.test(document.readyState)) {
|
||||
Options.init()
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', Options.init)
|
||||
}
|
||||
|
||||
@ -1,335 +1,188 @@
|
||||
'use strict'
|
||||
/* eslint-env browser */
|
||||
/* global browser, jsonToDOM */
|
||||
/* globals chrome, Utils */
|
||||
|
||||
/** global: browser */
|
||||
/** global: jsonToDOM */
|
||||
const { agent, i18n, getOption, setOption, promisify } = Utils
|
||||
|
||||
let pinnedCategory = null
|
||||
let termsAccepted = false
|
||||
const Popup = {
|
||||
port: chrome.runtime.connect({ name: 'popup.js' }),
|
||||
|
||||
const port = browser.runtime.connect({
|
||||
name: 'popup.js'
|
||||
})
|
||||
|
||||
function slugify(string) {
|
||||
return string
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9-]/g, '-')
|
||||
.replace(/--+/g, '-')
|
||||
.replace(/(?:^-|-$)/, '')
|
||||
}
|
||||
async init() {
|
||||
// Templates
|
||||
Popup.templates = Array.from(
|
||||
document.querySelectorAll('[data-template]')
|
||||
).reduce((templates, template) => {
|
||||
templates[template.dataset.template] = template.cloneNode(true)
|
||||
|
||||
function i18n() {
|
||||
const nodes = document.querySelectorAll('[data-i18n]')
|
||||
template.remove()
|
||||
|
||||
Array.prototype.forEach.call(nodes, (node) => {
|
||||
node.innerHTML = browser.i18n.getMessage(node.dataset.i18n)
|
||||
})
|
||||
}
|
||||
return templates
|
||||
}, {})
|
||||
|
||||
function replaceDom(domTemplate) {
|
||||
const container = document.getElementsByClassName('container')[0]
|
||||
// Theme mode
|
||||
const themeMode = await getOption('themeMode', false)
|
||||
|
||||
while (container.firstChild) {
|
||||
container.removeChild(container.firstChild)
|
||||
if (themeMode) {
|
||||
document.querySelector('body').classList.add('theme-mode')
|
||||
}
|
||||
|
||||
container.appendChild(jsonToDOM(domTemplate, document, {}))
|
||||
// Terms
|
||||
const termsAccepted =
|
||||
agent === 'chrome' || (await getOption('termsAccepted', false))
|
||||
|
||||
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'
|
||||
if (termsAccepted) {
|
||||
document.querySelector('.terms').style.display = 'none'
|
||||
|
||||
pinnedCategory = null
|
||||
Popup.driver('getDetections')
|
||||
} else {
|
||||
const active = document.querySelector(
|
||||
'.detected__category-pin-wrapper--active'
|
||||
)
|
||||
document.querySelector('.detections').style.display = 'none'
|
||||
|
||||
if (active) {
|
||||
active.className = 'detected__category-pin-wrapper'
|
||||
i18n()
|
||||
}
|
||||
|
||||
pin.className =
|
||||
'detected__category-pin-wrapper detected__category-pin-wrapper--active'
|
||||
// Alert
|
||||
const [{ url }] = await promisify(chrome.tabs, 'query', {
|
||||
active: true,
|
||||
currentWindow: true
|
||||
})
|
||||
|
||||
pinnedCategory = categoryId
|
||||
}
|
||||
document.querySelector(
|
||||
'.alerts__link'
|
||||
).href = `https://www.wappalyzer.com/alerts/manage?url=${encodeURIComponent(
|
||||
`${url}`
|
||||
)}`
|
||||
|
||||
port.postMessage({
|
||||
id: 'set_option',
|
||||
key: 'pinnedCategory',
|
||||
value: pinnedCategory
|
||||
})
|
||||
})
|
||||
})
|
||||
document
|
||||
.querySelector('.footer__settings')
|
||||
.addEventListener('click', () => chrome.runtime.openOptionsPage())
|
||||
},
|
||||
|
||||
Array.from(document.querySelectorAll('a')).forEach((link) => {
|
||||
link.addEventListener('click', () => {
|
||||
browser.tabs.create({ url: link.href })
|
||||
driver(func, ...args) {
|
||||
Popup.port.postMessage({ func, args })
|
||||
},
|
||||
|
||||
return false
|
||||
})
|
||||
})
|
||||
}
|
||||
log(message) {
|
||||
Popup.driver('log', message, 'popup.js')
|
||||
},
|
||||
|
||||
function replaceDomWhenReady(dom) {
|
||||
if (/complete|interactive|loaded/.test(document.readyState)) {
|
||||
replaceDom(dom)
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
replaceDom(dom)
|
||||
})
|
||||
categorise(technologies) {
|
||||
return Object.values(
|
||||
technologies.reduce((categories, technology) => {
|
||||
technology.categories.forEach((category) => {
|
||||
categories[category.id] = categories[category.id] || {
|
||||
...category,
|
||||
technologies: []
|
||||
}
|
||||
}
|
||||
|
||||
function appsToDomTemplate(response) {
|
||||
let template = []
|
||||
categories[category.id].technologies.push(technology)
|
||||
})
|
||||
|
||||
if (response.tabCache && Object.keys(response.tabCache.detected).length > 0) {
|
||||
const categories = {}
|
||||
return categories
|
||||
}, {})
|
||||
)
|
||||
},
|
||||
|
||||
// Group apps by category
|
||||
for (const appName in response.tabCache.detected) {
|
||||
response.apps[appName].cats.forEach((cat) => {
|
||||
categories[cat] = categories[cat] || {
|
||||
name: response.categories[cat].name,
|
||||
apps: []
|
||||
}
|
||||
async onGetDetections(detections) {
|
||||
const pinnedCategory = await getOption('pinnedCategory')
|
||||
|
||||
categories[cat].apps[appName] = appName
|
||||
})
|
||||
if (detections.length) {
|
||||
document.querySelector('.empty').remove()
|
||||
}
|
||||
|
||||
for (const cat in categories) {
|
||||
const apps = []
|
||||
Popup.categorise(detections).forEach(
|
||||
({ id, name, slug: categorySlug, technologies }) => {
|
||||
const categoryNode = Popup.templates.category.cloneNode(true)
|
||||
|
||||
for (const appName in categories[cat].apps) {
|
||||
const { confidenceTotal, version } = response.tabCache.detected[appName]
|
||||
const link = categoryNode.querySelector('.category__link')
|
||||
|
||||
apps.push([
|
||||
'a',
|
||||
{
|
||||
class: 'detected__app',
|
||||
href: `https://www.wappalyzer.com/technologies/${slugify(
|
||||
categories[cat].name
|
||||
)}/${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,
|
||||
confidenceTotal < 100
|
||||
? [
|
||||
'span',
|
||||
{
|
||||
class: 'detected__app-confidence'
|
||||
},
|
||||
`${confidenceTotal}% sure`
|
||||
]
|
||||
: null
|
||||
])
|
||||
}
|
||||
link.href = `https://www.wappalyzer.com/technologies/${categorySlug}`
|
||||
link.textContent = name
|
||||
|
||||
template.push([
|
||||
'div',
|
||||
{
|
||||
class: 'detected__category'
|
||||
},
|
||||
[
|
||||
'div',
|
||||
{
|
||||
class: 'detected__category-name'
|
||||
},
|
||||
[
|
||||
'a',
|
||||
{
|
||||
class: 'detected__category-link',
|
||||
href: `https://www.wappalyzer.com/categories/${slugify(
|
||||
response.categories[cat].name
|
||||
)}`
|
||||
},
|
||||
browser.i18n.getMessage(`categoryName${cat}`)
|
||||
],
|
||||
[
|
||||
'span',
|
||||
{
|
||||
class: `detected__category-pin-wrapper${
|
||||
parseInt(pinnedCategory, 10) === parseInt(cat, 10)
|
||||
? ' 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
|
||||
]
|
||||
])
|
||||
const pins = categoryNode.querySelectorAll('.category__pin')
|
||||
|
||||
if (pinnedCategory === id) {
|
||||
pins.forEach((pin) => pin.classList.add('category__pin--active'))
|
||||
}
|
||||
|
||||
template = [
|
||||
'div',
|
||||
{
|
||||
class: 'detected'
|
||||
},
|
||||
template
|
||||
]
|
||||
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 {
|
||||
template = [
|
||||
'div',
|
||||
{
|
||||
class: 'empty'
|
||||
},
|
||||
[
|
||||
'span',
|
||||
{
|
||||
class: 'empty__text'
|
||||
},
|
||||
browser.i18n.getMessage('noAppsDetected')
|
||||
]
|
||||
]
|
||||
await setOption('pinnedCategory', id)
|
||||
|
||||
pins.forEach((pin) => pin.classList.add('category__pin--active'))
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
return template
|
||||
}
|
||||
technologies
|
||||
.filter(({ confidence }) => confidence)
|
||||
.forEach(({ name, slug, confidence, version, icon, website }) => {
|
||||
const technologyNode = Popup.templates.technology.cloneNode(true)
|
||||
|
||||
async function getApps() {
|
||||
try {
|
||||
const tabs = await browser.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true
|
||||
})
|
||||
const image = technologyNode.querySelector('.technology__icon')
|
||||
|
||||
const url = new URL(tabs[0].url)
|
||||
image.src = `../images/icons/${icon}`
|
||||
|
||||
document.querySelector(
|
||||
'.footer__link'
|
||||
).href = `https://www.wappalyzer.com/alerts/manage?url=${encodeURIComponent(
|
||||
`${url.protocol}//${url.hostname}`
|
||||
)}`
|
||||
const link = technologyNode.querySelector('.technology__link')
|
||||
|
||||
port.postMessage({
|
||||
id: 'get_apps',
|
||||
tab: tabs[0]
|
||||
})
|
||||
} catch (error) {
|
||||
console.error(error) // eslint-disable-line no-console
|
||||
}
|
||||
}
|
||||
link.href = `https://www.wappalyzer.com/technologies/${categorySlug}/${slug}`
|
||||
link.textContent = name
|
||||
|
||||
/**
|
||||
* Async function to update body class based on option.
|
||||
*/
|
||||
function getThemeMode() {
|
||||
try {
|
||||
port.postMessage({
|
||||
id: 'update_theme_mode'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error(error) // eslint-disable-line no-console
|
||||
}
|
||||
}
|
||||
const confidenceNode = technologyNode.querySelector(
|
||||
'.technology__confidence'
|
||||
)
|
||||
|
||||
/**
|
||||
* Update theme mode based on browser option.
|
||||
* @param {object} res Response from port listener.
|
||||
*/
|
||||
function updateThemeMode(res) {
|
||||
if (res.hasOwnProperty('themeMode') && res.themeMode !== false) {
|
||||
document.body.classList.add('theme-mode-sync')
|
||||
if (confidence < 100) {
|
||||
confidenceNode.textContent = `${confidence}% sure`
|
||||
} else {
|
||||
confidenceNode.remove()
|
||||
}
|
||||
}
|
||||
|
||||
function displayApps(response) {
|
||||
pinnedCategory = response.pinnedCategory // eslint-disable-line prefer-destructuring
|
||||
termsAccepted = response.termsAccepted // eslint-disable-line prefer-destructuring
|
||||
const versionNode = technologyNode.querySelector(
|
||||
'.technology__version'
|
||||
)
|
||||
|
||||
if (termsAccepted) {
|
||||
replaceDomWhenReady(appsToDomTemplate(response))
|
||||
if (version) {
|
||||
versionNode.textContent = version
|
||||
} else {
|
||||
i18n()
|
||||
|
||||
const wrapper = document.querySelector('.terms__wrapper')
|
||||
versionNode.remove()
|
||||
}
|
||||
|
||||
document.querySelector('.terms__accept').addEventListener('click', () => {
|
||||
port.postMessage({
|
||||
id: 'set_option',
|
||||
key: 'termsAccepted',
|
||||
value: true
|
||||
categoryNode
|
||||
.querySelector('.technologies')
|
||||
.appendChild(technologyNode)
|
||||
})
|
||||
|
||||
wrapper.classList.remove('terms__wrapper--active')
|
||||
document.querySelector('.detections').appendChild(categoryNode)
|
||||
}
|
||||
)
|
||||
|
||||
getApps()
|
||||
})
|
||||
Array.from(document.querySelectorAll('a')).forEach((a) =>
|
||||
a.addEventListener('click', () => Popup.driver('open', a.href))
|
||||
)
|
||||
|
||||
wrapper.classList.add('terms__wrapper--active')
|
||||
i18n()
|
||||
}
|
||||
}
|
||||
|
||||
port.onMessage.addListener((message) => {
|
||||
switch (message.id) {
|
||||
case 'get_apps':
|
||||
displayApps(message.response)
|
||||
Popup.port.onMessage.addListener(({ func, args }) => {
|
||||
const onFunc = `on${func.charAt(0).toUpperCase() + func.slice(1)}`
|
||||
|
||||
break
|
||||
case 'update_theme_mode':
|
||||
updateThemeMode(message.response)
|
||||
|
||||
break
|
||||
default:
|
||||
// Do nothing
|
||||
if (Popup[onFunc]) {
|
||||
Popup[onFunc](args)
|
||||
}
|
||||
})
|
||||
|
||||
getThemeMode()
|
||||
getApps()
|
||||
if (/complete|interactive|loaded/.test(document.readyState)) {
|
||||
Popup.init()
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', Popup.init)
|
||||
}
|
||||
|
||||
@ -0,0 +1,53 @@
|
||||
'use strict'
|
||||
/* eslint-env browser */
|
||||
/* globals chrome */
|
||||
|
||||
const Utils = {
|
||||
agent: chrome.extension.getURL('/').startsWith('moz-') ? 'firefox' : 'chrome',
|
||||
|
||||
promisify(context, method, ...args) {
|
||||
return new Promise((resolve, reject) => {
|
||||
context[method](...args, (...args) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
return reject(chrome.runtime.lastError)
|
||||
}
|
||||
|
||||
resolve(...args)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
open(url, active = true) {
|
||||
chrome.tabs.create({ url, active })
|
||||
},
|
||||
|
||||
async getOption(name, defaultValue = null) {
|
||||
try {
|
||||
const option = await Utils.promisify(chrome.storage.local, 'get', name)
|
||||
|
||||
if (option[name] !== undefined) {
|
||||
return option[name]
|
||||
}
|
||||
|
||||
return defaultValue
|
||||
} catch (error) {
|
||||
throw new Error(error.message || error.toString())
|
||||
}
|
||||
},
|
||||
|
||||
async setOption(name, value) {
|
||||
try {
|
||||
await Utils.promisify(chrome.storage.local, 'set', {
|
||||
[name]: value
|
||||
})
|
||||
} 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…
Reference in new issue