Google chrome extension 如何在chrome扩展中只显示一次弹出窗口？_Google Chrome Extension_Popupwindow

Google chrome extension 如何在chrome扩展中只显示一次弹出窗口？

google-chrome-extension

Google chrome extension 如何在chrome扩展中只显示一次弹出窗口？,google-chrome-extension,popupwindow,Google Chrome Extension,Popupwindow,嗨，我需要在chrome扩展中显示一个弹出窗口。我已将我的网站设置为chrome扩展。以下是用例：当用户安装扩展并单击扩展图标时，应该会显示一个弹出窗口，询问他的用户名当用户输入他的名字并登录时，弹出窗口关闭此名称存储在本地存储器中当用户下次单击扩展图标时，它会检查其名称是否存储在localstorage中，如果没有，则应再次显示弹出窗口，否则应导航到我的网站现在我的问题是当我只在图标上单击两次时，才会出现弹出窗口输入名称并单击登录后，弹出窗口关闭，这很好当我再次单击图标时，实

嗨，我需要在chrome扩展中显示一个弹出窗口。我已将我的网站设置为chrome扩展。以下是用例：

当用户安装扩展并单击扩展图标时，应该会显示一个弹出窗口，询问他的用户名

当用户输入他的名字并登录时，弹出窗口关闭

此名称存储在

本地存储器中
当用户下次单击扩展图标时，它会检查其名称是否存储在localstorage
中，如果没有，则应再次显示弹出窗口，否则应导航到我的网站
现在我的问题是
当我只在图标上单击两次时，才会出现弹出窗口
输入名称并单击登录后，弹出窗口关闭，这很好
当我再次单击图标时，实际上它应该导航到该网站，但在我的代码中它再次显示弹出窗口
当我重新加载扩展时，它工作正常
请帮帮我。
这是我的background.js
chrome.browserAction.onClicked.addListener(function(tab) {
if(!localStorage.username){
chrome.browserAction.setPopup({
    popup: "userinfo.html"
}); }
  else{
   //navigate to website
     });

这是我的userinfo.html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="test.js">
   </script>       
  </head>
   <body>
   <font face="sans-serif"><b>Enter your Email ID</b></font><br><br>
    <form id="userinfo">
        <table><tr><td>
                <font face="sans-serif"><label for="user">Email</label></font></td><td>:                    </td>
                <td><input type="text" id="user" /></td><span id="semail"></span>
        </table><br><br>
       <font face="sans-serif"><input type="submit" id="login" value="Log In"/></font>

    </form>
    </body>
  </html>

任何人请帮助我
让我们一个接一个地解决你的问题
1.当我仅在图标上单击两次时，才会出现弹出窗口
当您单击扩展图标时，您的browserAction.onClicked
处理程序将被执行，它只是设置弹出窗口。它没有打开它。您必须再次单击扩展图标以打开弹出窗口。这就是为什么你必须点击两次
2.输入名称并单击登录后，弹出窗口关闭，这很好
这是因为您正在重定向到关闭扩展弹出窗口的新页面
3.当我再次点击图标时，实际上它应该导航到网站，但在我的代码中它再次显示弹出窗口
由于您已经设置了扩展点击弹出窗口，它覆盖了chrome.browserAction.onClick
处理程序，这就是您无法导航到网站的原因
4.重新加载扩展时，它工作正常
这是因为重新加载后，您的chrome.browserAction.onClick
不会被弹出窗口覆盖，并且由于登录凭据存在于localstorage
中，因此您的代码不会覆盖它
解决方案1
在background script
中，检查凭据是否存储在localstorage
中，然后不要设置弹出窗口，否则设置弹出窗口
添加处理程序chrome.browserAction.onClick

以始终导航到您的网站。您知道，如果弹出窗口打开，您的处理程序将不会执行

在localstorage中存储凭据时，如果凭据正确，请删除弹出窗口

要删除弹出窗口，您可以尝试

chrome.browserAction.setPopup（{popup:}）


从
再次单击
单击浏览器操作图标时激发。如果浏览器操作有弹出窗口，则不会触发此事件
解决方案2
弹出窗口具有与后台脚本相同的权限。因此，不要定义chrome.browserAction.onClicked
事件，只需在弹出脚本中编写代码即可
检查localstorage，如果存在凭据，则创建一个新选项卡，打开页面并使用窗口关闭弹出窗口。关闭（）
否则不要关闭弹出窗口
附言：我没有试过。只是给你一个想法。
让我们一个接一个地解决你的问题
1.当我仅在图标上单击两次时，才会出现弹出窗口
当您单击扩展图标时，您的browserAction.onClicked
处理程序将被执行，它只是设置弹出窗口。它没有打开它。您必须再次单击扩展图标以打开弹出窗口。这就是为什么你必须点击两次
2.输入名称并单击登录后，弹出窗口关闭，这很好
这是因为您正在重定向到关闭扩展弹出窗口的新页面
3.当我再次点击图标时，实际上它应该导航到网站，但在我的代码中它再次显示弹出窗口
由于您已经设置了扩展点击弹出窗口，它覆盖了chrome.browserAction.onClick
处理程序，这就是您无法导航到网站的原因
4.重新加载扩展时，它工作正常
这是因为重新加载后，您的chrome.browserAction.onClick
不会被弹出窗口覆盖，并且由于登录凭据存在于localstorage
中，因此您的代码不会覆盖它
解决方案1
在background script
中，检查凭据是否存储在localstorage
中，然后不要设置弹出窗口，否则设置弹出窗口

添加处理程序chrome.browserAction.onClick以始终导航到您的网站。您知道，如果弹出窗口打开，您的处理程序将不会执行

在localstorage中存储凭据时，如果凭据正确，请删除弹出窗口

要删除弹出窗口，您可以尝试

chrome.browserAction.setPopup（{popup:}）


从
再次单击
单击浏览器操作图标时激发。如果浏览器操作有弹出窗口，则不会触发此事件
解决方案2
弹出窗口具有与后台脚本相同的权限。因此，不要定义chrome.browserAction.onClicked
事件，只需在弹出脚本中编写代码即可
检查localstorage，如果存在凭据，则创建一个新选项卡，打开页面并使用窗口关闭弹出窗口。关闭（）
否则不要关闭弹出窗口
附言：我没有试过。只是给你一个想法。如果可以的话，你能为你的上述解释提供代码吗？请帮我理解代码中的问题和我给出的理由吗？是的。当然，正如你所说，我添加了chrome.browserAction.onClick以始终导航到我的网站。但当我单击图标时，会打开多个选项卡。我不知道如何编写代码。我的另一个疑问是，是否可以设置
  window.addEventListener('DOMContentLoaded', function() {
  var user  = document.querySelector('input#user');

   var form = document.querySelector('form#userinfo');

  form.addEventListener('submit', function(evt) {     
    evt.preventDefault();
    var userStr = user.value; 
    chrome.runtime.getBackgroundPage(function(bgPage) {
     bgPage.login(userStr/*,pwdStr*/); });
    window.close();

   }); 

   });