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

时间:2013-12-11 04:39:31

标签: google-chrome-extension popupwindow

我需要在Chrome扩展程序中弹出一个弹出窗口。当点击扩展图标时,弹出窗口会显示在新窗口中。我需要的是当我点击扩展程序时,应该会在下方看到一个弹出窗口扩展图标。就像这样http://developer.chrome.com/extensions/getstarted.html.(please检查此链接中的弹出窗口。)我弹出窗口(userinfo.html)要求用户名和密码登录。当用户同时输入用户名和密码,并登录时,弹出窗口应该关闭,当用户再次点击扩展图标时,它应该导航到一个网站。我怎样才能做到这一点? 这是我的background.js

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

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

2 个答案:

答案 0 :(得分:2)

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

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

此处提供更多信息:http://developer.chrome.com/extensions/browserAction.html

答案 1 :(得分:0)

您要求的是弹出窗口应该是由服务器呈现的页面,该服务器会跟踪您的登录cookie。在这种情况下,您可能不希望将browser_action用于本地弹出窗口html。相反,在background.js中你可以这样做:

chrome.browserAction.onClicked.addListener( function(tab) { 
  chrome.windows.create({url: 'http://yourwebsite.com/page'});
});

在服务器端,yourwebsite.com/page是检查用户是否已登录的页面。如果没有,则重定向到注册页面。如果登录,则将用户带到一些有用的页面

windows.create还允许您相对于浏览器窗口定位窗口

此处有更多详情:http://developer.chrome.com/extensions/windows.html