前言

最近有一个需求需要做一款能够应用于登录页面，自动记录并且填充的这样的一个插件。使用以后妈妈再也不用担心我记住密码了。这是记之前那篇的后续。

问题显示当前地址所需要的信息当用户进行登录以后如何弹出信息是否弹出信息的匹配实现

1. 由于插件机制有个background是一直运行在浏览器中，运用其中的方法来监听页面。根据页面变化向content发起信息，让他把页面里的iframe和本网址都发送到bakcground再进行处理。

//background.jschrome.tabs.onActivated.addListener(function (activeInfo) {      sendInfo("requestUrl");  //sendinfo是对内容脚本发起信息，让他网址发给background})​//cotent.jsfunction getIframes() {    if (top === self) {            const iframes = document.querySelectorAll("iframe");        const urls = [location.host];        for (let i = 0; i < iframes.length; i++) {            urls.push(iframes[i].src);        }        sendInfo("urls", urls);     //sendInfo是对background发信息。    }}//backgound.jschrome.runtime.onMessage.addListener((request, sender, callback) => {    if (//判断是否是urls请求) {        //直接拿到收到的信息。    }}

2. 对于一般的网址，登录实际是一个页面跳转的过程利用backgroud里面的监听页面刷新变化来进行提示弹窗信息。如果页面状态为complete就发起数据传输和拉起iframe。

//background.js//msg为之前触发点击事件收到的信息chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {    if (!msg) {        //没有就返回。        return;    }    if (tab.status === "complete") {                     (async function () {            await setStorage("data", msg);                     msg = null;            await sendInfo("showIframe");         //对content.js发信息让他显示iframe        })()        //封装2个promise由于存储是异步操作，必须等他操作完才能进行showIframe    }})//content.js function showIframe() {    if (top === self) {        iframe.src = chrome.extension.getURL('/') + "save.html";        iframe.style.cssText =            `				position: fixed;				top: 20px;				right: 100px;								border: 0;				width: 400px;				height: 200px;			`;        document.body.append(div);    }}//save.html拿到存储的信息就可以进行操作。

3.当出现弹窗的时候，有时候实际是是不需要的，比如用户输入的在信息里匹配数据一样的账户和密码。那么这里就需要判断一下了。由于信息是加密的，所以需要解密一下了。解密以后根据当前的字符串进行匹配就可以了。

//按照之前代码已经拉起了弹窗的iframe，要在这里面进行判断。chrome.storage.local.get(null, function (item) {    const data = item.data; //拿到data数据    //xhr 发起请求             xhr()                    .then(data => {                        for (let element of data) {                            const encrypt = element.encrypt;                            const parse = JSON.parse(encrypt);                            const room = aesDecode(parse).join(''); //解密方法                            if (room === JSON.stringify(data.content)) {                                sendInfo("hideIframe");                                break;                            }                        }                    })   //aesDecode/** * @param {Array<String>} encrypt * @return {[]} */function aesDecode(encrypt) {    //256    const room = [];    encrypt.forEach(ele => {        room.push(CryptoJS.AES.decrypt(ele, key).toString(CryptoJS.enc.Utf8));    })    return room;}            

通过这几次介绍已经可以完成很多功能了。填鸭工具可以帮助你记住你复杂的密码，帮助大家不用再点击找回密码了！！！！！！！

给你代码｜往期回顾：

给你代码：短链接生成原理

给你代码：网站图标favicon自动抓取

给你代码：chrome插件心得