افزونه نمایش پسورد ها

سلام من خیلی وقته چیزی ننوشتم مثلا سرم گرم شغلمه ????

گفتم بیام یچیزی بنویسم شما هم از حضور ما سود ببرید .?

یه افزونه بسیار افتضاح نوشتم برای موزیلا، JS هم زیاد بلد نیستم ولی سعی خودمو کردم

چون توی محیط کار ما به این افزونه به شدت نیاز داریم.

شاید بپرسید که کارش چی هست حالا مهندس؟(با لحنی تمسخر آمیز).

اگر صبر میکردید خودم میگفتم و یکسری توضیح هم درباره کدهاش بهتون میدادم.

با این افزونه شما میتونید به راحتی رمز های ذخیره شده در حافظه مرورگر خودتون رو ببینید(آره میدونم که به افزونه نیاز نیست). خب سرتون رو درد نیارم و یکم درباره کد هایی که زدم برایتون توضیح بدم….

1var inp = document.getElementsByTagName('input');

میدونم بلدید ولی باید بگم : با این کد امدم همه تگ های INPUT رو پیدا کردم و توی یک متغیر ذخیره کردم.

مشوقم هم Inspect -> Console مرورگرم بوده

123for (var i = 0; i < inp.length; i++) {
if (inp[i].type == "password") {
var InputPass = inp[i];

توی خط اول امدم یک حلقه For ساختم یک متغیر تعریف کردم و از 0 تا طول متغیر خط بالا که تعداد input هارو توش ذخیره کرده بودم پیمایش کردم و توی خط بعد یک شرط گذاشتم که اگر نوع اون input از نوع password هست و بعد هم اون input رو توی یک متغیر دیگه ذخیره کردم.

12345678910var div = document.createElement('div');
div.title = "Click For Show Password";
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "url(" + browser.extension.getURL("eye.png") + ")";
div.style.backgroundSize = "cover";
div.style.color = "white";
div.style.zIndex = "1";
div.style.cursor = 'pointer';
div.id = 'RpEye';

توی خط اول امدم یک متغیر تعریف کردم و یک المنت جدید درست کردم و Handel اون رو توش ذخیره کردم

خط های بعد هم شروع کردم به دادن استایل و کار های ظاهری اون المنتی که ساخته بودم

اگر توی خط اول المنت خودتون رو ذخیره نکنید نمیتونید باهاش کار کنید؛اگرم بشه من بلد نیستم.

12345678910InputPass.insertBefore(div, InputPass.nextSibling);
div. = function() {
if (InputPass.type == "text") {
InputPass.type = "password";
} else {
InputPass.type = "text";
}
};
}
}

خب اگر یادتون باشه یکم بالا تر InputPass رو تعریف کرده بودیم و اون input که از نوع پسورد بود رو توش ذخیره کردیم.

توی خط اول امدم بعد از اون Element، تگ Div که توی کد های بالا تعیریف کرده بودیم رو Insert کردیم

با کد AppendChild نمیشد من تست کردم چون تگ Div ما میره زیر تگ Input و دیگه نمایش داده نمیشه.

توی خط بعد هم امدم از Handel تگ Div یک رویداد گرفتم و یک فانکشن تعریف کردم که توش چک میکنه که نوع اون فیلد Text هست یا Password و این حالت رو Toggle میکنه.

ببخشید دیگه نتونستم بهتر توضیج بدم ?.

فقط یچیزی توجه کردن خیلی مهمه من توی کد بالا چند تا متغیر تعریف کردم که از اون متغیر 2 یا 3 مدل دیگه داشتم بعد از چک کردن کد دیدم که الکی تعریف کردم و فقط حافظه پر کردم.

ممنون از همراهیتون ??

این رو من 3 روز پیش نوشتم هم متن رو هم افزونه رو ولی موزیلا معتقد بود که افزونه من مخرب هست ولی بعد از 3 روز بالاخره تایید شد.

نویسنده مطلب: رضا پارسیان

منبع مطلب