I want to show popup by click, but only if condition is false.
After click to extension icon background js searchig for tab with current name. If tab found background js continues working. If not found - i want to show popup with instructions. Can`t understand how to just show popup in this case.
I can set popup by browserAction.setPopup(), but popup will be displayed only after next clicks.
I just want to show my popup one time.
It is definitely posible, I've seen this behavior on other extension.
var pcTabs; // tabs array
chrome.browserAction.onClicked.addListener(buttonClick);
function buttonClick() {
// getting tabs...
if(pcTabs.length != 0){
// working with finded tabs
} else{ // tabs not found
// show popup.html here. this is the question
}
}
upd.
This is my background.js. All code also in repository.
How to replace alerts to popups?
In short: you can't do it the way you describe.
When a popup page is set, chrome.browserAction.onClicked won't fire, and the popup will show.
When a popup page is not set, your event listener will execute, but you cannot show a popup programmatically. The most you can do is to set a popup for the next click.
So, what to do with it?
1) You can do an ugly hack (kind of) described in Edwin's answer. Always show the popup, check the condition as soon as possible, message the background and execute window.close() if the condition is met.
Of course, it is ugly.
2) The proper way to do this would be updating the popup whenever the condition can potentially change. That is, whenever you add/remove data from pcTabs, you should set/unset the popup with chrome.browserAction.setPopup
// ... somewhere ...
pcTabs.push(/*...*/);
chrome.browserAction.setPopup({popup: ''});
// ... somewhere else ...
pcTabs.pop(/*...*/);
if(!pcTabs.length) chrome.browserAction.setPopup({popup: 'popup.html'});
chrome.browserAction.onClicked.addListener(function() {
// Assume condition is met, popup didn't show
});
3) The fancy way to do it is to use experimental JavaScript method, Array.observe, that is only supported in Chrome.
var pcTabs = [];
Array.observe(pcTabs, function(changes) {
changes.forEach(function(change) {
if(change.object.length) {
chrome.browserAction.setPopup({popup: ''});
} else {
chrome.browserAction.setPopup({popup: 'popup.html'});
}
});
});
Alright this is my code:
chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
if (!tabs[0].url.includes('google.com')) { //check if current tab is not google: if false show popup, you can just put an else at the end and do w.e with your popup
chrome.tabs.query({currentWindow: true, url: 'https://*.google.com/*'}, function(tabs) { //since current tab is not google query tabs with google
if (tabs.length) { //check if there are any pages with google
chrome.tabs.highlight({tabs: tabs[0].index}, function(w) {}); //this is what I chose to do idk what you want to do but you can write w.e here
} else {
chrome.tabs.create({url: 'https://google.com'}); //other wise no pages with google open one
}
});
};
});
Related
my pop up seems to show to my website visitors even if they've hidden the pop up or subscribed previously.
How can I change the following code to only show the pop up once?
setTimeout(function(){
var newsletterModal = $('#newsletterModal');
if (newsletterModal.length && typeof $.cookie('newsletter_modal') === 'undefined') {
if ($.cookie('age_verified') || !$('#verifyAgeModal').length) {
newsletterModal.foundation('open');
$.cookie('newsletter_modal', true, { path: '/' });
}
else {
verifyAgeModal.on('closed.zf.reveal', function() {
newsletterModal.foundation('open');
$.cookie('newsletter_modal', true, { path: '/' });
});
}
}
}, 20000);
I don't use the age verification facility, but I haven't tried removing it in case I opt to include age verification later on.
As a separate question, is there a way to distinguish between those who have hidden the pop up and those who have subscribed (with the aim of re-showing the pop up to non-subscribers a month or so later)?
I can do it by combining with ajax which will save the status of the dialog box in the database. On click of close button, perform ajax request to save view status as 1 or done. In the next loading check view status before displaying the modal.
How to identify the user who viewed the dialog box - save unique identifier in the cookie which will be used for as identifying browser log events.
I've been asked to have a pop-up when visitors leave the site asking them if they really want to leave. This pop-up will only show if their shopping cart has items in it.
I can easily limit the pop-up to when the cart has items, however the issue I'm having is that even clicking an internal link loads the pop-up - how can I have it so this only comes up when actually leaving the site.
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "some message about leaving";
}
</script>
If a link is clicked, it will tell you in e.target.activeElement. You can check if it's a link there:
window.onbeforeunload = confirmExit;
function confirmExit(e)
{
var $element = $(e.target.activeElement);
if ($element.prop("tagName") !== "A") {
return "some message about leaving";
}
}
Note: You can add additional conditions checking $element.attr("href") to make sure it displays the message for links that aren't your site.
Alright first of all: Don't do this. Please. It's super-annoying for users. Just make sure the shopping cart items are stored on the server or in a cookie so users can always go back to the site.
Looking at this related question: How can i get the destination url in javascript onbeforeunload event? it can't be done easily.
Instead of using onbeforeunload, either attach a click handler to external links on your site that shows the popup, or attach a click handler to all links that checks if the link is external or not.
Again, don't do this...
You could get the URL of a clicked link item, and check if it's on the same domain. Put this in an if not statement, with the current code inside.
you'll have to control it to enable and disable the behavior, something like this:
<script>
var beforeunload = function (event) {
var message = 'some message about leaving';
(event || window.event).returnValue = message; // Gecko + IE
return message; // Webkit, Safari, Chrome...
};
document.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
window.removeEventListener('beforeunload', beforeunload);
}
});
window.addEventListener('beforeunload', beforeunload);
</script>
this is going to remove the beforeunload event whenever a link is clicked on the page.
One way, and again, I wouldn't recommend doing this either - the user should be able to leave your site without receiving a warning - but you could unregister the event if a link has been clicked:
$('a').click(function() {
window.onbeforeunload = null;
return true; // continue
});
I know there are a lot of questions regarding this but nothing is answering me right. I want to show a confirmation dialog when user leaves the page. If the user press Cancel he will stay on page and if OK the changes that he has made will be rollback-ed by calling a method. I have done like this:
window.onbeforeunload = function () {
var r = confirm( "Do you want to leave?" );
if (r == true) {
//I will call my method
}
else {
return false;
}
};
The problem is that I am getting the browser default popup: "LeavePage / StayOnPage"
This page is asking you to confirm that you want to leave - data you
have entered may not be saved.
This message is shown in Firefox, in Chrome is a little different. I get this popup after I press OK on my first confirmation dialog.
Is there a way not to show this dialog? (the second one, that I did not create).
Or if there is any way to control this popup, does anyone know how to do that?
Thanks
Here's what I've done, modify to fit your needs:
// This default onbeforeunload event
window.onbeforeunload = function(){
return "Do you want to leave?"
}
// A jQuery event (I think), which is triggered after "onbeforeunload"
$(window).unload(function(){
//I will call my method
});
Note: it's tested to work in Google Chrome, IE8 and IE10.
This is simple. Just use
window.onbeforeunload = function(){
return '';
};
to prompt when the user reloads, and
window.close = function(){
return '';
};
to prompt when the user closes the page.
But the user have to click on the page once, or do anything on the page for the code to detect. You don't have to put anything the the return'';, because JavaScript interpreter would just ignore it.
window.onbeforeunload = function() {
if (data_needs_saving()) {
return "Do you really want to leave our brilliant application?";
} else {
return;
}
};
I have written an extension, which changing his icon on websites, who matches the if clause.
Take a look:
chrome.tabs.onActivated.addListener(
function (activeInfo) {
chrome.tabs.get(activeInfo.tabId, function(tab){
hosterRegExp(tab.url); //Function to change Icon
});
}
);
chrome.tabs.onUpdated.addListener(
function checkHosts(tabId, changeInfo, tab) {
hosterRegExp(tab.url); //Function to change Icon
}
);
Every time the active tab is changed or a tab is getting reloaded the function hosterRegExp is called with the current URL. This works fine.
Now, that's not working with two windows. If I change between two windows, it doesn't call the hosterRegExp(); that's because the active tab is not reloaded nor is it changing the active tab.
Also I couldn't find another EventHandler which would help me.
So I have to check also the current windowID? I don't know - please help me.
Thank you.
Like RobW told me, I'm using the
chrome.windows.onFocusChanged
API now.
Well, in my case it will look like this:
chrome.windows.onFocusChanged.addListener(function()
{
chrome.tabs.query({currentWindow: true, active: true}, function(tab)
{
hosterRegExp(tab[0].url);
});
});
I used the query method to get the tab after the changed focus. Though it isn't possible that 2 tabs are active in one window, the array has everytime only one element.
That's not beautiful, if someone has a better and cleaner code, tell me!
So I've been looking around for hours, testing multiple versions, testing some of my own theories and I just can't seem to get it working.
What I'm trying to do is use alert or confirm (or whatever works) so popup a dialog when a user tries to navigate away from a purchase form. I just want to ask them "Hey, instead of leaving, why not get a free consultation?" and redirect the user to the "Free Consultation" form.
This is what I have so far and I'm just not getting the right results.
$(window).bind('beforeunload', function(){
var pop = confirm('Are you sure you want to leave? Why not get a FREE consultation?');
if (pop) {
window.location.href('http://www.mydomain/free-consultation/');
} else {
// bye bye
}
});
$("form").submit(function() {
$(window).unbind("beforeunload");
});
This is showing confirm dialog to user, want to stay or leave page. Not exactly what you looking for but maybe it will be useful for start.
function setDirtyFlag() {
needToConfirm = true; //Call this function if some changes is made to the web page and requires an alert
// Of-course you could call this is Keypress event of a text box or so...
}
function releaseDirtyFlag() {
needToConfirm = false; //Call this function if dosent requires an alert.
//this could be called when save button is clicked
}
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm)
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
Script taken from http://forums.devarticles.com/showpost.php?p=156884&postcount=18
Instead of using the beforeunload and alert(), I decided to check whether or not the users mouse has left the document. See code below:
$(document).bind('mouseleave', function(event) {
// show an unobtrusive modal
});
Not sure whether it will help.
You need to stop the propagation before showing the Confirm / Alert.
Please refer http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/
Look at the last comment.
Try this:
window.onunload = redirurl;
function redirurl() {
alert('Check this Page');
window.location.href('http://www.google.com');
}