I am trying to deploy my first javascript application, which is a Chrome extension.
This simply generates random passwords and stores it with the url of current active tab.

App runs fine on local but after deploying it to Chrome, I got this error:

[![enter image description here](https://i.stack.imgur.com/kLU5n.png)](https://i.stack.imgur.com/kLU5n.png)

> 
> Uncaught TypeError: Cannot read properties of null (reading 'length')
> index.js:65 (anonymous function)
> 
> 
> 

I am a beginner, so any kind of criticism about my code is highly appreciated.
Thank you so much.

```
function render()  {

 *line65*   **if(passwords.length === 0)** {
   document.getElementById("saved-passwords-container").style.display= "none";
    }   else {
        document.getElementById("saved-passwords-container").style.display= "unset";
    }

    let list = ""
    **for (let i = 0; i < passwords.length; i++)** {
        list += `<div class="saved-password-line"><span>${passwords[i]}</span></br></br><span class="link"><a target='_blank'href='${links[i]}'>${links[i]}</a></span></div>`
    }

    document.getElementById("passwords-el").innerHTML = list
}

```

Here is the full index.js file:

```
    var characters = [];
        for (var i=32; i<127; i++)
        characters.push(String.fromCharCode(i));

        for( var i = 0; i < characters.length; i++){                          
            if ( characters[i] === '<') { 
                characters.splice(i, 1); 
                i--; 
            }
        }
        for( var i = 0; i < characters.length; i++){                          
            if ( characters[i] === '>') { 
                characters.splice(i, 1); 
                i--; 
            }
        }

let pw1El = document.getElementById("pw1-el")
let pw1 = ""

let passwords = []
passwords = JSON.parse(localStorage.getItem("savedPasswords"))

let links = []
links = JSON.parse(localStorage.getItem("savedLinks"))

render()

document.getElementById("char-count-el").value = 20

document.getElementById("gen-btn").addEventListener("click", function() {

    var charCount = document.getElementById("char-count-el").value
    pw1 = ""

    for(let i = 0; i < charCount; i++) {
        let randomIndex = Math.floor(Math.random() * characters.length)
        pw1 += (characters[randomIndex])
    }

    pw1El.textContent = pw1

})

document.getElementById("save-btn").addEventListener("click", function() {
    passwords.push(pw1El.innerText)
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
        links.push(tabs[0].url)
    })

    localStorage.setItem("savedPasswords", JSON.stringify(passwords))
    localStorage.setItem("savedLinks", JSON.stringify(links))

    render()
})

function render()  {

   **if(passwords.length === 0)** {
   document.getElementById("saved-passwords-container").style.display= "none";
    }   else {
        document.getElementById("saved-passwords-container").style.display= "unset";
    }

    let list = ""
    **for (let i = 0; i < passwords.length; i++)** {
        list += `<div class="saved-password-line"><span>${passwords[i]}</span></br></br><span class="link"><a target='_blank'href='${links[i]}'>${links[i]}</a></span></div>`
    }

    document.getElementById("passwords-el").innerHTML = list
}

document.getElementById("clear-btn").addEventListener("click", function() {
    passwords = []
    links = []

    localStorage.setItem("savedPasswords", JSON.stringify(passwords))
    localStorage.setItem("savedLinks", JSON.stringify(links))

    render()
})

document.getElementById("copy-btn").addEventListener("click", function() {
    var input = document.getElementById("pw1-el").textContent;   
    navigator.clipboard.writeText(input);

    alert("Copied Text: " + input);
})

```

index.html

```
<!DOCTYPE html>
<html>
<head>
        <link rel="stylesheet" href="index.css">
</head>

<body>
        <div class="container">
            <h1>Generate a</br>random password</h1>
            <p>Never use an unsecure password again.</p>
        <hr>
            <div>
                <label for="char-count-el">Character Count:</label>
                <input type="number" id="char-count-el">
                <button id="gen-btn"><span>Generate password</span></button>
            </div>
            <div>
                <label>Your Password:</label>
                <div class="pw-container">
                    <span class="password-line" id="pw1-el">...</span>
                    <button class="side-btn" id="save-btn">SAVE</button> 
                    <button class="side-btn" id="copy-btn">COPY</button> 
                </div>
            </div>
            <div id="saved-passwords-container">
                <hr>
                    <label>Saved Passwords:</label>
                    <div class="pw-container">
                        <div id="passwords-el">...</div>
                        <button class="side-btn" id="clear-btn">CLEAR</button>
                    </div>
            </div>
        </div>

        <script src="index.js"></script>
</body>

</html>

```

index.css

```
body {
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #ffffff;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

h1::first-line {
    color: white;
}

h1 {
    color: #00ffaa;
    margin-bottom: 5px;
    line-height: 1;
}

label {
    font-size: 11px;
    display: block;
    color: #D5D4D8;
    margin-top: 10px;
}

input {
    height: 38px;
    border-radius: 5px;
    border: none;
    width: 70px;
    padding: 0px 10px;
    text-align: center;
    background-color: #D5D4D8;
    margin-right: 20px;
    font-size: 14px;
}

.container {
    background: #1F2937;
    margin: 0;
    padding: 10px 30px 40px;
    width: 100%;
    min-width: 500px;
    box-shadow: 0px 10px 30px 10px #2640644b;
    display: flex;
    flex-direction: column;
}

.pw-container {
    display: flex;
    border-radius: 5px;
    background-color: #3e4f66;
    padding: 10px;
    margin-top: 10px;
}

.password-line {
    color: #00ffaa;
    font-size: 16px;
    padding: 5px 10px;
    margin-top: 0px;
    flex-grow: 1;
    flex: 1 1 1;
    min-width: 0;
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
}

#passwords-el {
    padding-right: 30px;
    flex-grow: 1;
    flex: 1 1 0;
    min-width: 0;
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
}
.saved-password-line {
    color: #D5D4D8;
    font-size: 14px;
    padding: 10px 15px;
    border-bottom: solid 1px #d5d4d814;
    border-radius: 5px;
    margin-bottom: 10px;
    line-height: 0.9;
}

a {
    color: #d5d4d872;
    text-decoration: underline;
}

.side-btn {
    font-size: 12px;
    width: 60px;
    border: none;
    background: none;
    color: #D5D4D8;
    padding: 5px 10px;
    border-radius: 5px;
    justify-self: flex-end;
}

.side-btn:hover {
    background-color: #ffffff28 ;
}

#gen-btn {
    color: #ffffff;
    background: #0EBA80;
    text-transform: capitalize;
    text-align: center;
    width: 200px;
    height: 40px;
    padding: 10px 10px;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    transition: all 0.5s;
    box-shadow: 0px 0px 30px 5px #0eba8135
}

#gen-btn:hover {
    box-shadow: 0px 0px 30px 10px #0eba8157
}

    #gen-btn span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

    #gen-btn span:after {
        content: '\279c';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
    }

    #gen-btn:hover span {
        padding-right: 25px;
    }

    #gen-btn:hover span:after {
        opacity: 1;
        right: 0;
    }

p {
    color: #D5D4D8;
    margin-top: 0px;
}

hr {
    border-width: 1px 0px 0px 0px;
    border-color: #95959576;
    margin: 15px 0;
}

```

manifest.json

```
{
    "manifest_version": 3,
    "version": "1.0",
    "name": "Password Generator",
    "action": {
        "default_popup": "index.html",
        "default_icon": "icon.png"
    },
    "permissions": [
        "tabs"
    ]
}

```