Question

您好我需要在Chrome扩展程序中显示弹出窗口。我已将我的网站设置为chrome扩展程序。以下是用例：

当用户安装扩展程序并点击扩展程序图标时，应显示弹出询问用户名。
当用户输入他的姓名并登录时，弹出窗口将关闭。
此名称存储在local storage中。
当用户下次点击分机图标时，它会检查他的名字是否存储在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>

这是我的test.js

  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();

   }); 

   });

任何人请帮助我

Answer 1

让我们一个接一个地解决你的问题。

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: ""});

来自chrome.broswerAction API

<强> onClicked 单击浏览器操作图标时触发。如果浏览器操作有弹出窗口，则不会触发此事件。

溶液2

Popup具有相同的权限，后台人员具有这些权限。因此，不要定义chrome.browserAction.onClicked事件，只需在弹出脚本中编写代码。
检查本地存储，如果存在凭据，则创建新选项卡并打开页面并使用window.close()
否则请勿关闭弹出窗口。

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

1 个答案:

解决方法1

溶液2