Question

首次部署 Chrome 扩展程序-未捕获的 TypeError：无法读取 null 的属性（读取“长度”）

2022-04-16

1603

javascript google-chrome chrome-extension-manifest-v3

我正在尝试部署我的第一个 javascript 应用程序，它是一个 Chrome 扩展程序。这只是生成随机密码并将其与当前活动选项卡的 url 一起存储。

应用程序在本地运行良好，但将其部署到 Chrome 后，我收到此错误：

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

我是初学者，因此非常感谢对我的代码的任何批评。非常感谢。

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
}

这是完整的 index.js 文件：

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"
    ]
}

Answer 1

我解决了。我理解（如果我错了，请纠正我）如果本地存储为空，则解析时不会返回空数组。

显然，当我这样做时：

passwords = JSON.parse(localStorage.getItem("savedPasswords"))

密码不再是一个数组。我改用：

passwords.push(JSON.parse(localStorage.getItem("savedPasswords")))

但这只是在密码内推送了一个嵌套数组。所以我添加了一个 for 循环，并使用 if 语句来解决初始错误：

let locSavedPasswords = localStorage.getItem("savedPasswords")

if(locSavedPasswords !== null) {
    for( var i = 0; i < (JSON.parse(locSavedPasswords)).length; i++){                          
        passwords.push(JSON.parse(locSavedPasswords)[i])  
    }}

Answer 2

最初， savedPasswords 不会存在于 localStorage 中，因此 localStorage.getItem('savedPasswords') 将返回 null 。

然后执行 JSON.parse(null) ，它不会立即崩溃，因为 null 首先被强制转换为字符串，并变为 'null' ，然后进行 JSON 解析并变回 null ，因为内容为 null 的字符串是有效的 JSON。

但是然后你对其执行 .length 并崩溃。

解决方案是处理尚未设置项目的情况，并将其视为 JSON 字符串化的空数组。例如，您可以使用空值合并运算符 ?? 来执行此操作：

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

或者，您可以像以前一样继续使用 [] 对其进行初始化，但将赋值与条件中的实际值包装在一起：

let passwords = []
const json = localStorage.getItem('savedPasswords')
if (json !== null) {
  passwords = JSON.parse(json)
}

就我个人而言，我喜欢对 localStorage 中的结构化数据执行类似这样的操作，它还可以处理其他内容（例如无效 JSON）以某种方式存储在那里的情况（而不会破坏应用程序）：

let passwords = []
try {
  const data = JSON.parse(localStorage.getItem('savedPasswords'))
  if (Array.isArray(data)) passwords = data
} catch {}