哈哈网本帖最后由 mitjavaz 于 2021-4-2 16:53 编辑
这是一款一键分析网站技术栈分析网站,快速了解网站的技术细节的浏览器插件。
名称：whatruns
官网：官网
安装过程：
1、去谷歌商店或者其他地方进行正常的安装。
2、通过插件的ID找到插件的安装所在目录。
3、将插件的安装文件夹拷贝到独立的某个地方，并通过浏览器的开发者模式，将文件夹拖拽进入安装。
注：因为网上有大量安装教程，此处只做几句简短的介绍。
软件分析过程：
当我们点击插件，插件会根据当前地址栏链接获取到网站的URL，然后进行分析，得出该网站的一个技术栈相关的大致情况。如下图：
但是，我们会发现，有一些英文，对于像我这样英文水平不好的人而言，这是一件十分不友好的事情。
因此，汉化势在必行了。（为了这个去较真学英文，那是不可能的，直接汉化会更香）
根据传统的汉化操作，我们是可以通过全局搜索的方式，在插件的整个项目中找出语言包的。但是，这款软件找不到。接下来，就是分析的开始。
首先，我们对插件运行的弹出窗进行右键的检查操作，这时候，我们可以得到这个插件的弹出窗大概的一个html结构。
通过对html的目录结构进行分析，我们可以得到这样的一个代码：
<div id="even" class="even">...</div><div id="odd" class="odd">...</div>
这两段代码，代表着内容被分别划入到了左右两个模块内，even为左，odd为右。
此时，我们根据标签id唯一性的特点，通过开发工具（我使用的是Vscode）找出了操作这两个标签的js代码，操作代码是被写进了popup_final.js内。
var evenEl = $('#even'); var oddEl = $('#odd');
在popup_final.js中，我们找到了上面的两句代码，根据项目的技术栈以及代码的语法特点，我们可以得出，这是一个通过jQuery库进行dom元素操作，通过id的方式，将even和odd两个div标签元素对象锁定，并传入到了evenEl和oddEl。
这时候，我们搜索evenEl，找到了对evenEl进行的后续dom操作。
在上图中，我们看到了这样的一段代码：
self.appendAppDiv(el, categoryName, apps[categoryName], categoryClass);
appendAppDiv是一个自定义的方法，主要功能是为元素添加子元素内容。
根据其参数的特点，我们在第二个参数，也就是categoryName确定了汉化的方向。
最后，改写如下：
// 创建一个自定义的mykey数组 var mykey = [{ 'Message Board': 'Mitjavaz:留言板', 'Javascript Graphics': 'Mitjavaz:Javascript图形' }]; // 通过三目运算做赋值替换 self.appendAppDiv(el, mykey[0][categoryName] ? mykey[0][categoryName] : categoryName, apps[categoryName], categoryClass);
最终效果如下：
第一次发文，写得不好，还望各位大大们见谅！
