9 | {Object.keys(apps).map(
10 | name =>
13 | );
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/resources/apps/lodash.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/helpers/appInfo.js:
--------------------------------------------------------------------------------
1 | export function retriveAppInfo(tabId, callback) {
2 | chrome.extension.sendMessage({ msg: "get", tab: tabId }, callback);
3 | };
4 |
5 | /**
6 | * Subscribe to app info
7 | */
8 | export function subscribeAppInfo(tabId, callback) {
9 | const connection = chrome.runtime.connect({
10 | name: `devtools-pane-${tabId}`
11 | });
12 |
13 | // just relay message
14 | connection.onMessage.addListener(response => callback(response));
15 |
16 | return connection;
17 | };
18 |
--------------------------------------------------------------------------------
/src/components/style.css:
--------------------------------------------------------------------------------
1 | body, table {
2 | font-size: 14px;
3 | }
4 |
5 | table {
6 | border-collapse: collapse;
7 | }
8 |
9 | img {
10 | display: inline-block;
11 | vertical-align: middle;
12 | }
13 |
14 | tr td, tr th {
15 | vertical-align: middle;
16 | text-align: left;
17 | border-bottom: 1px solid rgba(0, 0, 0, 0.1);
18 | padding: 6px 2px;
19 | }
20 |
21 | tr td * {
22 | vertical-align: middle;
23 | }
24 |
25 | tr:nth-child(even) td {
26 | background: #f9f9f9;
27 | }
28 |
29 | tr:last-child td {
30 | border-bottom: none;
31 | }
32 |
--------------------------------------------------------------------------------
/src/framework_pane.js:
--------------------------------------------------------------------------------
1 | import { debug, openTab } from './helpers/devtools';
2 | import { h, render } from 'preact';
3 | import App from './components/app';
4 | import { subscribeAppInfo } from './helpers/appInfo';
5 |
6 | // assign global h so preact can work easily
7 | window.h = h;
8 |
9 | // wait for load event
10 | window.onload = () => {
11 | const rootDom = document.getElementById('root');
12 | let root = render(
13 |
14 | 
15 |
16 |
17 | );
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Framework Inspector
2 |
3 | Detect web frameworks, libraries and tools run on browsing website.
4 |
5 | This is a chrome extension will help web developer to inspect web framework, CMS, Libraries and Tools running on current browsing website. An icon will appear on address bar indicates the detected technologies. Currently, this extension can detect more than 100 popular CMS and tools, and more will be added in future releases.
6 |
7 | This extension originally named ChromeSniffer / AppSpector.
8 |
9 | ## How to test this extension
10 |
11 | Run `npm run build` to build the extension. It will result the built extension under `build` folder. Then you can follow this [link](https://developer.chrome.com/extensions/getstarted#unpacked) to load unpacked extension.
12 |
13 | You can also use `npm run build:watch` to tell the build tool to automatically build when there is new change from the source.
14 |
--------------------------------------------------------------------------------
/src/components/app.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'preact';
2 | // import Grid from './grid';
3 | import Table from './table';
4 | import './style.css';
5 |
6 | export default class App extends Component {
7 | render(props, state) {
8 | const apps = props.apps;
9 | const numApps = apps ? Object.keys(apps).length : 0;
10 |
11 | if (apps === null || apps === undefined) {
12 | return (
13 |
14 | Analyzing ...
15 |
16 | );
17 | } else if (numApps === 0) {
18 | return (
19 |
20 | We are unable to detect any framework or tool on this site.
21 |
22 | );
23 | }
24 |
25 | return (
26 |
27 | We found {numApps > 1 ? `${numApps} frameworks or tools` : '1 framework or tool'} available on this site:
28 |
29 |
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/resources/apps/google.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/resources/extension/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Framework Inspector",
3 | "manifest_version": 2,
4 | "minimum_chrome_version": "10.0",
5 | "icons": {
6 | "48": "icon48.png",
7 | "128": "icon128.png"
8 | },
9 | "version": "0.0.1",
10 | "description": "Detect web applications and javascript libraries run on browsing website.",
11 | "background": {
12 | "page": "background.html"
13 | },
14 | "devtools_page": "devtools.html",
15 | "page_action": {
16 | "default_icon": "icon.png",
17 | "default_title": "Click for more details.",
18 | "default_popup": "popup.html"
19 | },
20 | "content_scripts": [
21 | {
22 | "matches": ["http://*/*","https://*/*"],
23 | "js": ["main.js"]
24 | }
25 | ],
26 | "permissions": [
27 | "tabs",
28 | "webRequest",
29 | "http://*/*",
30 | "https://*/*"
31 | ],
32 | "web_accessible_resources": [
33 | "detector.js"
34 | ]
35 | }
36 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Framework Inspector
3 | *
4 | * Detect apps run on current page and send back to background page.
5 | * Some part of this script was refered from Wappalyzer Firefox Addon.
6 | *
7 | * @author Bao Nguyen
23 |
24 |
25 |
36 |
37 | );
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var CopyWebpackPlugin = require('copy-webpack-plugin');
2 |
3 | module.exports = {
4 | entry: {
5 | main: "./src/main.js",
6 | detector: "./src/detector.js",
7 | background: "./src/background.js",
8 | popup: "./src/popup.js",
9 | devtools: "./src/devtools.js",
10 | framework_pane: "./src/framework_pane.js"
11 | },
12 | devtool: 'source-map',
13 | module: {
14 | loaders: [
15 | {
16 | test: /\.js$/,
17 | exclude: /node_modules/,
18 | loader: 'babel-loader'
19 | },
20 | {
21 | test: /\.(png|jpg|jpeg)$/,
22 | loader: 'file-loader'
23 | },
24 | {
25 | test: /\.css$/,
26 | loader: 'style-loader!css-loader'
27 | }
28 | ]
29 | },
30 | output: {
31 | filename: '[name].js',
32 | path: './build'
33 | },
34 | plugins: [
35 | new CopyWebpackPlugin([
36 | { from: './resources/*.png', to: './', flatten: true },
37 | { from: './resources/extension/**', to: './', flatten: true },
38 | { from: './resources/apps/**', to: './apps', flatten: true },
39 | ])
40 | ]
41 | };
42 |
--------------------------------------------------------------------------------
/src/detector/cssClass.js:
--------------------------------------------------------------------------------
1 | const rules = {
2 | 'Bootstrap': ['hero-unit', '.carousel-control', '[class^="icon-"]:last-child']
3 | };
4 |
5 | /**
6 | * Detect based on defined css classes
7 | */
8 | export default function detectByCssClass(doc, _apps) {
9 | for (let t in rules) {
10 | if (t in _apps) continue;
11 |
12 | let found = true;
13 | for (let css in rules[t]) {
14 | let act = false;
15 | const name = rules[t][css];
16 |
17 | /* Iterate through all registered css classes and check for presence */
18 | for (let cssFile in document.styleSheets) {
19 | for (let cssRule in document.styleSheets[cssFile].cssRules) {
20 | const style = document.styleSheets[cssFile].cssRules[cssRule];
21 |
22 | if (style && style.selectorText && style.selectorText.indexOf(name) !== -1) {
23 | act = true;
24 | break;
25 | }
26 | }
27 | if (act === true) break;
28 | }
29 |
30 | found = found & act;
31 | }
32 |
33 | if (found === true) {
34 | _apps[t] = -1;
35 | } else {
36 | break;
37 | }
38 | }
39 |
40 | return _apps;
41 | }
42 |
--------------------------------------------------------------------------------
/src/detector/header.js:
--------------------------------------------------------------------------------
1 | const knownHeaders = {
2 | 'x-powered-by': {
3 | // 'Ruby on Rails': /Phusion Passenger/,
4 | 'Express.js': /Express/,
5 | 'PHP': /PHP\/?(.*)/,
6 | 'Dinkly': /DINKLY\/?(.*)/,
7 | 'ASP.NET': /ASP\.NET/,
8 | 'Nette': /Nette Framework/
9 | },
10 | 'server': {
11 | 'Apache': /Apache\/?(.*)/,
12 | 'nginx': /nginx\/?(.*)/,
13 | 'IIS': /Microsoft-IIS\/?(.*)/
14 | },
15 | 'via': {
16 | 'Varnish': /(.*) varnish/
17 | }
18 | };
19 |
20 | // Scans through the headers finding matches, and returning the val from appinfo (apps.js)
21 | export default function detectByHeader(headers) {
22 | const appsFound = [];
23 |
24 | // loop through all the headers received
25 | for (var i = headers.length - 1; i >= 0; i--) {
26 | var apps = knownHeaders[headers[i].name.toLowerCase()];
27 | if (!apps) {
28 | continue;
29 | }
30 |
31 | for (var app in apps) {
32 | const matches = headers[i].value.match(apps[app]);
33 | if (matches) {
34 | const version = matches[1] || -1;
35 | appsFound[app] = version;
36 | }
37 | }
38 | }
39 |
40 | return appsFound;
41 | };
42 |
--------------------------------------------------------------------------------
/src/detector.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Framework Inspector
3 | *
4 | * Detect apps run on current page and send back to background page.
5 | * Some part of this script was refered from Wappalyzer Firefox Addon.
6 | *
7 | * @author Bao Nguyen | Name | 27 |Version | 28 |
|---|