Question

我正在尝试在Chrome扩展程序的选项页面中显示一个小状态框。我想按照文档here中的示例进行操作。

但我得到了例外Uncaught TypeError: Cannot set property 'innerHTML' of undefined。这个例子从来没有定义一个状态对象，但是我在javascript / html上是一个noob，我不知道是否有一些明显的我遗漏了。这是我的选项页面的代码。

回调函数的第二行发生错误。

<script type="text/javascript" >
    function login(event){
                event.preventDefault();
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        if(username.value != null && password.value != null) chrome.extension.getBackgroundPage().login(username, password, callback);
    }
    function callback(){
            status = document.getElementById("status");
        status.innerHTML = "Now logged in";
        setTimeout(function(){
                status.innerHTML = "";
        }, 750);
    }
</script>
<body>
<form>
Username: <input type="text" name="username" id="username" /> <br />
Password: <input type="password" name="password" id="password" /> <br />
<button onclick="login(event)">Login</button>
</form>
<div id="status"></div>
</body>

Answer 1

您没有标识为status的HTML元素，这会导致错误，因为document.getElementById()在找不到元素时会返回null或undefined。
要修复它，只需添加标识为status的元素即可。实施例

<button onclick="login()">Login</button>
</form>

<div id="status"></div>
</body>

Answer 2

由于您提交了form，因此当您点击登录时，正在重新加载该页面。为避免这种情况，您可以调用event.preventDefault()并将事件传递到login函数，如下所示;

    <script type="text/javascript" >
    function login(event){
        event.preventDefault();
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        if(username.value != null && password.value != null) chrome.extension.getBackgroundPage().login(username, password, callback);
    }
    function callback(){
        var status = document.getElementById("status");
        status.innerHTML = "Now logged in";
        setTimeout(function(){
                status.innerHTML = "";
        }, 750);
    }
    </script>
    <body>
    <form>
    Username: <input type="text" name="username" id="username" /> <br />
    Password: <input type="password" name="password" id="password" /> <br />
    <button onclick="login(event)">Login</button>
    </form>
    <div id="status"></div>
    </body>

这将阻止form提交并按预期工作。

Answer 3

我可能不对，但我对“chrome.extension”没有任何经验。如果你改变了 var status = document.getElementById("status"); status.innerHTML = "Now logged in";

进入var status = window.document.getElementById("status"); status.innerHTML = "Now logged in";

注意添加的“窗口”，也许回调尝试搜索'chrome.extension.document'而不是'window.document'？

尝试在Chrome扩展程序选项页面中显示提醒，但获取“无法设置属性'innerHTML'未定义”

3 个答案: