Google chrome Chrome插件-浏览器操作弹出窗口_Google Chrome_Google Chrome Extension

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

google-chrome google-chrome-extension

Google chrome Chrome插件-浏览器操作弹出窗口,google-chrome,google-chrome-extension,Google Chrome,Google Chrome Extension,我正在创建我的第一个chrome扩展，我对它比较陌生我的扩展如下所示： Manifest.json { "name": "Screen Compare", "description": "Screen Compare", "version": "1.0", "permissions": [ "tabs", "http://*/*", "https://*/*" ], "browser_action": {

我正在创建我的第一个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);  
});

当用户单击浏览器中的插件图标时，将显示登录表单。成功登录后，我将隐藏LoginContainer div并显示已加载应用程序的ApplicationContainer div

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

我觉得有些地方我没有正确地利用架构，请指导我。

你说不能持久化ui是什么意思？弹出页面会在关闭时关闭，并在加载时重建。您必须将持久数据存储在localStorage或chrome.storage中。@gui47:持久化是指每次popup关闭和打开时，它都会重新创建popup.html的整个ui，而我希望持久化ui的状态，因为它可能与