使用Wappalyzer 分析页面

一个谷歌插件

今天同事推荐了我一个谷歌插件 Wappalyzer,

Wappalyzer 是一款浏览器插件，通过 Wappalyzer 可以识别出网站采用了那种 web 技术。它能够检测出 CMS 和电子商务系统、留言板、javascript 框架，主机面板，分析统计工具和其它的一些 web 系统。The company behind Wappalyzer 还能够收集 web 程序的一些信息用于统计分析，揭示出各种 web 系统的使用率即增长情况。实际 Wappalyzer 就是一个指纹识别工具。

效果图如下

那这是什么原理呢？

然后我就很好奇这个插件是怎么实现的，于是我就想看这个插件的源码。

既然是一个 chrome 插件，那么就是安装在本地的

我们浏览器输入

chrome://version

会看到如下截图

2

其中我们可以看到个人资料路径，我们进入这个路径

扩展程序就在当前路径下面的 Extensions 文件夹中, 我们可以看到很多乱码一样的文件夹名称，其实这些就是谷歌插件的 id

3

于是我们回到谷歌浏览器中输入 [chrome://extensions/](chrome://extensions/)

我们就可以看到 ID：gppongmhjkpfnbhagpmjfkannfbllamg

4

再回到刚刚打开的文件夹中，找到对应 id 的文件夹拖入到开发工具中

5

通过 manifest.json 文件我们可以知道插件会在后台运行 html/background.html 这个文件

打开此文件发现这个文件只是引入了四个 js

<script src="../node_modules/webextension-polyfill/dist/browser-polyfill.js"></script>