媽媽再也不用擔心我記不住密碼了：鯤圭填鴨｜給你代碼

前言

最近有一個需求需要做一款能夠應用於登錄頁面，自動記錄並且填充的這樣的一個插件。使用以後媽媽再也不用擔心我記住密碼了。這是記之前那篇的後續。

問題

1. 顯示當前地址所需要的信息
2. 當用戶進行登錄以後如何彈出信息
3. 是否彈出信息的匹配

實現

1. 由於插件機制有個background是一直運行在瀏覽器中，運用其中的方法來監聽頁面。根據頁面變化向content發起信息，讓他把頁面裡的iframe和本網址都發送到bakcground再進行處理。

<code>//background.js
chrome.tabs.onActivated.addListener(function (activeInfo) {  
    sendInfo("requestUrl");
  //sendinfo是對內容腳本發起信息，讓他網址發給background
})​
//cotent.js
function 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.js
chrome.runtime.onMessage.addListener((request, sender, callback) => {
    if (//判斷是否是urls請求) {
        //直接拿到收到的信息。
    }
}/<code>

2. 對於一般的網址，登錄實際是一個頁面跳轉的過程利用backgroud裡面的監聽頁面刷新變化來進行提示彈窗信息。如果頁面狀態為complete就發起數據傳輸和拉起iframe。

<code>//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 =
            ` 

\t\t\t\tposition: fixed;
\t\t\t\ttop: 20px;
\t\t\t\tright: 100px;\t\t\t\t
\t\t\t\tborder: 0;
\t\t\t\twidth: 400px;
\t\t\t\theight: 200px;
\t\t\t`;
        document.body.append(div);
    }
}
//save.html
拿到存儲的信息就可以進行操作。/<code>

3.當出現彈窗的時候，有時候實際是是不需要的，比如用戶輸入的在信息裡匹配數據一樣的賬戶和密碼。那麼這裡就需要判斷一下了。由於信息是加密的，所以需要解密一下了。解密以後根據當前的字符串進行匹配就可以了。

<code>//按照之前代碼已經拉起了彈窗的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;
}
            


/<string>/<code>

總結

通過這幾次介紹已經可以完成很多功能了。填鴨工具可以幫助你記住你複雜的密碼，幫助大家不用再點擊找回密碼了！！！！！！！

給你代碼｜往期回顧：

閱讀更多 鯤圭雲計算 的文章

關鍵字: 填鴨 密碼 瀏覽器