// main.js

import { generate_password } from './static/wasm.js';

const websiteInput = document.getElementById('website');
const emailInput = document.getElementById('email');
const keyInput = document.getElementById('key');
const copyButton = document.getElementById('copy-password'); // Updated ID

// Function to get the current tab's URL
async function getCurrentTabUrl() {
  console.log('getCurrentTabUrl() called');
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  console.log('getCurrentTabUrl() returned ', tab.url);
  return clean_url(tab.url); // why does this not work? Error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__wbindgen_add_to_stack_pointer')
  // return tab.url;
}

async function saveEmail(email) {
  console.log('saveEmail() called');
  await chrome.storage.local.set({ 'email': email });
}

async function autofillEmail() {
  console.log('autofillEmail() called');
  const data = await chrome.storage.local.get('email');
  const savedEmail = data.email || '';
  emailInput.value = savedEmail;
}

getCurrentTabUrl().then(url => {
  websiteInput.value = url;
  console.log('getCurrentTabUrl() returned', url);
});

window.addEventListener('load', async () => {
  websiteInput.value = await getCurrentTabUrl();
  await autofillEmail();
});

emailInput.addEventListener('input', async () => {
  await saveEmail(emailInput.value);
});

function clean_url(url) { // Cleans urls: eg. https://github.com/GageHoweTamu/PWGen -> github.com
  const start = url.indexOf("://") >= 0 ? url.indexOf("://") + 3 : 0;
  const end = url.slice(start).indexOf('/') >= 0 ? url.slice(start).indexOf('/') : url.length - start;
  return url.slice(start, start + end);


}


copyButton.addEventListener('click', async () => { // generate and copy password

  const website = websiteInput.value.trim();
  const email = emailInput.value.trim();
  const key = keyInput.value.trim();

  if (!website || !email || !key) {
    alert('Please fill all fields');
    return;
  }

  const password = generate_password(email, website, key);

  saveEmail(email);

  navigator.clipboard.writeText(password);
  alert('Password copied to clipboard!');
  console.log('Password copied to clipboard');
});


// lib.rs
// Compile with "wasm-pack build --target web --out-name wasm --out-dir ./static"

use sha2::{Digest, Sha256};
use wasm_bindgen::prelude::*;

// GENERATE_PASSWORD FUNCTION: TAKES EMAIL, WEBSITE, AND KEY AS INPUT AND RETURNS A PASSWORD

#[wasm_bindgen]
pub fn generate_password(email: &str, website: &str, key: &str) -> String {
    let input = format!("{}{}{}", email, website, key);
    let mut hasher = Sha256::new();
    hasher.update(input);
    let result = hasher.finalize();

    let password = format!("{:x}", result);

    println!("printing from lib.rs, password: {}", password);

    password
}


<!-- File: index.html -->

<!-- web dev is cool-->

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Generator Extension</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>PWGen</h1>
    <p>Fill in the following details:</p>
    <form>
        <label for="website">Website:</label><br>
        <input type="text" id="website" name="website"><br>
        <label for="email">Email:</label><br>
        <input type="text" id="email" name="email"><br>
        <label for="key">Key (Password):</label><br>
        <input type="password" id="key" name="key"><br><br>
        <button type="button" id="copy-password">Copy Password</button>

    </form>
    <script type="module" src="./main.js"></script>
</body>
</html>


{
    "manifest_version": 3,
    "name": "PWGen",
    "version": "1.0",
    "description": "A browser extension for generating passwords using Rust and SHA-256 hashing.",
    "action": {
        "default_popup": "index.html",
        "default_icon": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
        }
    },
    "permissions": ["clipboardWrite", "storage", "activeTab"],
    "icons": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
    }
}

Why are there be errors when generate_password is called?