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>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
<title data-i18n="options">Wappalyzer options</title>
|
<title data-i18n="options"></title>
|
||||||
|
|
||||||
<link rel="icon" href="../images/icon_32.png">
|
|
||||||
|
|
||||||
<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/wappalyzer.js"></script>
|
|
||||||
<script src="../js/options.js"></script>
|
<script src="../js/options.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="hero">
|
<div class="options">
|
||||||
<div class="container">
|
<label class="options__label">
|
||||||
<img src="../images/logo-white.svg">
|
<input class="options__checkbox" type="checkbox">
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<div class="container">
|
|
||||||
<h1 data-i18n="options">Options</h1>
|
|
||||||
|
|
||||||
<p>
|
<span data-i18n="optionUpgradeMessage"> </span>
|
||||||
<label for="option-upgrade-message">
|
|
||||||
<input id="option-upgrade-message" type="checkbox">
|
|
||||||
<span data-i18n="optionUpgradeMessage">Tell me about upgrades</span>
|
|
||||||
</label>
|
</label>
|
||||||
<label for="option-dynamic-icon">
|
|
||||||
<input id="option-dynamic-icon" type="checkbox">
|
<label class="options__label">
|
||||||
<span data-i18n="optionDynamicIcon">Use application icon instead of Wappalyzer logo</span>
|
<input class="options__checkbox" type="checkbox">
|
||||||
</label>
|
|
||||||
<label for="option-tracking">
|
<span data-i18n="optionDynamicIcon"> </span>
|
||||||
<input id="option-tracking" type="checkbox">
|
|
||||||
<span data-i18n="optionTracking">Anonymously send reports on detected applications to wappalyzer.com for research</span>
|
|
||||||
</label>
|
</label>
|
||||||
<label for="option-theme-mode">
|
|
||||||
<input id="option-theme-mode" type="checkbox">
|
<label class="options__label">
|
||||||
<span data-i18n="optionThemeMode">Enable dark mode compatibility</span>
|
<input class="options__checkbox" type="checkbox">
|
||||||
|
|
||||||
|
<span data-i18n="optionTracking"> </span>
|
||||||
</label>
|
</label>
|
||||||
</p>
|
|
||||||
|
|
||||||
<div id="about">
|
<label class="options__label">
|
||||||
<p>
|
<input class="options__checkbox" type="checkbox">
|
||||||
<button id="github">
|
|
||||||
<img src="../images/github.png" width="16" height="16" alt="GitHub icon" />
|
<span data-i18n="optionThemeMode"> </span>
|
||||||
<span data-i18n="github">Fork Wappalyzer on GitHub!</span>
|
</label>
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,38 +1,80 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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/utils.js"></script>
|
||||||
<script src="../js/lib/jsontodom.js"></script>
|
|
||||||
<script src="../js/popup.js"></script>
|
<script src="../js/popup.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<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--light" src="../images/logo-purple.svg">
|
||||||
<img alt="" class="header__logo header__logo--dark" src="../images/logo-white.svg">
|
<img alt="" class="header__logo header__logo--dark" src="../images/logo-white.svg">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="terms__wrapper">
|
|
||||||
<div class="terms">
|
<div class="terms">
|
||||||
<div class="terms__content" data-i18n="termsContent"></div>
|
<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>
|
<a class="terms__privacy" href="https://www.wappalyzer.com/privacy" data-i18n="privacyPolicy"></a>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<div class="footer">
|
<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>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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 */
|
'use strict'
|
||||||
/** global: Wappalyzer */
|
|
||||||
/* globals browser Wappalyzer */
|
|
||||||
/* eslint-env browser */
|
/* eslint-env browser */
|
||||||
|
/* globals Utils */
|
||||||
|
|
||||||
const wappalyzer = new Wappalyzer()
|
const { i18n, getOption, setOption } = Utils
|
||||||
|
|
||||||
/**
|
const Options = {
|
||||||
* Get a value from localStorage
|
async init() {
|
||||||
*/
|
// Theme mode
|
||||||
function getOption(name, defaultValue = null) {
|
const themeMode = await getOption('themeMode', false)
|
||||||
return new Promise(async (resolve, reject) => {
|
|
||||||
let value = defaultValue
|
|
||||||
|
|
||||||
try {
|
if (themeMode) {
|
||||||
const option = await browser.storage.local.get(name)
|
document.querySelector('body').classList.add('theme-mode')
|
||||||
|
|
||||||
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
|
['upgradeMessage', true],
|
||||||
*/
|
['dynamicIcon', true],
|
||||||
function setOption(name, value) {
|
['tracking', true],
|
||||||
return new Promise(async (resolve, reject) => {
|
['themeMode', false]
|
||||||
try {
|
].map(async ([option, defaultValue]) => {
|
||||||
await browser.storage.local.set({ [name]: value })
|
const el = document
|
||||||
} catch (error) {
|
.querySelector(
|
||||||
wappalyzer.log(error.message, 'driver', 'error')
|
`[data-i18n="option${option.charAt(0).toUpperCase() +
|
||||||
|
option.slice(1)}"]`
|
||||||
return reject(error.message)
|
)
|
||||||
}
|
.parentNode.querySelector('input')
|
||||||
|
|
||||||
return resolve()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', async () => {
|
el.checked = !!(await getOption(option, defaultValue))
|
||||||
const nodes = document.querySelectorAll('[data-i18n]')
|
|
||||||
|
|
||||||
Array.prototype.forEach.call(nodes, (node) => {
|
el.addEventListener('click', async () => {
|
||||||
node.childNodes[0].nodeValue = browser.i18n.getMessage(node.dataset.i18n)
|
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', () => {
|
i18n()
|
||||||
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))
|
if (/complete|interactive|loaded/.test(document.readyState)) {
|
||||||
})
|
Options.init()
|
||||||
|
} else {
|
||||||
|
document.addEventListener('DOMContentLoaded', Options.init)
|
||||||
|
}
|
||||||
|
|||||||
@ -1,335 +1,188 @@
|
|||||||
|
'use strict'
|
||||||
/* eslint-env browser */
|
/* eslint-env browser */
|
||||||
/* global browser, jsonToDOM */
|
/* globals chrome, Utils */
|
||||||
|
|
||||||
/** global: browser */
|
const { agent, i18n, getOption, setOption, promisify } = Utils
|
||||||
/** global: jsonToDOM */
|
|
||||||
|
|
||||||
let pinnedCategory = null
|
const Popup = {
|
||||||
let termsAccepted = false
|
port: chrome.runtime.connect({ name: 'popup.js' }),
|
||||||
|
|
||||||
const port = browser.runtime.connect({
|
async init() {
|
||||||
name: 'popup.js'
|
// Templates
|
||||||
})
|
Popup.templates = Array.from(
|
||||||
|
document.querySelectorAll('[data-template]')
|
||||||
function slugify(string) {
|
).reduce((templates, template) => {
|
||||||
return string
|
templates[template.dataset.template] = template.cloneNode(true)
|
||||||
.toLowerCase()
|
|
||||||
.replace(/[^a-z0-9-]/g, '-')
|
|
||||||
.replace(/--+/g, '-')
|
|
||||||
.replace(/(?:^-|-$)/, '')
|
|
||||||
}
|
|
||||||
|
|
||||||
function i18n() {
|
template.remove()
|
||||||
const nodes = document.querySelectorAll('[data-i18n]')
|
|
||||||
|
|
||||||
Array.prototype.forEach.call(nodes, (node) => {
|
return templates
|
||||||
node.innerHTML = browser.i18n.getMessage(node.dataset.i18n)
|
}, {})
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function replaceDom(domTemplate) {
|
// Theme mode
|
||||||
const container = document.getElementsByClassName('container')[0]
|
const themeMode = await getOption('themeMode', false)
|
||||||
|
|
||||||
while (container.firstChild) {
|
if (themeMode) {
|
||||||
container.removeChild(container.firstChild)
|
document.querySelector('body').classList.add('theme-mode')
|
||||||
}
|
}
|
||||||
|
|
||||||
container.appendChild(jsonToDOM(domTemplate, document, {}))
|
// Terms
|
||||||
|
const termsAccepted =
|
||||||
i18n()
|
agent === 'chrome' || (await getOption('termsAccepted', false))
|
||||||
|
|
||||||
Array.from(
|
|
||||||
document.querySelectorAll('.detected__category-pin-wrapper')
|
|
||||||
).forEach((pin) => {
|
|
||||||
pin.addEventListener('click', () => {
|
|
||||||
const categoryId = parseInt(pin.dataset.categoryId, 10)
|
|
||||||
|
|
||||||
if (categoryId === pinnedCategory) {
|
if (termsAccepted) {
|
||||||
pin.className = 'detected__category-pin-wrapper'
|
document.querySelector('.terms').style.display = 'none'
|
||||||
|
|
||||||
pinnedCategory = null
|
Popup.driver('getDetections')
|
||||||
} else {
|
} else {
|
||||||
const active = document.querySelector(
|
document.querySelector('.detections').style.display = 'none'
|
||||||
'.detected__category-pin-wrapper--active'
|
|
||||||
)
|
|
||||||
|
|
||||||
if (active) {
|
i18n()
|
||||||
active.className = 'detected__category-pin-wrapper'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pin.className =
|
// Alert
|
||||||
'detected__category-pin-wrapper detected__category-pin-wrapper--active'
|
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({
|
document
|
||||||
id: 'set_option',
|
.querySelector('.footer__settings')
|
||||||
key: 'pinnedCategory',
|
.addEventListener('click', () => chrome.runtime.openOptionsPage())
|
||||||
value: pinnedCategory
|
},
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
Array.from(document.querySelectorAll('a')).forEach((link) => {
|
driver(func, ...args) {
|
||||||
link.addEventListener('click', () => {
|
Popup.port.postMessage({ func, args })
|
||||||
browser.tabs.create({ url: link.href })
|
},
|
||||||
|
|
||||||
return false
|
log(message) {
|
||||||
})
|
Popup.driver('log', message, 'popup.js')
|
||||||
})
|
},
|
||||||
|
|
||||||
|
categorise(technologies) {
|
||||||
|
return Object.values(
|
||||||
|
technologies.reduce((categories, technology) => {
|
||||||
|
technology.categories.forEach((category) => {
|
||||||
|
categories[category.id] = categories[category.id] || {
|
||||||
|
...category,
|
||||||
|
technologies: []
|
||||||
}
|
}
|
||||||
|
|
||||||
function replaceDomWhenReady(dom) {
|
categories[category.id].technologies.push(technology)
|
||||||
if (/complete|interactive|loaded/.test(document.readyState)) {
|
|
||||||
replaceDom(dom)
|
|
||||||
} else {
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
replaceDom(dom)
|
|
||||||
})
|
})
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function appsToDomTemplate(response) {
|
return categories
|
||||||
let template = []
|
}, {})
|
||||||
|
)
|
||||||
|
},
|
||||||
|
|
||||||
if (response.tabCache && Object.keys(response.tabCache.detected).length > 0) {
|
async onGetDetections(detections) {
|
||||||
const categories = {}
|
const pinnedCategory = await getOption('pinnedCategory')
|
||||||
|
|
||||||
// Group apps by category
|
if (detections.length) {
|
||||||
for (const appName in response.tabCache.detected) {
|
document.querySelector('.empty').remove()
|
||||||
response.apps[appName].cats.forEach((cat) => {
|
|
||||||
categories[cat] = categories[cat] || {
|
|
||||||
name: response.categories[cat].name,
|
|
||||||
apps: []
|
|
||||||
}
|
}
|
||||||
|
|
||||||
categories[cat].apps[appName] = appName
|
Popup.categorise(detections).forEach(
|
||||||
})
|
({ id, name, slug: categorySlug, technologies }) => {
|
||||||
}
|
const categoryNode = Popup.templates.category.cloneNode(true)
|
||||||
|
|
||||||
for (const cat in categories) {
|
const link = categoryNode.querySelector('.category__link')
|
||||||
const apps = []
|
|
||||||
|
|
||||||
for (const appName in categories[cat].apps) {
|
link.href = `https://www.wappalyzer.com/technologies/${categorySlug}`
|
||||||
const { confidenceTotal, version } = response.tabCache.detected[appName]
|
link.textContent = name
|
||||||
|
|
||||||
apps.push([
|
const pins = categoryNode.querySelectorAll('.category__pin')
|
||||||
'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
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
template.push([
|
if (pinnedCategory === id) {
|
||||||
'div',
|
pins.forEach((pin) => pin.classList.add('category__pin--active'))
|
||||||
{
|
|
||||||
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
|
|
||||||
]
|
|
||||||
])
|
|
||||||
}
|
}
|
||||||
|
|
||||||
template = [
|
pins.forEach((pin) =>
|
||||||
'div',
|
pin.addEventListener('click', async () => {
|
||||||
{
|
const pinnedCategory = await getOption('pinnedCategory')
|
||||||
class: 'detected'
|
|
||||||
},
|
Array.from(
|
||||||
template
|
document.querySelectorAll('.category__pin--active')
|
||||||
]
|
).forEach((pin) => pin.classList.remove('category__pin--active'))
|
||||||
|
|
||||||
|
if (pinnedCategory === id) {
|
||||||
|
await setOption('pinnedCategory', null)
|
||||||
} else {
|
} else {
|
||||||
template = [
|
await setOption('pinnedCategory', id)
|
||||||
'div',
|
|
||||||
{
|
|
||||||
class: 'empty'
|
|
||||||
},
|
|
||||||
[
|
|
||||||
'span',
|
|
||||||
{
|
|
||||||
class: 'empty__text'
|
|
||||||
},
|
|
||||||
browser.i18n.getMessage('noAppsDetected')
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
return template
|
pins.forEach((pin) => pin.classList.add('category__pin--active'))
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getApps() {
|
|
||||||
try {
|
|
||||||
const tabs = await browser.tabs.query({
|
|
||||||
active: true,
|
|
||||||
currentWindow: true
|
|
||||||
})
|
})
|
||||||
|
)
|
||||||
|
|
||||||
const url = new URL(tabs[0].url)
|
technologies
|
||||||
|
.filter(({ confidence }) => confidence)
|
||||||
|
.forEach(({ name, slug, confidence, version, icon, website }) => {
|
||||||
|
const technologyNode = Popup.templates.technology.cloneNode(true)
|
||||||
|
|
||||||
document.querySelector(
|
const image = technologyNode.querySelector('.technology__icon')
|
||||||
'.footer__link'
|
|
||||||
).href = `https://www.wappalyzer.com/alerts/manage?url=${encodeURIComponent(
|
|
||||||
`${url.protocol}//${url.hostname}`
|
|
||||||
)}`
|
|
||||||
|
|
||||||
port.postMessage({
|
image.src = `../images/icons/${icon}`
|
||||||
id: 'get_apps',
|
|
||||||
tab: tabs[0]
|
|
||||||
})
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error) // eslint-disable-line no-console
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
const link = technologyNode.querySelector('.technology__link')
|
||||||
* 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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
link.href = `https://www.wappalyzer.com/technologies/${categorySlug}/${slug}`
|
||||||
* Update theme mode based on browser option.
|
link.textContent = name
|
||||||
* @param {object} res Response from port listener.
|
|
||||||
*/
|
|
||||||
function updateThemeMode(res) {
|
|
||||||
if (res.hasOwnProperty('themeMode') && res.themeMode !== false) {
|
|
||||||
document.body.classList.add('theme-mode-sync')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function displayApps(response) {
|
const confidenceNode = technologyNode.querySelector(
|
||||||
pinnedCategory = response.pinnedCategory // eslint-disable-line prefer-destructuring
|
'.technology__confidence'
|
||||||
termsAccepted = response.termsAccepted // eslint-disable-line prefer-destructuring
|
)
|
||||||
|
|
||||||
if (termsAccepted) {
|
if (confidence < 100) {
|
||||||
replaceDomWhenReady(appsToDomTemplate(response))
|
confidenceNode.textContent = `${confidence}% sure`
|
||||||
} else {
|
} else {
|
||||||
i18n()
|
confidenceNode.remove()
|
||||||
|
}
|
||||||
|
|
||||||
|
const versionNode = technologyNode.querySelector(
|
||||||
|
'.technology__version'
|
||||||
|
)
|
||||||
|
|
||||||
const wrapper = document.querySelector('.terms__wrapper')
|
if (version) {
|
||||||
|
versionNode.textContent = version
|
||||||
|
} else {
|
||||||
|
versionNode.remove()
|
||||||
|
}
|
||||||
|
|
||||||
document.querySelector('.terms__accept').addEventListener('click', () => {
|
categoryNode
|
||||||
port.postMessage({
|
.querySelector('.technologies')
|
||||||
id: 'set_option',
|
.appendChild(technologyNode)
|
||||||
key: 'termsAccepted',
|
|
||||||
value: true
|
|
||||||
})
|
})
|
||||||
|
|
||||||
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) => {
|
Popup.port.onMessage.addListener(({ func, args }) => {
|
||||||
switch (message.id) {
|
const onFunc = `on${func.charAt(0).toUpperCase() + func.slice(1)}`
|
||||||
case 'get_apps':
|
|
||||||
displayApps(message.response)
|
|
||||||
|
|
||||||
break
|
|
||||||
case 'update_theme_mode':
|
|
||||||
updateThemeMode(message.response)
|
|
||||||
|
|
||||||
break
|
if (Popup[onFunc]) {
|
||||||
default:
|
Popup[onFunc](args)
|
||||||
// Do nothing
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
getThemeMode()
|
if (/complete|interactive|loaded/.test(document.readyState)) {
|
||||||
getApps()
|
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