Question

您好我需要在安装扩展程序时显示一次弹出窗口，询问用户名和登录按钮。当用户第一次点击扩展程序图标时，会出现一个弹出窗口，询问用户名。当用户正确输入他的用户名，然后点击登录，弹出窗口应该关闭，然后当用户再次点击扩展图标时，它应该导航到一个网站。我做的是当用户输入他的用户名时，它存储在localStorage，每当用户点击扩展图标时，它会检查localstorage中是否有用户名。如果是，那么它应该导航到网站，否则它应该再次显示弹出窗口。这怎么办？请帮帮我。这是我的background.js

 chrome.browserAction.onClicked.addListener(function(tab) {
 if(!localStorage.username){
    chrome.browserAction.setPopup({
    popup: "userinfo.html"
   }); 
   }
else{//navigate to website }

}）;

这里的问题是，当用户第一次点击图标时，弹出窗口，用户输入他的名字并登录。下次点击它时，下次再显示弹出窗口.IT不导航到网站。直到我重新加载扩展程序，它只显示onclick事件的弹出窗口。有人请帮助我。

Answer 1

您可以为chrome.browserAction.onClicked事件注册一个侦听器，以检查用户名是否存储在localStorage中，并且：

如果有，请导航到网站。
如果不存在，请导航至userinfo.html（在新标签页中或打开新的popu窗口（使用 chrome.windows.create() ），这样您就可以定位其位置和大小）。
在userinfo.html页面中提交用户名和密码时，您可以将其存储在localStorage 和中，然后将用户登录。

E.g：

在 background.js ：

var myWebsite = 'https://your.domain.goes/here';
var myUserinfo = chrome.extension.getURL('userinfo.html');
chrome.browserAction.onClicked.addListener(function(tab) {
    if (localStorage.username) {
        /* Navigate to website */
        chrome.tabs.create({ url: myWebsite });
    } else {
        /* Navigate to `userifo.html` */
        chrome.tabs.create({ url: myUserinfo });
    }
});

chrome.runtime.onMessage.addListener(function(msg, sender) {
    if ((msg.action === 'saveCredentials')
            && msg.user && msg.pass) {

        /* Store the credentials in localStorage */
        localStorage.username = user;
        localStorage.password = pass;

        /* For a better user-experience, let's
         * navigate the user to the website right away */
        chrome.tabs.updated(sender.tab.id, { url: myWebsite });
    }
});

在 userinfo.html 的JS中：

// ...once the userinfo is "submitted"
var user = ...;
var pass = ...;
chrome.runtime.sendMessage({
    action: 'saveCredentials',
    user: user,
    pass: pass
});

如何在OnClick事件的单一条件下显示chrome扩展中的弹出窗口？

1 个答案: