Initial commit

Falyrion · Aug 1, 2022 · fec6ab1 · fec6ab1
commit fec6ab1
Show file tree

Hide file tree

Showing 10 changed files with 256 additions and 0 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Falyrion
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,34 @@
+# Random Password Generator - Chrome Extension
+
+<p align="left">
+    <!-- Chrome --->
+    <a href="https://www.google.com/intl/en-en/chrome/" target="_blank" rel="noreferrer"> <img src="https://img.shields.io/badge/Google_chrome-4285F4?style=for-the-badge&logo=Google-chrome&logoColor=white" alt="chrome extension"/></a>
+    <!-- HTML -->
+    <img src="https://img.shields.io/badge/HTML-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="html"/>
+    <!-- CSS -->
+    <img src="https://img.shields.io/badge/CSS-239120?&style=for-the-badge&logo=css3&logoColor=white" alt="css"/>
+    <!-- JavaScript -->
+    <img src="https://img.shields.io/badge/JavaScript-ED8B00?style=for-the-badge&logo=javascript&logoColor=white" alt="javascript"/>
+</p>
+
+A lightweight extension for the Google Chrome Browser to generate random passwords.
+
+# Images
+
+<p align="center">
+    <p align="center">
+        <img src="images/popup.png" alt="icon" style="width: 300px;"/>
+    </p>
+    <p align="center">
+        <i>Popup Menu</i>
+    </p>
+</p>
+
+<p align="center">
+    <p align="center">
+        <img src="src/icons/icon_128.png" alt="icon"/>
+    </p>
+    <p align="center">
+        <i>Icon for Extensions Bar</i>
+    </p>
+</p>
diff --git a/images/popup.png b/images/popup.png
diff --git a/src/icons/icon_128.png b/src/icons/icon_128.png
diff --git a/src/icons/icon_16.png b/src/icons/icon_16.png
diff --git a/src/icons/icon_48.png b/src/icons/icon_48.png
diff --git a/src/manifest.json b/src/manifest.json
@@ -0,0 +1,24 @@
+{
+  "name": "Random Password Generator",
+  "description": "An extension to generate random passwords",
+  "version": "1.0",
+  "manifest_version": 3,
+  "author": "Falyrion",
+
+  "action": {
+    "default_popup": "popup.html"
+  },
+  "icons": {
+    "16": "icons/icon_16.png",
+    "48": "icons/icon_48.png",
+    "128": "icons/icon_128.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["popup.js"]
+    }
+  ],
+  "permissions": ["activeTab"]
+}
diff --git a/src/popup.html b/src/popup.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <!-- Bootstrap stylesheet -->
+        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+
+        <title>Test</title>
+    </head>
+    <body style="width: 300px; background-color:#ffffff">
+
+        <body class="container-fluid">
+            <div class="row">
+                <div class="span6" style="float: none; margin: 0 auto;">
+
+                    <!-- Title -->
+                    <div class="mt-1 d-flex justify-content-center">
+                        <h1 style="text-align: center;">Random Password <br> Generator</h1>
+                    </div>
+
+                    <hr>
+
+                    <!-- Checkbox uppercase characters -->
+                    <div class="form-check justify-content-center">
+                        <input id="checkboxUpper" class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked>
+                        <label class="form-check-label" for="flexCheckDefault">Use uppercase characters</label>
+                    </div>
+
+                    <!-- Checkbox lowercase characters -->
+                    <div class="form-check justify-content-center">
+                        <input id="checkboxLower" class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked>
+                        <label class="form-check-label" for="flexCheckDefault">Use lowercase characters</label>
+                    </div>
+
+                    <!-- Checkbox numbers -->
+                    <div class="form-check justify-content-center">
+                        <input id="checkboxNumbers" class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked>
+                        <label class="form-check-label" for="flexCheckDefault">Use numbers</label>
+                    </div>
+
+                    <!-- Checkbox special characters -->
+                    <div class="form-check justify-content-center">
+                        <input id="checkboxSpecial" class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked>
+                        <label class="form-check-label" for="flexCheckDefault">Use special characters</label>
+                    </div>
+
+                    <hr>
+
+                    <!-- Range slider for password length -->
+                    <div class="mt-1 d-flex justify-content-center">
+                        <label class="form-label" style="color: rgb(0, 0, 0)">Password length</label>
+                    </div>
+                    <div class="mt-1 d-flex justify-content-center">
+                        <input type="range" class="form-range" min="1" max="40" step="1" id="passwordLengthSlider">
+                    </div>
+                    <div class="mt-1 d-flex justify-content-center">
+                        <label class="form-label" id="passwordLength">20</label>
+                    </div>
+
+                    <hr>
+
+                    <!-- Text field with random generated password -->
+                    <input id="passwordTextField" class="form-control" id="floatingInputValue">
+
+                    <!-- Buttons -->
+                    <div class="mt-2 mb-2 d-flex justify-content-center">
+                        <button type="button" class="btn btn-primary me-2" gravity="center" id="button_generate">Generate</button>
+                        <button type="button" class="btn btn-primary" gravity="center" id="button_copy">Copy</button>
+                    </div>
+
+                </div>
+            </div>
+        </body>
+
+
+        <!-- JavaScript -->
+        <script type="text/javascript" src="popup.js"></script>
+
+        <!-- Bootstrap JavaScript -->
+        <!-- <script slrc="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
+        <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> -->
+        <!-- <script src="https://cdn.jsdeivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> -->
+    </body>
+</html>
diff --git a/src/popup.js b/src/popup.js
@@ -0,0 +1,91 @@
+function generatePassword(passwordLenght, useUpper, useLower, useNumbers, useSpecial) {
+    // Define charsets
+    var charsetUpper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    var charsetLower = "abcdefghijklmnopqrstuvwxyz";
+    var charsetNumbers = "0123456789";
+    var charsetSpecial = "!@#$%^&*()_+~}{[]:;?><,.-=";
+
+    // Add wanted charsets to main charset
+    var charsetAll = "";
+
+    if (useUpper == true) {
+        charsetAll += charsetUpper;
+    }
+    if (useLower == true) {
+        charsetAll += charsetLower;
+    }
+    if (useNumbers == true) {
+        charsetAll += charsetNumbers;
+    }
+    if (useSpecial == true) {
+        charsetAll += charsetSpecial;
+    }
+
+    // Generate random password
+    var n = charsetAll.length;
+    var password = "";
+
+    for (var i = 0; i < passwordLenght; i++) {
+        var randomIndex = Math.floor(Math.random() * n)
+        password += charsetAll.charAt(randomIndex);
+    }
+
+    return password;
+}
+
+// Create Event Listener for checkboxes
+document.getElementById("checkboxUpper").addEventListener("change", function() {
+    useUpperCharacters = document.getElementById("checkboxUpper").value;
+});
+
+document.getElementById("checkboxLower").addEventListener("change", function() {
+    useLowerCharacters = document.getElementById("checkboxLower").value;
+});
+
+document.getElementById("checkboxNumbers").addEventListener("change", function() {
+    useNumbersCharacters = document.getElementById("checkboxNumbers").value;
+});
+
+document.getElementById("checkboxSpecial").addEventListener("change", function() {
+    useSpecialCharacters = document.getElementById("checkboxSpecial").value;
+});
+
+// Create event listener for slider
+document.getElementById("passwordLengthSlider").addEventListener("change", function() {
+    // Get current value of slider
+    var currentLenght = document.getElementById("passwordLengthSlider").value;
+
+    // Update text
+    document.getElementById("passwordLength").textContent = currentLenght;
+
+    // Update variable
+    passwordLenght_global = currentLenght;
+});
+
+// Create event listener for generate button
+document.getElementById("button_generate").addEventListener("click", function() {
+    // Generate password
+    password_global = generatePassword(passwordLenght_global, useUpperCharacters, useLowerCharacters, useNumbersCharacters, useSpecialCharacters);
+
+    // Set element text
+    document.getElementById("passwordTextField").value = password_global;
+});
+
+
+// Create event listener for copy button
+document.getElementById("button_copy").addEventListener("click", function() {
+    navigator.clipboard.writeText(password_global);
+});
+
+// Generate random password on start
+var useUpperCharacters = true;
+var useLowerCharacters = true;
+var useNumbersCharacters = true;
+var useSpecialCharacters = true;
+var passwordLenght_global = 20;
+var newPassword = generatePassword(passwordLenght_global, useUpperCharacters, useLowerCharacters, useNumbersCharacters, useSpecialCharacters);
+var password_global = newPassword;
+
+document.getElementById("passwordTextField").value = newPassword;
+
+// https://chrome.google.com/webstore/detail/ultra-password-generator/mfigcepdniddlllniijbmmekgfdcddel?hl=de
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Auto detect text files and perform LF normalization
		* text=auto