在这里变得不确定。有什么理由吗？

Question

所以我目前正在制作一个 chrome 扩展，允许您设置网站的快捷方式并直接转到它们。但出于某种原因，我目前在这里，在 command1

处未定义

代码如下：

let current_url = document.getElementsByClassName("current_url");
let bg = chrome.extension.getBackgroundPage();
let url = ""
let storage = chrome.storage.sync
console.log(chrome)
console.log(bg)
console.log(bg.command1)
function adder(){
    for(elt of current_url) {
       switch(elt.innerHTML) {
           case "command1":
               chrome.storage.sync.get("key1", function(msg){url = msg.key1.toString(); console.log(msg.key1)});
               break;
           case "command2":
                 url = bg.command2;
                break;
           case "command3":
                url = bg.command3;
               break;
            case "command4":
                url = bg.command4;
                break;
       }
       elt.innerHTML = `${elt.innerHTML}       ${url}`;
       console.log(elt)
    }
}
adder()

.change-c{
    margin: 20px;
    background-color: grey;
    list-style: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script defer src= "app.js"></script>
</head>
<body>
    <ul class= "change-c">
        <p class= "current_url">command1</p><li><input type="text" class="enter"></li>
    </ul>
    <ul class="change-c">
        <p class= "current_url">command2</p><li><input type="text" class="enter"></li>
    </ul>
    <ul class="change-c">
        <p class= "current_url">command3</p><li><input type="text" class="enter"></li>
    </ul>
    <ul class= "change-c">
        <p class= "current_url">command4</p><li><input type="text" class="enter"></li>
    </ul>
    
</body>
</html>

所以知道为什么会这样吗？就像在 console.log("msg.key1") 它确实说“https://www.youtube.com”但是变量“url”是未定义的，即使它们是相同的。如果可以请帮忙

Answer 1

chrome.storage.sync.get 是一个异步操作，当检索到值时，它将调用第二个参数中的函数。

在您的代码中，您在调用此异步函数后立即读取变量的值，因此在调用回调函数之前变量的值仍未设置。

要解决此问题，

在回调函数中设置innerHTML或者

或

promisify 函数，将 adder 转换为异步函数并使用 await 作为 promise

在这里变得不确定。有什么理由吗？

Getting undefined here. Any reason why?

html

javascript

google-chrome-extension