If you’re someone who frequently fills out online forms, you’ve probably encountered password fields that are hidden behind dots or asterisks. While this is a security measure designed to protect your information, it can also be frustrating if you need to double-check the password you’ve entered.
In this tutorial, we’ll show you how to build a Chrome extension that allows users to toggle password fields on and off, and copy the password to the clipboard. This extension can help increase productivity by making it easier to fill out online forms quickly and accurately.
To get started, create a new folder on your computer to hold the extension files. Inside this folder, create a new file called “manifest.json” with the following code:
{
"manifest_version": 2,
"name": "Peek Password",
"version": "1.0",
"description": "Allows users to toggle password fields and copy passwords to clipboard.",
"permissions": [
"activeTab",
"clipboardWrite"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"content.js"
]
}
]
}This code defines the basic structure of the extension, including the name, version, and description, as well as the permissions it requires to function. It also specifies the icon and popup files to use, and includes a content script that will run on all web pages.
Next, create a new file called “popup.html” with the following code:
<!DOCTYPE html>
<html>
<head>
<title>Toggle Password</title>
<script src="popup.js"></script>
<style>
body {
width: 200px;
height: 80px;
}
button {
margin: 10px;
}
</style>
</head>
<body>
<button id="togglePasswordButton">Peek</button>
<button id="copyPasswordButton">Copy</button>
</body>
</html>This code defines the layout and functionality of the popup window that appears when users click on the extension icon. It includes two buttons: one for toggling password fields on and off, and one for copying the password to the clipboard.
Finally, create a new file called “popup.js” with the following code:
let togglePasswordButton = document.getElementById("togglePasswordButton");
let copyPasswordButton = document.getElementById("copyPasswordButton");
togglePasswordButton.addEventListener("click", function() {
let passwordFields = document.querySelectorAll("input[type='password']");
passwordFields.forEach(function(passwordField) {
if (passwordField.type === "password") {
passwordField.type = "text";
togglePasswordButton.innerHTML = "Hide";
} else {
passwordField.type = "password";
togglePasswordButton.innerHTML = "Peek";
}
});
});
copyPasswordButton.addEventListener("click", function() {
let passwordFields = document.querySelectorAll("input[type='password']");
let passwordField = passwordFields[0];
let password = passwordField.value;
navigator.clipboard.writeText(password);
});This code adds event listeners to the toggle password and copy password buttons. When the toggle password button is clicked, the code finds all password fields on the page and toggles their visibility by changing their “type” attribute.
You can find the code here : AmTev/peek-password (github.com)
