Keep Popup Open when Opening a new Page - javascript

I have the following code to introduce my Chrome Extension.
// detect if this is the first time running
var first_run = false;
if (!localStorage['ran_before']) {
first_run = true;
localStorage['ran_before'] = '1';
}
// if not, start the intro() script
if (first_run) intro();
// intro script
function intro() {
window.open("intro/index.html", '_blank');
}
But sadly, when I click the extension, it doesn't open the popup.html but just opens the intro page.. it needs to keep the popup.html open and I'm sure there is a way to do this. I want to open them both at the same time.
What is the best way to do this?

the method you are using is valid and should work, but you should probably
just use the onInstalled event for consistency:
chrome.runtime.onInstalled.addListener(function(info){
if(info.reason == "install"){
console.log("Installed!");
}else if(info.reason == "update"){
console.log("Updated!");
}
});
It doesn't require new permissions, and will keep your install code clearly separated from the rest of your code.

While Marc Guiselin's answer is excellent, it may be useful to know how to open a tab without closing a popup.
You could open the tab in the background, that way it won't close your popup.
chrome.tabs.create({
url: chrome.runtime.getURL("intro/index.html"),
active: false
});
In general, you should avoid using window.open in extensions and use chrome.tabs and chrome.windows API instead.

Related

Javascript 'alert' function inside catch block only works when dev tools are opened in chrome

Hello StackOverflow community!
I've encountered a very weird problem and couldn't find any useful information on how to solve it.
Somehow, a piece of javascript code works only when the dev tools window is opened (docked or as a separate window) in google chrome.
The original problem: Due to our application structure, we need to open multiple popups automatically when a page is served. Since the popups are NOT opened through a direct user interaction (like onclick), modern browsers would automatically block these popups. Because of the large amount of code that would need to be refactored to avoid this, our solution was:
check if the browser is blocking some popups.
if so: inform the user about this and suggest to turn off their browser's popup blocking function for
our website (by adding it to the exception list for example).
Not a very elegant solution I know, but there was no other way so please don't comment on how to do this differently.
The javascript code:
let popupBlockingErrorShown = false;
this.OpenWindow = function (url, name, args) {
var i = Popups.length; //Popups is an array defined as a global variable that keeps track of all
//opened popup windows
Popups[i] = window.open(url, name, args);
try {
Popups[i].focus();
} catch (e) {
if (!popupBlockingErrorShown) {
alert("very user friendly message explaining to turn of popup blocking");
popupBlockingErrorShown = true;
}
};
}
The windows have to be popups. The popupBlockingErrorShown variable is to prevent having an alert message for each popup.
Works fine in firefox. But in google chrome there is this behaviour:
without dev tools open: the first popup opens normally, the others are blocked, there is no alert message.
with dev tools open: the first popup opens but gets 'stuck' on loading (it's an empty page). The alert message shows normally.
Keeping the browser-window open and simply switching between dev tools opened or closed gives the same behaviour.
Anyone can help me? Much appreciated!
This is my first stackoverflow question and I'm still very new to programming, I have a bit over a year of experience. Remarks on my 'asking questions'-skills are welcome.
Ok thanks to wOxxOm's comment I've found a workaround. So the problem was related to what window was focused on. I've added a piece of code in the catch-block to show an alert on a successfully opened popup (if there is one) :
try {
Popups[i].focus();
} catch (e) {
if (!popupBlockingErrorShown) {
if (Popups[i - 1]) { //there is a previous popup and it's been focused on.
Popups[i - 1].alert(UIMessages[33]); //show alert on opened popup.
popupBlockingErrorShown = true;
}
else {
alert(UIMessages[33]);
popupBlockingErrorShown = true;
}
}
}
Thanks #wOxxOm !

Open link in new tab does not work in IE10

I am using window.open in jquery to open a link in a new tab. Works fine for me in chrome/safari/firefox, but it does not work in IE10.
$('.div').click(function() {
$(this).target = "_blank";
window.open('http://url/15M');
return false;
});
How can I fix this?
The browser itself will decide when it's appropriate to open a new tab versus a new window, though you can influence its decision via browser settings. That being said, there are often times certain things we can do to encourage one way over the other. In this particular instance, I was able to get IE10 to open a window by passing along width and height values:
$("button").on("click", function () {
window.open("http://msdn.microsoft.com", "popup", "width=640,height=480");
});
Keep in mind that you ultimately have no control over whether something opens in a new tab, or a new window. That is entirely up to the user's machine; so don't bake any user experience dependencies into this assumption.
Try following:
$('.div').click(function() {
window.open('http://url/15M', '_blank');
return false;
});

Script to block popups

AdBlock sometimes fails to block popups, so using Greasemonkey I want to write my own popup blocker using jQuery.
Is there a way I can intercept the clicks and detect if it's going to open a popup?
$('.popupLauncher').each(function(){
if( /* $(this) will open a popup */ ){
return false;
}
});
With what can I replace /* $(this) will open a popup */ ?
How do you open a popup using javascript ?
window.open(url, etc, etc, etc);
So in theory you can re-write the window.open function to do something else rather than opening a popup.
window.open = null;
However it might break the page scripts if window.open is undefined when being called.
Therefore I think the best approach would be:
window.open = function(){
return;
}
I haven't tested this code, but as i said, in theory it should work.

JavaScript with multiple popups

I am trying to open a new pop up for my application, and each popup has a window name. Suppose if the user closes the popup he can open the popup with same name, else the existing pop up should be displayed.
I wrote the below code to do that, but this is not opening a popup if the user closes it else its opening a new popup. Please suggest how can go with this.
d='javascript:if(document.getElementsByTagName("*").length>0&&document.getElementsByTagName("body")[0].innerHTML!=""&&!confirm("You are about to navigate to home page Do you want to do that ? "))
{opener.display2WindowHelp();}
else
{window.location.replace("${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}'+d+'");
}';
b= window.open(d,"_spor_window_"+a+window.location.hostname.replace(/\./g,""),"menubar=no,scrollbars=yes,height="+screen.availHeight+",width="+screen.availWidth+",left=0,top=0,resizable=yes,toolbar=no,location=no,status=no");
If you need to open any popups, there are likely better ways to meet your requirements. If you are opening several popups, then your design needs a thorough review (consider your workflow and whether a tabbed interface is a better option).
The usual strategy is to save a reference to each window, then check if it's still open and available for re-use later, e.g.
var popWin;
function openWindow(url) {
var windowName = '...';
var features = '...';
if (!popWin || popWin.closed) {
popWin = window.open(url, windowName, features);
} else {
popWin.location.href = url;
}
}
If you want to have multiple windows open, then you will need a strategy for tracking which one you want to load a particular resource into.
You may find the HTML5 window (creating and navigating contexts by name) and MDN window.open documentation useful.

Chrome not supporting my javascript

I just want, when a user comes to my site and closes the window, then I want to know the reason for leaving from my site.
So I'm sending the user to a survey page, using the following script.
It works in every browser but not in Chrome
<script type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit() {
if (location.href.indexOf("index.php") != -1)
{
location.href = "http://www.test.com/survey.php";
return "Press 'cancel to go 'survey'";
}
}
</script>
Have you tried to use window.location = ("http://www.test.com/survey.php"); or window.open ("http://www.test.com/survey.php"); instead? That may be easier to do.
You can also do window.open ("http://www.test.com/survey.php", '_newtab'); This will make users less upset off when they are forced to redirect after leaving, because it will be in a new tab.
Well, sometimes there is a good reason for such a code user310850 is quoting
not all websites are in Web, some of them are internal corporate websites
Some if not most of big companies still use IE 6 as standard browser
I would use unload event handler. I assume jquery is good
$(window).unload(function() {
//your code here
});

Categories