1

I have a Chrome extension should allow the users to log in with Google via a popup because it won't display in the iframe. I was doing this with window.open() which worked fine except that I could not close the pop-up after the user logged in.

I have been trying with no success to use chrome.windows.create instead of window.open in hopes that I will be able to close the popup once I detect via the URL that they have successfully logged in.

In popup_google.js I have simple function:

function login(login_url) {
    // var win = window.open(login_url, "windowname1", 'width=800, height=600');
    chrome.windows.create({'url': 'http://stackoverflow.com/', 'type': 'popup'}, function(window) { });
}

The login function is called via "onclick" something like this:

<a href='#' onClick='login("https://accounts.google.com/o/oauth2/auth?response_type=code&redirect_uri=http%3A%2F%2Fdev.sbceoportal.org%2Fcastest%2Fwp-login.php&client_id=191567976061-9uksb59gedrtlsmoeo1fouov94370j96.apps.googleusercontent.com&scope=openid+email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&access_type=online&approval_prompt=auto&state=d96bdddc11%257Chttp%253A%252F%252Fdev.sbceoportal.org%252Fcastest%252Fportal%252F");' id="loginText"> Click here to login </a>

I can't for the life of me get the chrome.windows.create to open a new popup window, even in the simplest form you see here, but window.open works like a charm (I just can't seem to get it closed in Chrome).

wOxxOm
  • 65,848
  • 11
  • 132
  • 136
  • 1
    Did you add the tabs permission to the manifest ? – DannyZB Oct 27 '15 at 17:02
  • 1
    Don't use inline js handlers in html if it is inside your extension's popup page. Move it to a separate `popup.js` file and load it in `popup.html` with `` before the closing `

    ` tag.

    – wOxxOm Oct 27 '15 at 17:08
  • Okay, I was able to add tab permissions and added: – Kristen Walker Oct 27 '15 at 17:31
  • "optional_permissions": ["tabs"], "permissions": ["tabs"], I still can't get this line to work: chrome.windows.create({'url': 'http://stackoverflow.com/', 'type': 'popup'}, function(window) { }); – Kristen Walker Oct 27 '15 at 17:37

1 Answers1

2

It looks like your popup_google.js file is a content script. Content scripts cannot use chrome.*APIs except for a few exceptions. This is why you can't use the chrome.window API at all. On a similar note, adding "tabs" to the permissions utilizes the chrome.Tabs API which is not one of the few allowed chrome APIs for content scripts. Try using the matches: [/url pattern/] field to limit the urls in which your content script will run, as shown in the content script API.

Content scripts have full access to the DOM but not to any variables or functions defined by the web pages. While you can create your own popup using window.open, the content script has no way to be sure it is referencing the correct 'window' variable when you wish to call window.close() because the script sees two windows: the one it created using window.open() and the window loaded on the page's DOM.

Try looking at Chrome's examples using popups and modify them to achieve your desired functionality. Or check out other great SO explanations to develop a working popup login.

Community
  • 1
  • 1
GracefulCode
  • 141
  • 7
  • Thanks for your response, I read more about content and background scripts. I am looking at a few examples that seem relevant to what I want to do in light of all of this - define a listener that can detect when the Google login link is clicked. Unfortunately when I install the example code of both examples I found, it no longer works. These are the ones I checked out: http://stackoverflow.com/questions/11996053/detect-a-button-click-in-the-browser-action-form-of-a-google-chrome-extension and http://stackoverflow.com/questions/26390322/clicking-an-element-on-a-page-through-chrome-extension – Kristen Walker Oct 27 '15 at 18:50
  • Do you know what these examples are doing wrong or what needs to be updated/changed? Thanks! – Kristen Walker Oct 27 '15 at 18:51
  • Ugh, not seeing any errors in one and I see an error about a property of one of the functions not being defined "content_script.js:6 Uncaught TypeError: Cannot read property 'click' of undefined" in this one: http://stackoverflow.com/questions/26390322/clicking-an-element-on-a-page-through-chrome-extension You can see a screencast of how I am looking for errors here. Like I said, I am new to this, so maybe I am not looking in the right place. http://screencast.com/t/1DyF0K7rewD Thanks! – Kristen Walker Oct 27 '15 at 21:33
  • I can't look at your screencast until tonight. But it sounds like you are looking at the developer tools console in Chrome (accessible by pressing F12), which is the correct way to check for errors. – GracefulCode Oct 28 '15 at 14:36
  • Sounds like the functionality you are trying to build is more complex than one content script can handle. I think you'll need to use an event page (i.e. a background page with persistence: false) and message passing in addition to the content script, since all JS execution in the content script will stop once you close the popup. Follow this much simpler example: http://stackoverflow.com/a/21340548/5463701 I did it myself without errors. From there, I think you'll be able to build out the functionality you need for the popup login screen you are making. – GracefulCode Oct 28 '15 at 14:45
  • Wow, this is crazy frustrating! I was excited to try the simple example that worked for you, but it does nothing for me, and I even tried putting in lots of statements to the console and alerts and I can't get one to fire. Here is a screencast showing how nothing happens: http://screencast.com/t/kdGJX3X3gyU I will keep looking for an example I can get to work. Thanks! – Kristen Walker Oct 28 '15 at 16:31
  • I got a little further along in this and opened a new question that shows the current code. See http://stackoverflow.com/questions/33484699/chrome-extension-that-opens-google-login-and-closes-it-after-user-login-detected Thanks! – Kristen Walker Nov 02 '15 at 18:47