Generate password v1

.gitignore

@@ -2,4 +2,6 @@ node_modules/
 npm-debug.log
 yarn-error.log
 .vscode
-dist/
+dist/
+build/
+package-lock.json

package.json

@@ -2,7 +2,6 @@
   "name": "password_generator_extension",
   "version": "1.0.0",
   "description": "A Google Chrome extension to generate passwords for wbsites using a secret key and the url of the site.",
-  "main": "background.js",
   "scripts": {
     "dev": "webpack --watch --config webpack.dev.js",
     "build": "webpack --config webpack.prod.js"
@@ -23,6 +22,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "@fortawesome/react-fontawesome": "^0.1.17",
     "core-js": "^3.21.0",
+    "crypto-js": "^4.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "regenerator-runtime": "^0.13.9"

public/manifest.json

@@ -1,15 +1,19 @@
 {
   "name": "Password Generator",
-  "description": "Generate passwords based on cypher and url",
-  "version": "1.0",
+  "description": "Generate passwords based on a secret key and domain of current site, runs offline on client side, we don't store your passwords!",
+  "version": "0.1",
   "manifest_version": 3,
   "background": {
     "service_worker": "background.js"
   },
   "permissions": [
-      "storage",
-      "activeTab",
-      "scripting"
+    "storage",
+    "tabs",
+    "scripting"
+  ],
+  "host_permissions": [
+    "http://*/",
+    "https://*/"
   ],
   "action": {
     "default_popup": "popup.html",

src/Components/Button.js

@@ -1,5 +1,5 @@
-import React from "react";
-import styles from "./Button.modules.css";
+import React from 'react';
+import styles from './Button.modules.css';
 
 const Button = ({ ...props }) => {
   return (

src/Components/Button.modules.css

@@ -10,7 +10,7 @@
   overflow: hidden;
   cursor: pointer;
   border-radius: 0.4rem;
-  width: 8rem;
+  width: 8.5rem;
   font-family: var(--type);
   font-weight: 400;
 }

src/Components/SecretKey.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from './SecretKey.modules.css';
+
+const SecretKey = ({ onChangeSecretKey, secretKey }) => {
+  return (
+    <div className={styles.form}>
+      <label for="form">Insert secret key:</label>
+      <input
+        id="form"
+        type="text"
+        value={secretKey}
+        onChange={(e) => onChangeSecretKey(e.target.value)}
+        className={styles.input1}
+        placeholder="Secret Key"
+      />
+    </div>
+  );
+};
+
+export default SecretKey;

src/Components/SecretKey.modules.css

@@ -0,0 +1,31 @@
+.input1 {
+  width: 12rem;
+  border-radius: 0.4rem;
+  text-align: center;
+  background-color: #eee;
+  border: none;
+  font-size: 12px;
+  padding: 2px;
+  transition: 0.4s;
+  box-shadow: 0 0 0 0;
+  outline: 0;
+}
+
+.input1:hover {
+  outline: none;
+  box-shadow: 0 0 0 3px #fff, 0 0 0 4px #777;
+  background-color: #ddd;
+}
+
+.form label {
+  font-family: var(--type);
+  font-size: 16px;
+  color: #00334b;
+  font-weight: 400;
+}
+
+.form {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

src/Components/ShowPassword.js

@@ -1,8 +1,8 @@
-import React from "react";
-import Button from "./Button";
-import styles from "./ShowPassword.modules.css";
-import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from 'react';
+import Button from './Button';
+import styles from './ShowPassword.modules.css';
+import { faEyeSlash, faEye } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const ShowPassword = ({ value, onClick }) => {
   const [passwordShown, setPasswordShown] = React.useState(false);
@@ -16,9 +16,9 @@ const ShowPassword = ({ value, onClick }) => {
   return (
     <div className={styles.passWrapper}>
       <Button onClick={onClick}>Generate</Button>
-      <div className={styles.test}>
+      <div className={styles.passwordContainer}>
         <input
-          type={passwordShown ? "text" : "password"}
+          type={passwordShown ? 'text' : 'password'}
           disabled
           value={value}
           className={styles.input}

src/Components/ShowPassword.modules.css

@@ -4,18 +4,17 @@
   align-items: center;
   text-align: center;
   border-radius: 0.4rem;
-  border-top: 0.5px solid #dadada;
   padding: 1rem 0;
   gap: 2rem;
 }
 
 .input {
-  width: 10rem;
+  width: 12rem;
   border-radius: 0.4rem;
   text-align: center;
   background-color: #eee;
   border: none;
-  font-size: 16px;
+  font-size: 12px;
   padding: 2px;
   transition: 0.4s;
 }
@@ -26,14 +25,14 @@
   background-color: #ddd;
 }
 
-.test {
+.passwordContainer {
   position: relative;
   display: grid;
 }
 
 .eye {
   position: absolute;
-  top: 5px;
+  top: 3px;
   right: 3%;
   color: #4fc3f7;
   cursor: pointer;

src/background.js

@@ -1,5 +0,0 @@
-let cypher = 'dalua';
-
-chrome.runtime.onInstalled.addListener(() => {
-  chrome.storage.sync.set({ cypher });
-});

src/popup.css

@@ -1,10 +1,10 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap');
 
 body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  --type: "Poppins", Georgia;
+  --type: 'Poppins', Georgia;
 }
 
 .PopupContainer {
@@ -28,6 +28,10 @@ body {
   width: 70%;
 }
 
+.PopupContent {
+  border-top: 0.5px solid #dadada;
+}
+
 h1,
 p,
 a {

src/popup.jsx

@@ -2,25 +2,31 @@ import React from 'react';
 import { render } from 'react-dom';
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
+import CryptoJS from 'crypto-js';
 import './popup.css';
 import Header from './Components/Header';
 import ShowPassword from './Components/ShowPassword';
 import Description from './Components/Description';
+import SecretKey from './Components/SecretKey';
 
 function Popup() {
   const [host, setHost] = React.useState('');
+  const [secretKey, setSecretKey] = React.useState('');
+
+  function onChangeSecretKey(value) {
+    setSecretKey(value);
+  }
 
   const executeScript = async () => {
     let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
-    chrome.scripting.executeScript({
-      target: { tabId: tab.id },
-      func: generatePassword,
-    });
-  };
-  const generatePassword = () => {
-    let hostname = window.location.hostname;
-    console.log(hostname);
-    chrome.storage.sync.get('cypher', ({ cypher }) => {});
+    const domain = new URL(tab.url).hostname.replace('www.', '').split('.')[0];
+
+    let password;
+    password = CryptoJS.HmacMD5(domain, secretKey).toString();
+    password =
+      password.substring(15, 20).toUpperCase() +
+      password.substring(20, 30).match(/.{5}/g).join('#');
+    setHost(password);
   };
 
   return (
@@ -31,9 +37,10 @@ function Popup() {
       <div className="PopupDescription">
         <Description />
       </div>
-      <div className="PopupContent">
-        <ShowPassword value={host} onClick={() => executeScript()} />
-      </div>
+
+      <div className="PopupContent"></div>
+      <SecretKey onChangeSecretKey={onChangeSecretKey} secretKey={secretKey} />
+      <ShowPassword value={host} onClick={() => executeScript()} />
     </div>
   );
 }

webpack.config.js

@@ -1,4 +1,3 @@
-const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
@@ -7,10 +6,6 @@ module.exports = {
     popup: './src/popup.jsx',
     background: './src/background.js',
   },
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].js',
-  },
   module: {
     rules: [
       {

webpack.dev.js

@@ -1,7 +1,14 @@
 const { merge } = require('webpack-merge');
+const path = require('path');
 const config = require('./webpack.config.js');
 
-module.exports = merge(config, {
-  mode: 'development',
-  devtool: 'inline-source-map',
-});
+module.exports = merge(config, 
+  {
+    mode: 'development',
+    devtool: 'inline-source-map',
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: '[name].js',
+    },
+  },
+);

webpack.prod.js

@@ -1,6 +1,11 @@
 const { merge } = require('webpack-merge');
+const path = require('path');
 const config = require('./webpack.config.js');
 
 module.exports = merge(config, {
   mode: 'production',
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: '[name].js',
+  },
 })