前言
最近有一个需求需要做一款能够应用于登录页面，自动记录并且填充的这样的一个插件。使用以后妈妈再也不用担心我记住密码了。
疑问
实现前有几个大疑问,
- 如何收集用户的信息，收集的保障
- 信息保证安全性？只发送加密后的内容
实现
通过dom遍历相关的节点，text ,password。把这些属性都保存起来，储存其中的关键属性如id还有name字。这就是一次简单的收集。然后要把他们转换为对象。怎么转就是下面一段简单的东西。
<code>function createObj(obj, lists) {
let countUnName = 0;
for (let i = 0; i if (getComputedStyle(lists[i]).display === "none" || getComputedStyle(lists[i]).visibility === "hidden" || lists[i].clientWidth ===
0 || lists[i].value === "") {
continue;
}
const content = {
value: lists[i].value,
name: lists[i].name,
id: lists[i].id,
}
if (lists[i].name) {
if (obj[lists[i].name]) {
obj[lists[i].name + "[1]"] = content;
} else {
obj[lists[i].name] = content;
}
} else {
obj["unname" + countUnName] = content;
countUnName++;
}
}
}
/<code>按照name去收集他的属性（name，id，value），如果遇到重名的（网页代码name重名)那么就在其后面加上后缀。值得注意的是，我这里忽略一些隐藏的或者说是用户不会去接触到的元素没有去收集他。
然后通过收集的这段信息，转换为字符串，然后进行加密。我这里运用的aes加密。由于有长度限制，所以把字符串每段分割开来，假设代码是这样的（这里假设长度为26）。
<code>/**
* @param {String} pt
* @return {[]}
*/
function aesPassword(pt) {
const room = [];
let s = 0;
while (1) {
const temp = pt.slice(s, s + 26);
if (temp === "") {
break;
}
room.push(加密以后的东西);
s += 26;
}
return room;
}
/<code>
这样返回的对象是这样的
这样就变成一段数组，下次匹配这个数据再还原也可以了。
总结
通过这些如上这些操作我们已经可以获得和传递相关数据，当然光靠这些是无法完成填鸭应用的。后面的东西，让我们下次再说。
给你代码｜往期回顾：
分享到:
閱讀更多 鯤圭雲計算 的文章
