I observe that the onUpdated listener for the tabs API in Chrome does trigger multiple times.
When I refresh the existing tab, the alert pops up 3 times
When I load a different URL, the alert pops up 4 times
In the alert popup, I also see that there seem to be "intermediate" title tags.
How can I avoid this and reduce action to the final update?
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
/*
Multiple Tasks:
1. Check whether title tag matches the CPD Teamcenter title and custom success tab does not exist
2. If yes, trigger three actions:
a. move tab to new Chrome window
b. call external application to hide the window with the isolated tab
c. add custom success tag to identify that this was already processed
*/
const COMPARESTRING = "My Tab Title"
var title = tab.title;
alert(title) // this alert pops up 3 or 5 times!
/* if (title == COMPARESTRING) {
return "Match. :-)";
} else {
return "No match. :-(";
} */
});
you can do something like this
chrome.tabs.onUpdated.addListener(function (tabId, tabInfo, tab): void {
if (tab.url !== undefined && tabInfo.status === "complete") {
// do something - your logic
};
});
window.addEventListener('popstate', function(event) {
alert("you are not able to push back button");
});
I have create the web application using polymer 2.0 but I have to click on the back button to the browser is logout I have to show the alert if the user is click on the back button of the browser I have tried window.addEventListener but still got error.
I've not been able to stop the browser's back button, but I've managed to get around it. In my app, I want to warn the user that they will log out by backing up to the first page, and give them a chance to leave or stay put. Using the polymer-2-starter-kit as my starting point, and tracking a connected property, I got this working:
_routePageChanged(page) {
// If no page was found in the route data, page will be an empty string.
// Default to 'home' in that case.
this.page = (page && this.connected) ? page : 'home';
// Close the drawer.
this.drawerOpened = false;
}
_pageChanged(page, oldPage) {
// Warn user if backing up logs out.
if ((page == '' || page == 'home') && this.connected) {
if (window.confirm("Do you really mean to logout?")) {
this.$.xhrLogout.generateRequest();
} else {
window.history.forward();
}
}
const resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
Polymer.importHref(
resolvedPageUrl,
null,
this._showPage404.bind(this),
true);
}
So if the user is connected, and navigates to the initial page, I can force them to stay on the page where they were with window.history.forward().
I have a url at /page (PAGE A) where I want to detect if the page was navigated to with history back from (PAGE B) or if the user was on (PAGE A) and manually refreshed the page from the URL bar refresh button (without using history back).
I looked into all the history, location, props by react router but didn't find a way to differentiate how the user navigated to the page.
In both scenarios, the history.action == 'POP' is the history action. Ideally it would be 'POP' when using the back button in the app to go back from page b to page a, and when on page a, when refreshing the page, it would be something other than 'POP' like 'REFRESH' for example.
How can we differentiate between both of them to run different logic in our app, since both trigger 'POP'?
Instead of comparing the history key, you can compare the pathname, for example, if you are in the page "/page1/page2" and hit refresh, the new location is the same. But if you hit the back action, the new location will be "/page1/".
This solution also uses a listener to listen to any action coming from history.
componentDidMount() {
const unlisten = history.listen((location, action) => {
if (action == 'POP') {
\\ thisLocation is the current location of your page
if (location.pathname != '/thisLocation/') {
alert('Back Pressed: ' + String(location.pathname));
} else {
alert('Refreshed: ' + String(location.pathname));
}
}
});
this.setState({ ...this.state, unlisten: unlisten });
}
componentWillUnmount() {
this.state.unlisten();
}
You can see more details in the link provided by Rei Dien as a comment of your question: https://www.npmjs.com/package/history
[EDIT]
Another way to do this is using https://www.npmjs.com/package/react-router-last-location and doing this:
import { useLastLocation } from 'react-router-last-location';
componentDidMount() {
const unlisten = history.listen((location, action) => {
const lastLocation = useLastLocation();
if (location.pathname == lastLocation.pathname) {
alert('Back Pressed: ' + String(location.pathname));
}
}
});
this.setState({ ...this.state, unlisten: unlisten });
}
componentWillUnmount() {
this.state.unlisten();
}
The downside is that there is no difference between activating the back action or clicking in a link that goes to the page that you was before, both would be detected as pressing back. If you don't want a new dependency, you can do it manually as stated in https://github.com/ReactTraining/react-router/issues/1066#issuecomment-412907443 creating a middleware.
I think this will at least point your in the right direction. Navigate to yourwebsite.com.
let current_page = history.state.key
if(history.action == 'POP') {
if(history.state.key == current_page) {
return 'page was refreshed'
}
return 'back button was pressed'
}
I'm doing around 1-2 notifications a day and it's important the user doesn't miss it. Is there a way of removing the auto close and only allowing the user to manually close the notification?
I don's see any option for this in the Notification Options:
http://developer.chrome.com/extensions/notifications.html#type-NotificationOptions
Notification now has (since Chrome 50) a requireInteraction property to force the notification to stay on screen:
var notification = new Notification("TITLE", {
icon: 'assets/res/icon.png',
body: "MESSAGE",
requireInteraction: true
});
In onclick you have to close the notification:
notification.onclick = function()
{
this.close();
}
UPDATE (2016-05-24):
Xan commented:
Fun fact: all this arcane hacking is no longer needed; see the new requireInteraction flag
It is availalbe since Chrome 50. More info.
Thanks to root's comment, this answer is revised to account for the fact that the onClosed event is not fired when the notification disappears (into the notigications area) after a few seconds. This is still kind of a hacky solution.
Background
You can take advantage of the fact that a notification's life-cycle ends with one of the following events:
onClosed: When the user clicks on the small 'x' in the top-right corner.
onClicked: When the user clicks on the message body (not the 'x', not some button).
onButtonClicked: When the user clicks on one of the buttons (if any).
The solution
The proposed solution consists of the following steps:
Register listeners for all the events mentioned above.
Register a timeout after a few seconds (e.g. 30) -after the notification is hidden- that will delete and re-create the notification (so it effectively stays visible on the screen.
If any of the listeners set on step 1 fires, it means the user interracted with the notification, so cancel the timeout (you don't need to re-create the notification).
Writing about it is simple, coding takes some more effort :)
Here is the sample code I used to achieve what is described above:
In manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"background": {
// We need this for the `Timeout` - see notes below
"persistent": true,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test Extension"
"default_icon": {
"19": "img/icon19.png",
"38": "img/icon38.png"
},
},
"permissions": ["notifications"]
}
In background.js:
var pendingNotifications = {};
/* For demonstration purposes, the notification creation
* is attached to the browser-action's `onClicked` event.
* Change according to your needs. */
chrome.browserAction.onClicked.addListener(function() {
var dateStr = new Date().toUTCString();
var details = {
type: "basic",
iconUrl: "/img/notifIcon.png",
title: "REMINDER",
message: dateStr + "\n\n"
+ "There is one very important matter to attend to !\n"
+ "Deal with it now ?",
contextMessage: "Very important stuff...",
buttons: [
{ title: "Yes" },
{ title: "No" }
]
};
var listeners = {
onButtonClicked: function(btnIdx) {
if (btnIdx === 0) {
console.log(dateStr + ' - Clicked: "yes"');
} else if (btnIdx === 1) {
console.log(dateStr + ' - Clicked: "no"');
}
},
onClicked: function() {
console.log(dateStr + ' - Clicked: "message-body"');
},
onClosed: function(byUser) {
console.log(dateStr + ' - Closed: '
+ (byUser ? 'by user' : 'automagically (!?)'));
}
};
/* Create the notification */
createNotification(details, listeners);
});
/* Create a notification and store references
* of its "re-spawn" timer and event-listeners */
function createNotification(details, listeners, notifId) {
(notifId !== undefined) || (notifId = "");
chrome.notifications.create(notifId, details, function(id) {
console.log('Created notification "' + id + '" !');
if (pendingNotifications[id] !== undefined) {
clearTimeout(pendingNotifications[id].timer);
}
pendingNotifications[id] = {
listeners: listeners,
timer: setTimeout(function() {
console.log('Re-spawning notification "' + id + '"...');
destroyNotification(id, function(wasCleared) {
if (wasCleared) {
createNotification(details, listeners, id);
}
});
}, 10000)
};
});
}
/* Completely remove a notification, cancelling its "re-spawn" timer (if any)
* Optionally, supply it with a callback to execute upon successful removal */
function destroyNotification(notifId, callback) {
/* Cancel the "re-spawn" timer (if any) */
if (pendingNotifications[notifId] !== undefined) {
clearTimeout(pendingNotifications[notifId].timer);
delete(pendingNotifications[notifId]);
}
/* Remove the notification itself */
chrome.notifications.clear(notifId, function(wasCleared) {
console.log('Destroyed notification "' + notifId + '" !');
/* Execute the callback (if any) */
callback && callback(wasCleared);
});
}
/* Respond to the user's clicking one of the buttons */
chrome.notifications.onButtonClicked.addListener(function(notifId, btnIdx) {
if (pendingNotifications[notifId] !== undefined) {
var handler = pendingNotifications[notifId].listeners.onButtonClicked;
destroyNotification(notifId, handler(btnIdx));
}
});
/* Respond to the user's clicking on the notification message-body */
chrome.notifications.onClicked.addListener(function(notifId) {
if (pendingNotifications[notifId] !== undefined) {
var handler = pendingNotifications[notifId].listeners.onClicked;
destroyNotification(notifId, handler());
}
});
/* Respond to the user's clicking on the small 'x' in the top right corner */
chrome.notifications.onClosed.addListener(function(notifId, byUser) {
if (pendingNotifications[notifId] !== undefined) {
var handler = pendingNotifications[notifId].listeners.onClosed;
destroyNotification(notifId, handler(byUser));
}
});
Final notes:
If your notifications are extremely important, you should implement a "recovery" mechanism, for case such as browser os OS crashes or abrupt termination. E.g. relying on a more persistent storage (localStorage, chrome.storage API etc), resuming pending notifications on extension/browser start-up etc.
It might be a good idea to put a limit on the total number of pending notifications, for "user-friendliness" reasons. If your pending notifications exceed, say, 3 at any given moment, you could replace them with one that informs there are pending notifications and direct the user to a page where you list all of them. (The code will be considerably more complex, but hey anything for the user, right ? ;)
Instead of trying to keep the notifications visible on screen until the user decides to deal with them, it could be better using a Badge (wich can have a color and a small text - indicating the number of pending notifications.
I haven't looked into it, but it might be possible (in which case it is advisable as well) to replace the Timeout's with the chrome.alarms API and then convert the background-page to non-persistent (a.k.a. event-page) which will make it more resource-friendly.
This answer is obsolete; see this answer for an up to date solution involving requireInteraction flag (Chrome 50+).
There is a slightly better (but again, hacky) solution.
When you call update on a notification that changes its priority, and the priority is 0 or above, the notification will be re-shown and the timer for hiding it reset.
So, you can show a notification with a high priority, (say, 2) and then repeat this on an interval shorter than time to hide the notification:
chrome.notifications.update(id, {priority : 1}, function(wasUpdated) {
if(wasUpdated) {
chrome.notifications.update(id, {priority : 2}, function() {});
} else {
// Notification was fully closed; either stop updating or create a new one
}
});
UPDATE answar: after Chrome 50, please add new attribute: [requireInteraction: true]!
don't use chrome.notifications.create
try to use var notification= new Notification("New mail from John Doe", { tag: 'msg1', requireInteraction: true});
will not to close.
if want to close=> notification.close();
ref: http://www.w3.org/TR/notifications/
https://developer.mozilla.org/en-US/docs/Web/API/notification/requireInteraction
webkit notifications seem to be more persistent on the screen, althouth they have the opposite problem - how to hide them to sys tray.
http://developer.chrome.com/extensions/desktop_notifications.html
I'm researching and using html5 full-screen API with FireFox, I have a local html file, name 'SamplePlayer.html'. If I launched this file and clicked 'Full' button to make one element in to fullscreen mode like:
function launchFullScreen (element) {
if (typeof(element) == "undefined")
element = document.documentElement;
if (element.requestFullScreen) {
element.requestFullScreen();
}
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
return true;
}
FireFox shows a dialog(maybe something else)'Press ESC to exit fullscreen, allow fullscreen, allow, reject', my question is , How can I detect user click 'allow' button and this dialog disappear? not merely element come into full mode and the dialog still exist.
I' ve test with:
document.addEventListener('webkitfullscreenchange', adjustElement, false);
document.addEventListener('mozfullscreenchange', adjustElement, false);
document.addEventListener('fullscreenchange', adjustElement, false);
function adjustElement() {
//alert("change");
//var tmp = fullscreenElement();
var tmp = fullscreen();
alert(tmp);
}
function fullscreenElement() {
return document.fullscreenElement ||
document.webkitCurrentFullScreenElement ||
document.mozFullScreenElement ||
null;
}
function fullscreen() {
return document.fullscreen ||
document.webkitIsFullScreen ||
document.mozFullScreen ||
false;
}
But while user request fullscreen, whether user clicked 'allow' button or not, all those function return true, how can I detect whether user clicked 'allow' button and allow full-screen mode with FireFox?
You cannot detect if the "Allow" button was clicked, and you're not supposed to detect it or be able to detect it either. It is a user decision and implementation detail.
Should there be some "hack" to detect it, it would be an implementation detail that is subject to change at any time, and there is a good chance it will change simply to close this information leak.
What you are able to detect and supposed to work with is entering/existing full screen mode state changes, via the mozfullscreenchange event. See the Using fullscreen mode documentation.