How to keep Google Chrome Extension popup open? - javascript

If I open my extension popup then I open another window or tab following the popup does not stay open if I return to it.
Is there a way to force it so the popup stays open?

As a user, you currently cannot force the the popup to stay open. That is a UI decision the UI team made. If you want to want to force a setup, you can have other way to show this by changing the popup icon, open a new tab when it requests, or new popup view for registration.
As a developer, inspect the popup, and it will stay open.

You cannot stop the Chrome pop-up from closing, unless you're in developer mode. You could consider this alternative, though:
Launching a normal pop-up instead:
In your popup.html file, load a Javascript file that runs this:
var popupWindow = window.open(
chrome.extension.getURL("normal_popup.html"),
"exampleName",
"width=400,height=400"
);
window.close(); // close the Chrome extension pop-up
This will open the file normal_popup.html in your extension in a normal pop-up window, which won't close when it loses focus. Because the name parameter is the same, the pop-up window will get reused if the user launches popup.html again.

In an answer to a FAQ here: https://developer.chrome.com/docs/extensions/mv3/faq/#faq-persist-popups
Popups automatically close when the user focuses on some portion of the browser outside of the popup. There is no way to keep the popup open after the user has clicked away.

As others have said, this is a deliberate limitation of popup UI.
Instead, you could inject some HTML into the page which loads the content you want in your popup into an element which hovers over the existing page. You will have to implement the close functionality yourself, but it will persist.
Have a look at e.g. how keyframes.app has done it: https://github.com/mitchas/Keyframes.app/blob/master/Keyframes.app%20(Extension)/src/inject/ui.js

If you enable panels at "chrome://flags/#enable-panels" you can use something like:
chrome.windows.create({
url:"popup.html",
type:"panel",
width:300,
height:200
});
to open a panel window instead which will stay on top all the time as long as you don't move it from the bottom of the screen.

Best way to workaround this is to :
Right-Click inside the popup
Click: Inspect
Or just press CTRL+Shift+I
A new window will open with the Developer Tools... just keep that window open and the popup will never close.

This answer to How do I prevent Chrome developer tools from closing when the current browser window closes? what very helpful in my case:
Not a perfect solution, but you can add breakpoints on the events Window.close and unload by turning on the checkboxes at:
Developer tools -> "Sources" tab -> Event Listener Breakpoints -> Window -> close
And
Event Listener Breakpoints -> Load -> unload
Try to mark both and see which one works best for you

Related

Closing a tab open in Chrome Extension before main window closes

I'm writing a Chrome Extension that opens an external (detached) window that is meant to be open for the rest of the session.
I'd like to get an event when the main window (with many tabs) is closing so that I close my tab before the main window. Otherwise, the tab will remain open and the user needs to close it manually. Thus, Chrome will remember it as the next time Chrome will open it instead of the other tabs that were in the main window. Obviously, this is a bad user experience.
The background script doesn't get any event when the main window closes.
Any idea how I could get this?

How can I open a pop-up window without it being blocked?

I haven't found a single answer able to tell me what's the right way to open a popup.
Times have changed, and popups have been mostly replaced with fancybox-like boxes. However, there are still times when popups are needed.
For those cases, I don't want my popup to be blocked by the browsers.
What's the right way to open a popup without it being blocked? Even if it opens a new tab in the browser. I just want my popup to be open, and have control of it from the parent or vice versa.
Popup blockers will block any popup, unless it is opened because of an user action.
If the user clicks on a link, and a popup is opened in the click listener of that link, the popup blocker knows the user want to open something and will not (or should not) block the popup.
What you cannot do:
open a popup when the page is opened or closed
open a popup after a certain interval
open a popup after something asynchronous happens
What you can do:
open a popup in the on click listener
using target="_blank" in a anchor tag
You can access both windows with JavaScript variables:
if you use window.open, the parent can have a reference to the popup by assigning the result of window.open to a variable. Check out this article at W3Schools.
If the popup needs to have access to the window who has opened it, you can use window.opener. Check out this question.
try this, it works for me
$('#myButton').click(function () {
var redirectWindow = window.open('http://google.com', '_blank');
redirectWindow.location;
});
Js fiddle for this is here https://jsfiddle.net/safeeronline/70kdacL4/2/
if you want to open new tab after ajax call see this fiddle http://jsfiddle.net/safeeronline/70kdacL4/1/

Close a Chrome extension popup by clicking the browser action icon again

I'm developing a Chrome extension and I wanted to know if it is possible to close a popup by simply clicking again the icon that lets you open the popup: I tried anything but it looks like you must click elsewhere to close it. The docs states the onClicked event is:
Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup (http://developer.chrome.com/extensions/browserAction.html#popups).
Thanks in advance.
[UPDATE] I tried the following and it half (!) works:
1. in popup.html I link popup.js;
2. popup.js reads the value of a variable contained in background.js;
var currentStatus = chrome.extension.getBackgroundPage().open;
if(currentStatus==0){
chrome.extension.getBackgroundPage().open=1;
}else{
chrome.extension.getBackgroundPage().open=0;
window.close();
}
What happens: the first click opens the app, the second closes it, BUT it remains a micro popup with no content upon the icon. If I remove that, I reached my goal.
The onClicked event is called if your extension's browser action does not define default_popup in the manifest. That note from the documentation isn't about whether the popup is currently open.
If the manifest defines default_popup then clicking the button again closes and reopens the plugin. The mousedown closes and the mouseup opens. (So clicking on the button and dragging away and releasing the mouse does close the popup, not that anyone should do this.)
I recommend setting default_popup and making a button in the html for the popup that closes the popup with window.close;, or find a point in your popup's use case where closing makes sense.
Well It has been a long time, and the issue/bug still persists on Chrome browsers. I've found a workaround, it's not great, but it does what I need - closes the window on a second icon click. Here's what I did in the popup javascript file:
if(localStorage.getItem('firstClick')==='true'){
localStorage.setItem('firstClick', 'false');
window.close();
}
else {
localStorage.removeItem('firstClick');
localStorage.set('firstClick', 'true')
}

How To Close Popup Window Automatically When Its Not In Use?

I want a popup window to close automatically as soon as the user minimizes the window. My code is as follows:
<a href="#" onclick="Popup=window.open('fb.html','Popup','toolbar=no,location=no,status=yes,menubar=no,scrollbars=no,resizable=no,width=620,height=400,left=230,top=23'); return false;">
any ideas?
There's no event that triggers when the window is minimized. The best you can do is to check the height and width at a set interval. Closing the browser window is trivial Popup.close() should do it.
See a post about programmatically opening and closing pop-ups.
For browser windows or tabs, I believe that you need the user to click a confirmation box (the confirmation is created by the browser as a security feature).
Added Think about your UX (User Experience) -- it is not usual for a user to think about minimizing a window. Perhaps you should provide a "close" button.
Also, investigate the various libraries such as Boostrap modal popups. They already have worked on the UX issues.

Keep Chrome extension popup open while navigating to a new page

I'm developing a Google Chrome extension with a popup (it's a browser action), and it changes the location of the page, which makes the popup disappear. How can I make it stay between page reloads?
You can't. browserAction popups are closed on any activity outside of the popup. You could potentially use Desktop Notifications though.
You'll need to use Background Page, and pull information from it every time you load the popup. Background pages run whether or your extension is currently being used or not.
Not sure if this helps, but from the FAQ:
Can extensions keep popups open after the user clicks away from them?
No, popups automatically close when the user focuses on some portion of the browser outside of the popup. There is no way to keep the popup open after the user has clicked away.
I had to implement a workaround for this as well. In my case, I was trying to use auth0's loginWithPopup. When the popup closed, it returned focus to the chrome window instead of the extension which caused the extension to close before authorization fully completed. I worked around it by opening a new window which acts as a barrier of sorts to prevent chrome's focus from going back to the window the extension was opened from. Anyway, just wanted to put it out there in case it helps someone in the future.

Categories