CODEWITHSUNDEEP
javascripthtmlgoogle-chrome-extension
Amila
Amila

Reputation: 2819

Show a chrome popup window with the address bar using an extension

I have a chrome extension and its popup.html has a link to a oauth/openid login page. To be exact to a page like this

I need this login page to be opened in a popup browser window with only an address bar. There should not be any other tool/menu bars. I tried window.open chrome.windows.create and window.showModalDialog methods.

All of them create a popup tab the way I wanted but none shows the address bar no matter what. When the popup.html is directly browsed via the browser, it shows the address bar, when the link is clicked. But not when the popup is loaded through the extension.

Since this page shows an oauth/openid login page, it is absolutely imperative that the user sees the address of the current page shown in the popup. No one would supply their facebook/google credentials to a page that does not have the address bar.

Any help is really appriciated.

Upvotes: 2

Views: 4283

Answers (2)

PAEz
PAEz

Reputation: 8542

I had a look around and it seems this is a known bug....
http://code.google.com/p/chromium/issues/detail?id=108875&q=popup%20bar&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary
You should star that for future updates and I think you should probably comment on your situation aswell.

The only way you could get the popup you want from your extensions code is to open a tab, get it to open the popup and then close the tab.....far from ideal.
But incase thats good enough for you here's some sample code....

manifest.json 

{
  "name": "Popup with adresse bar",
  "version": "1.0",
  "permissions": [
    "tabs", "<all_urls>"
  ],
  "browser_action": {
      "default_title": "Popup with adresse bar.",
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },
  "manifest_version" : 2
}

popup.html 

<!doctype html>
<html>
  <head>
    <script src="popup.js"></script>
  </head>
  <body>
    <a id='clicky' href='#'>clicky</a>
  </body>
</html>

popup.js 

clicky = function() {
    chrome.tabs.create({
        url: 'open.html#' + 'http://www.google.com',
        active: false
    });
}
onload = function() {
    document.querySelector('#clicky').onclick = clicky;
}
window.onload = onload;

open.html 

<script src='open.js'></script>

open.js 

window.close();
window.open(window.location.hash.substr(1), '…', '…');

Upvotes: 5

Richard Dev
Richard Dev

Reputation: 1170

Ok I am going to give this question a try. I understand what you are talking about with the address bar being hidden. For instance, my rem-i-con extension. If the user hasn't registered it will open a new tab, that will then ask them to create a account or login. But the address bar is blank.

However, in my popup.html file, I have a few links that do open a new tab with the address shown in the window. I understand you want a model type window but I am not sure that can be done. Here is something you can try.

Have a regular link asdd

When clicked you can have listener that watches the tab that has just been opened. This you could do easily by scanning the active tabs.

Then once the tab is closed, you could then have your popup.html file reload. You will need to use a background.html file for this.

If this works, then you could just automate the tag click.

Upvotes: 2

Related Questions