如何在Chrome扩展程序中显示弹出窗口？

Question

我需要在Chrome扩展中显示一个弹出窗口。目前，当单击扩展图标时，弹出窗口会显示在新窗口中。

我需要的是，当我点击扩展时，应该在扩展图标下方看到一个弹出窗口。就像 this（请检查此链接中的弹出窗口）。

我的弹出窗口（userinfo.html）要求输入用户名和密码进行登录。当用户输入用户名和密码并登录后，弹出窗口应关闭。当用户再次单击扩展图标时，它应导航到一个网站。我该怎么做？ 这是我的background.js

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

以这种方式展示我的弹出窗口。当用户在安装后第一次单击图标时，弹出窗口会出现。否则，它会导航到一个网站。现在我的问题是，当我只单击两次图标时，弹出窗口就会出现。第二个问题是，在我输入用户名和密码并单击登录后，弹出窗口关闭，这很好。当我再次单击图标时，实际上应该导航到网站，但在我的代码中它又显示了弹出窗口。当我重新加载扩展程序时，它可以正确工作。为什么会这样？请帮助我。 有一个名为userinfo.html的文件，应该显示为弹出窗口。我该怎么做呢？请帮助我。

- user3081557

---

顺便问一下，为什么你定义了两次 browser_action？ - zambrey

当我定义两次时，我得到了我想要的结果，这就是为什么。 - user3081557

请不要改变问题本身。回答原始问题的人将毫无理由地显得愚蠢。 - zambrey

Answer 1

在浏览器操作中，您应该包括default_popup值，该值指向要呈现为弹出窗口的HTML文件。在您的情况下，它是userinfo.html。

"browser_action": 
     {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
    }

更多信息请参考：https://developer.chrome.com/docs/extensions/reference/browserAction/

- zambrey

---

我已经放置了你的代码，但是我需要的是，当用户第一次点击扩展图标时，应该看到弹出窗口询问用户名和密码。当他输入用户名和密码并点击登录后，弹出窗口应该关闭。下一次当他点击图标时，它应该导航到一个网站。我该怎么做？请帮帮我。 - user3081557

你应该在我提供的页面中查看setPopup方法和chrome.browserAction.onClicked.addListener。一旦完成弹出窗口中的登录，从browserAction移除弹出窗口并保留监听器在代码中，其中包含打开新标签并跳转到你的网站的代码。 - zambrey

是的，我正試圖設置彈出方法。但問題是，即使用戶登錄，然後再次單擊擴展圖標，彈出窗口仍會顯示。一旦他在彈出窗口中輸入名稱和密碼並單擊登錄，則彈出窗口就不應再顯示。 - user3081557