Question

我正在创建我的第一个chrome扩展程序，而且我相对来说很新。

我的扩展程序如下所示：

的manifest.json

{
    "name": "Screen Compare",
    "description": "Screen Compare",
    "version": "1.0", 
    "permissions": [
        "tabs", "http://*/*", "https://*/*"
    ],
    "browser_action": {      
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "manifest_version": 2
}

popup.html

<html>
<head>
     <script src="popup.js"></script>
</head>
<body>
    <div id="loginConatiner">
        <table>
            <tr>
                <td>
                    Username:
                </td>
                <td>
                    <input id="txtUsername" type="text" placeholder="Username"/>
                </td>
            </tr>
            <tr>
                <td>
                    Password:
                </td>
                <td>
                    <input id="txtPassword" type="password" placeholder="Password"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="btnLogin" type="button" value="Sign In"/>
                </td>
                <td>
                </td>
            </tr>
        </table>
    </div>
    <div id="applicationsContainer">
        <table>
            <tr>
                <td>
                    Applications:
                </td>
                <td>
                    <select id="currentApplications"></select>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

popup.js

var currentApplications = [];

function login(e) {
    var username = document.getElementById('txtUsername');
    var password = document.getElementById('txtPassword');

    console.log(username.value);
    console.log(password.value);

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'url to load my applications', true);
    xhr.setRequestHeader("Authorization", "Basic " + btoa(username.value + ":" + password.value));
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            console.log(xhr.responseText);
            currentApplications = JSON.parse(xhr.responseText);
            console.log(currentApplications.applications.length);
            var applicationsContainer = document.getElementById('applicationsContainer');
            if(applicationsContainer){
                applicationsContainer.style.display = 'block';
            }

            var loginConatiner = document.getElementById('loginConatiner');
            if(loginConatiner){
                loginConatiner.style.display = 'none';
            }

            var applicationsDropdown = document.getElementById('currentApplications');          
            if(applicationsDropdown){
                for(var i =0, count = currentApplications.applications.length; i < count; i++){
                    var option = document.createElement("option");
                    option.text = currentApplications.applications[i].name;
                    option.value = currentApplications.applications[i].id;
                    applicationsDropdown.add(option);
                }
            }

        }
    };
    xhr.send();
}

document.addEventListener('DOMContentLoaded', function () {
    var applicationsContainer = document.getElementById('applicationsContainer');
    if(applicationsContainer){
        applicationsContainer.style.display = 'none';
    }
    var loginButton = document.getElementById('btnLogin');
    loginButton.addEventListener('click', login);  
});

当用户点击浏览器中的插件图标时，将显示一个登录表单。成功登录后，我隐藏了loginContianer div并显示带有加载应用程序的applicationsContainer div。

当弹出窗口关闭并再次打开时，我再次看到登录页面。我无法坚持ui。

我觉得我没有正确使用这个架构，请指导我。

Chrome插件 - 浏览器操作弹出窗口

0 个答案: