Bookmarklet

main
ElbertF 13 years ago
parent f3166fbfe1
commit 10978b3218

@ -81,7 +81,7 @@ want to port Wappalyzer to a new platform.
**Bookmarklet** **Bookmarklet**
Work in progress. Beta version available for testing at [wappalyzer.com/bookmarklet](http://wappalyzer.com/bookmarklet).
Screenshot Screenshot

@ -1,68 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Wappalyzer</title>
<meta name="generator" content="WordPress"/>
<link rel="icon" type="image/png" href="images/icon.png"/>
<script type="text/javascript" src="js/lib/jquery.min.js"></script>
<style type="text/css">
body {
font-family: Verdana, Arial, sans-serif;
font-size: 50px;
}
#apps {
line-height: 20px;
}
#apps img {
vertical-align: middle;
}
</style>
</head>
<body>
<a href="javascript:
(function() {
var container = document.createElement('div');
container.setAttribute('id', 'wappalyzer-container');
var iframe = document.createElement('iframe');
iframe.setAttribute('id', 'wappalyzer');
iframe.setAttribute('allowTransparency', 'yes');
iframe.setAttribute('frameborder', 'no');
/*iframe.setAttribute('src', 'about:blank');*/
iframe.setAttribute('height', '300');
iframe.setAttribute('width', '220');
iframe.setAttribute('style', '
margin: 0 0 20px 20px;
position: absolute;
right: 20px;
top: 20px;
');
container.appendChild(iframe);
document.body.appendChild(container);
iframe.body.innerHTML = 'x';
var script1 = document.createElement('script');
var script2 = document.createElement('script');
var script3 = document.createElement('script');
script1.setAttribute('src', 'http://wappalyzer.com/bookmarklet/2/js/wappalyzer.js');
script2.setAttribute('src', 'http://wappalyzer.com/bookmarklet/2/js/apps.js');
script3.setAttribute('src', 'http://wappalyzer.com/bookmarklet/2/js/driver.js');
})();
void(0);
">Wappalyzer</a>
</body>
</html>

@ -1,73 +1,111 @@
html { div#wappalyzer-container * {
overflow: hidden; background-color: transparent !important;
border: none !important;
border-spacing: 0 !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
font-family: inherit !important;
font-style: inherit !important;
line-height: inherit !important;
list-style: none inside !important;
margin: 0 !important;
outline: none !important;
padding: 0 !important;
text-align: inherit !important;
text-decoration: none !important;
white-space: inherit !important;
} }
body { #wappalyzer-container {
color: #000; background: #fff !important;
font-family: Arial, sans-serif; border: 1px solid #999;
font-size: 13px; box-shadow: 0 0 10px rgba(0, 0, 0, .2) !important;
line-height: 1.5em; color: #333 !important;
margin: 0; font-family: Arial, sans-serif !important;
font-size: 14px !important;
line-height: 1.5em !important;
margin: 0 !important;
position: fixed !important;
text-align: left !important;
right: 20px !important;
top: 20px !important;
width: 250px !important;
z-index: 99999 !important;
} }
#overlay { #wappalyzer-container #wappalyzer-pending {
background: #000; background-repeat: no-repeat !important;
border-radius: 7px; background-position: center center !important;
-moz-border-radius: 7px; height: 60px !important;
-webkit-border-radius: 7px;
left: 0;
height: 100%;
opacity: .2; filter: alpha(opacity = 20);
position: absolute;
top: 0;
width: 100%;
}
#apps {
padding-top: 2px;
position: absolute;
width: 100%;
}
#apps img {
vertical-align: middle;
} }
#apps a { #wappalyzer-container a#wappalyzer-close:link,
color: #000; #wappalyzer-container a#wappalyzer-close:hover,
display: block; #wappalyzer-container a#wappalyzer-close:active,
text-decoration: none; #wappalyzer-container a#wappalyzer-close:visited {
background: #f8f8f8 !important;
border-bottom: 1px solid #ddd !important;
display: block !important;
font-weight: bold !important;
line-height: 30px !important;
text-align: center !important;
} }
#apps a:hover { #wappalyzer-container #wappalyzer-close:hover {
color: #0072B6; background: #f4f4f4 !important;
color: #0072B6 !important;
} }
#apps .app, #apps #close { #wappalyzer-container #wappalyzer-empty {
background: #fff; border-bottom: 1px solid #ddd !important;
border-radius: 5px; color: #999 !important;
-moz-border-radius: 5px; display: block !important;
-webkit-border-radius: 5px; line-height: 30px !important;
margin: 0 2px 2px 2px; text-align: center !important;
padding: 7px 10px;
} }
#apps .application { #wappalyzer-container #wappalyzer-apps {
margin-bottom: 3px; padding-top: 2px !important;
} }
#apps .category { #wappalyzer-container #wappalyzer-apps img {
color: #999; vertical-align: middle !important;
} }
#apps #close { #wappalyzer-container #wappalyzer-apps a:link,
font-size: 12px; #wappalyzer-container #wappalyzer-apps a:hover,
font-weight: bold; #wappalyzer-container #wappalyzer-apps a:active,
text-align: center; #wappalyzer-container #wappalyzer-apps a:visited {
text-transform: uppercase; color: #000 !important;
} display: block !important;
text-decoration: none !important;
}
#apps .close:hover { #wappalyzer-container #wappalyzer-apps a:hover {
background: #f4f4f4; color: #0072B6 !important;
color: #000; }
}
#wappalyzer-container #wappalyzer-apps div.wappalyzer-app {
background: #fff !important;
border-radius: 5px !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
margin: 0 2px 2px 2px !important;
padding: 7px 10px !important;
}
#wappalyzer-container #wappalyzer-apps a.wappalyzer-application:link,
#wappalyzer-container #wappalyzer-apps a.wappalyzer-application:hover,
#wappalyzer-container #wappalyzer-apps a.wappalyzer-application:active,
#wappalyzer-container #wappalyzer-apps a.wappalyzer-application:visited {
font-weight: bold !important;
margin-bottom: 3px !important;
}
#wappalyzer-container #wappalyzer-apps a.wappalyzer-category:link,
#wappalyzer-container #wappalyzer-apps a.wappalyzer-category:hover,
#wappalyzer-container #wappalyzer-apps a.wappalyzer-category:active,
#wappalyzer-container #wappalyzer-apps a.wappalyzer-category:visited {
color: #999 !important;
}

@ -1,11 +1,86 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="css/wappalyzer.css"/> <title>Wappalyzer</title>
<script type="text/javascript" src="js/lib/jquery.min.js"></script>
<style type="text/css">
body {
color: #333;
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
}
#bookmarklet {
background: #f8f8f8;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
font-weight: bold;
display: inline-block;
padding: 10px 25px;
text-decoration: none;
}
</style>
</head> </head>
<body> <body>
<div id="overlay"></div> <p>
Drag this button to your bookmarks toolbar:
</p>
<p>
<a id="bookmarklet" href="javascript: void(0);">Wappalyzer</a>
</p>
<p>
<em>Note: this is a beta version and may stop working at some point. Check back here for a new version if this happens.</em>
</p>
<div id="bookmarklet-code" style="display: none">
(function() {
var exists = window.document.getElementById('wappalyzer-container');
if ( exists !== null ) { window.document.body.removeChild(exists); }
var
url = 'http://wappalyzer.com/bookmarklet/',
d = window.document,
container = d.createElement('div'),
pending = d.createElement('div'),
style = d.createElement('link'),
script1 = d.createElement('script'),
script2 = d.createElement('script'),
script3 = d.createElement('script')
;
container.setAttribute('id', 'wappalyzer-container');
pending .setAttribute('id', 'wappalyzer-pending');
pending .setAttribute('style', 'background-image: url(' + url + 'images/pending.gif) !important');
style.setAttribute('rel', 'stylesheet');
style.setAttribute('href', url + 'css/wappalyzer.css');
script1.setAttribute('src', url + 'js/wappalyzer.js');
script2.setAttribute('src', url + 'js/apps.js');
script3.setAttribute('src', url + 'js/driver.js');
d.head.appendChild(style);
container.appendChild(pending);
container.appendChild(script1);
container.appendChild(script2);
container.appendChild(script3);
d.body.appendChild(container);
})();
</div>
<div id="apps"></div> <script>
$('#bookmarklet').attr('href', 'javascript:' + $('#bookmarklet-code').html().replace(/\s+/g, ' '));
</script>
</body> </body>
</html> </html>

@ -1,72 +1,158 @@
/**
* Bookmarklet driver
*/
(function() { (function() {
if ( wappalyzer == null ) return; if ( wappalyzer == null ) return;
var w = wappalyzer; var
w = wappalyzer,
debug = true
d = window.document,
container = d.getElementById('wappalyzer-container'),
domain = window.top.location.host,
url = window.top.location.href,
categoryNames = {
1: 'CMS',
2: 'Message Board',
3: 'Database Manager',
4: 'Documentation Tool',
5: 'Widget',
6: 'Web Shop',
7: 'Photo Gallery',
8: 'Wiki',
9: 'Hosting Panel',
10: 'Analytics',
11: 'Blog',
12: 'Javascript Framework',
13: 'Issue Tracker',
14: 'Video Player',
15: 'Comment System',
16: 'Captcha',
17: 'Font Script',
18: 'Web Framework',
19: 'Miscellaneous',
20: 'Editor',
21: 'LMS',
22: 'Web Server',
23: 'Cache Tool',
24: 'Rich Text Editor',
25: 'Javascript Graphics',
26: 'Mobile Framework',
27: 'Programming Language',
28: 'Operating System',
29: 'Search Engine'
}
;
w.driver = { w.driver = {
/** /**
* Log messages to console * Log messages to console
*/ */
log: function(args) { log: function(args) {
if ( console != null ) console[args.type](args.message); if ( debug && console != null && console[args.type] != null ) {
console[args.type](args.message);
}
}, },
/** /**
* Initialize * Initialize
*/ */
init: function() { init: function() {
w.driver.getEnvironmentVars();
w.driver.getResponseHeaders();
},
getEnvironmentVars: function() {
w.log('func: getEnvironmentVars');
var env = new Array; var env = new Array;
for ( i in window ) env.push(i); for ( i in window ) { env.push(i); }
window.document.addEventListener('DOMContentLoaded', function() { w.analyze(domain, url, {
w.analyze(top.location.host, top.location.href, { html: d.documentElement.innerHTML,
html: top.document.documentElement.innerHTML, env: env
env: env
}); });
}); },
getResponseHeaders: function() {
w.log('func: getResponseHeaders');
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if ( xhr.readyState === 4 && xhr.status ) {
var headers = xhr.getAllResponseHeaders().split("\n");
if ( headers.length > 0 && headers[0] != '' ) {
w.log('responseHeaders: ' + xhr.getAllResponseHeaders());
var responseHeaders = {};
headers.forEach(function(line) {
if ( line ) {
name = line.substring(0, line.indexOf(': '));
value = line.substring(line.indexOf(': ') + 2, line.length - 1);
responseHeaders[name] = value;
}
});
w.analyze(domain, url, {
headers: responseHeaders
});
}
}
}
xhr.send();
}, },
/** /**
* Display apps * Display apps
*/ */
displayApps: function() { displayApps: function() {
var url = top.location.href; var
category,
html
;
document.getElementById('wappalyzer-iframe').contentDocument.body.innerHTML = html =
'<a id="close" href="javascript: document.removeChild(document.getElementById(\'wappalyzer-container\')); void(0);">' + '<a id="wappalyzer-close" href="javascript: window.document.body.removeChild(window.document.getElementById(\'wappalyzer-container\')); void(0);">' +
'Close' + 'Close' +
'</a>' '</a>' +
'<div id="wappalyzer-apps">'
; ;
if ( w.detected[url] != null && w.detected[url].length ) { if ( false && w.detected[url] != null && w.detected[url].length ) {
w.detected[url].map(function(app, i) { w.detected[url].map(function(app, i) {
var html = html +=
'<div class="app' + ( i == 0 ? ' first' : '' ) + '">' + '<div class="wappalyzer-app' + ( !i ? ' wappalyzer-first' : '' ) + '">' +
'<a target="_blank" class="application" href="' + w.config.websiteURL + 'applications/' + app.toLowerCase().replace(/ /g, '-').replace(/[^a-z0-9-]/g, '') + '">' + '<a target="_blank" class="wappalyzer-application" href="' + w.config.websiteURL + 'applications/' + app.toLowerCase().replace(/ /g, '-').replace(/[^a-z0-9-]/g, '') + '">' +
'<strong>' + '<strong>' +
'<img src="images/icons/' + app + '.png" width="16" height="16"/> ' + app + '<img src="' + w.config.websiteURL + 'bookmarklet/images/icons/' + app + '.png" width="16" height="16"/> ' + app +
'</strong>' + '</strong>' +
'</a>' '</a>'
; ;
for ( cat in w.apps[app].cats ) { for ( cat in w.apps[app].cats ) {
html += category = w.apps[app].cats[cat];
'<a target="_blank" class="category" href="' + w.config.websiteURL + 'categories/' + w.categories[w.apps[app].cats[cat]].plural.toLowerCase().replace(/ /g, '-').replace(/[^a-z0-9-]/g, '') + '">' +
w.categories[w.apps[app].cats[cat]].name + html += '<a target="_blank" class="wappalyzer-category" href="' + w.config.websiteURL + 'categories/' + w.categories[category] + '">' + categoryNames[category] + '</a>';
'</a>'
;
} }
html += '</div>'; html += '</div>';
}); });
} else { } else {
html = '<div class="app first" style="text-align: center;"><em>No applications detected</em></div>'; html += '<div id="wappalyzer-empty">No applications detected</div>';
} }
document.getElementById('wappalyzer-iframe').contentDocument.body.innerHTML += html; html += '</div>';
document.getElementById('wappalyzer-iframe').style.height = 300; container.innerHTML = html;
}, },
/** /**

@ -11,7 +11,7 @@
"default_title": "Wappalyzer - click for details", "default_title": "Wappalyzer - click for details",
"default_popup": "popup.html" "default_popup": "popup.html"
}, },
"background": {"page": "bg.html"}, "background_page": "bg.html",
"content_scripts": [{ "content_scripts": [{
"matches": [ "http://*/*", "https://*/*" ], "matches": [ "http://*/*", "https://*/*" ],
"js": [ "js/content.js" ], "js": [ "js/content.js" ],