chrome.tabs.onUpdated.addListener triggers multiple times - google-chrome

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
};
});

Related

window.addEventListener is not working on a user click on the browser back button in polymer 2.0?

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().

Chrome extension webRequest fired multiple times

I have a Chrome extension in which I want to open a dialog box each time the page is partially (ajax) or fully reloaded.
In my background page I am catching the ajax request like this :
chrome.webRequest.onCompleted.addListener(
function(details) {
if (details.frameId == 0) {
chrome.tabs.executeScript(details.tabId, {
"file": "/js/Dialog.js"
});
}
},
{urls: ["https://*/]"}
);
In my Dialog.js I am checking if the dialog box has already been initialized so I do not get multiple dialog boxes but it does not work, it does not seem to be working as I get 2 dialogs. This is what I do to check if it has been initialized :
if (!document.getElementById("my-dialog"))
Events onCompleted fires for each resource was loaded on a tab (images, fonts, styles, etc).
You need to improve you event filtering, or use chrome.tabs.onCreatedand chrome.tabs.onUpdated together in order to catch tab's load finish.
And this:
!document.getElementById("my-dialog")
may not work, because DOM updating is slow operation, so when next event was fired, you DOM may be still not updated.
This simple trick shall work better:
var isLoaded = isLoaded || false;
if(!isLoaded) {
// ... load you dialog ...
isLoaded = true;
}

How to disable the context menu on long press when using device mode in Chrome?

How to disable the context menu on long press when using device mode in Chrome ?
I mean this context menu:
I am asking this because I want to debug long press gestures for mobile devices and the context menu causes my react app to behave in a strange way:
when I try to reorder the list then "strange things start to happen": selected item starts to float all over the place (as can be seen from snapshot below). The Hello World is obscured by the selected item. Really strange.
My workaround is entering this code into the JS console when testing long press actions in device mode:
window.oncontextmenu = function() { return false; }
I have developed a slightly more "advanced" workaround that will still (most of the time) show the contextmenu on right-click while preventing it from showing on a simulated long-tap:
window.oncontextmenu = function() {
if (event.button != 2 && !(event.clientX == event.clientY == 1)) {
event.preventDefault();
}
}
#marsk comment was right therefore based on previous answers I come up with another solution using PointerEvent.pointerType
window.oncontextmenu = function (event: any) {
// eslint-disable-next-line no-console
console.log(event); // prints [object PointerEvent]
const pointerEvent = event as PointerEvent;
// eslint-disable-next-line no-console
console.log(`window.oncontextmenu: ${pointerEvent.pointerType}`);
if (pointerEvent.pointerType === 'touch') {
// context menu was triggerd by long press
return false;
}
// just to show that pointerEvent.pointerType has another value 'mouse' aka right click
if (pointerEvent.pointerType === 'mouse') {
// context menu was triggered by right click
return true;
}
// returning true will show a context menu for other cases
return true;
};

Selectively remove Chrome browsing history

Is it possible to selectively remove items from Google Chrome browsing history? I have a website from my history that wants to be the default everytime I start a search with a specific letter, but I often reference my history to re-find things.
So I would like to remove all history from, say, www.pythonismyfavoritest.com without removing everything; is that possible?
Try searching www.pythonismyfavoritest.com in the search bar in chrome://history/ and then remove each item by clicking the check box in the left and then hitting the "remove selected items" button.
The chrome history api works with url such chrome://history/#q=hello&p=0
Here's something I wrote in JavaScript. It works through the Console Debugger. I tried using it in a bookmark but I get no response from the page.
** // UPDATE (07.28.15)
I added a shorter approach provided by #Denis Gorbachev to the checkbox targeting, which helped shorten some of this code. I also added "auto-stop" functionality, meaning the loop will stop once it has finally cleared the list.
** // UPDATE (08.20.14)I made a few changes to the code, to make it more user friendly. Other users may not be code-savvy, and others may simply prefer convenience. Therefore, I whipped up a couple buttons (start/stop) to control the usage; as well as address some "ASSERTION FAILED" exceptions/errors that were being thrown when attempted to run the script loop.. Enjoy!!
In your address bar, type in the following address to to the meat of the history page.. It's normally loaded in an iframe, with the left-side menu loaded in another frame.. // **
chrome://history-frame/
Next, load your Console Debugger/Viewer by pressing Ctrl+Shift+J(For Mac users, ⌘+⌥+J)
You can also press F12 and select the "Console" tab.
In the Console Debugger/Viewer, copy & paste the following code:
function removeItems() {
removeButton = document.getElementById('remove-selected');
overlayWindow = document.getElementById('overlay');
//revision (07.28.15): Replaced the For Loop targeting the checkboxes, thanks to Denis Gorbachev via comments (02.19.15)
Array.prototype.forEach.call(document.querySelectorAll("input[type=checkbox]"), function(node) {node.checked = "checked"})
setTimeout(function () {
if (removeButton.getAttribute("disabled") !== null) {
removeButton.removeAttribute("disabled")
}
/* revision (08.20.14): no longer binding to that condition, button should no longer be disabled, so click! */
if ((overlayWindow.hasAttribute("hidden")) && (overlayWindow.getAttribute("hidden") !== false)) {
removeButton.click();
}
/* revision (08.20.14): new Interval, to check against the overlay DIV containing the confirmation "Remove" button */
/* Attempting to click the button while the DIV's "hidden" attribute is in effect will cause FAILED ASSERTION */
stopButton = setInterval(function () {
if (overlayWindow.hasAttribute("hidden")) {
if (overlayWindow.getAttribute("hidden") == "false") {
hidden = false
} else {
hidden = true
}
} else {
hidden = false
}
if (!hidden) {
document.getElementById("alertOverlayOk").click();
clearInterval(stopButton)
}
}, 250)
}, 250)
}
//revision (08.20.14): Lets build our buttons to control this so we no longer need the console
//stop button (08.20.14)
var stopButton = document.createElement('button');
stopButton.setAttribute('id', "stopButton");
stopButton.innerHTML = "Stop";
stopButton.style.background = "#800";
stopButton.style.color = "#fff";
stopButton.style.display = "none";
stopButton.onclick = function () {
clearInterval(window.clearAllFiltered);
document.getElementById("stopButton").style.display = "none";
document.getElementById("startButton").style.display = ""
};
//start button (08.20.14)
var startButton = document.createElement('button');
startButton.setAttribute('id', "startButton");
startButton.innerHTML = "Start";
startButton.style.background = "#090";
startButton.style.color = "#fff";
startButton.onclick = function () {
window.clearAllFiltered = setInterval(function () {
/* revision (07.28.15): Stop the Loop automatically if there are no more items to remove */
if(document.getElementById("results-header").innerText=="No search results found."){
document.getElementById("stopButton").click();
}
if (document.getElementById("loading-spinner").getAttribute("hidden") !== null) {
removeItems()
}
}, 250); //adjust Time Here (1500 [millisec] = 1.5sec)
document.getElementById("stopButton").style.display = "";
document.getElementById("startButton").style.display = "none"
};
/* revision (08.20.14): Now we add our buttons, and we're ready to go! */
editingControls = document.getElementById('editing-controls');
editingControls.appendChild(stopButton);
editingControls.appendChild(startButton);
This removeItems function will select loop through all form inputs and check all checkboxes, enable the "Remove Selected Items" button and click it. After a half-second, it'll check if the "Are You Sure" prompt is displayed and, if so, click the "Yes/Remove" button automatically for you so that it will load a new list of items to do this process all over again..
The item is looped using the variable "clearAllFiltered", which is a setInterval loop, which is checking for the status of the "Loading" screen..
To start erasing your filtered history items, you can now click the green Start button.
** // UPDATE (07.28.2015) It will now stop on ITS OWN.
To stop the loop manually, you can now click the red Stop button. Simple as that!
1) Go to your history settings ( chrome://history/ )
2) In the top right hand corner will be a search bar with a 'Search History" button
3) Type in the sitename you want to remove from history, then click the button
4) Click the box on the first one, then scroll to the bottom of the page
5) Press and hold the Shift key, then click the last box (This will check all on that page)
6) Scroll back up and select the 'Remove Selected Items" Button
7) Repeat steps 4-6 until all your Youtube History is gone.
Hopefully Chrome will update this clear history feature, but for now this seems to be the fastest option
Easy way is Shift+Delete.
For example when you type "you", "youtube.com" will be shown as selected in suggestions. Just click Shift+Delete. Then retype "you" and you will see no "youtube.com" in that list anymore.
If you are talking about getting rid of the suggested search/auto-completion... then removing specific items from your chrome://history won't do it (in my experience). I want to fill in more detail to the answer #LacOniC gave.
In the screenshot you can see I typed "ba" and Chrome is suggesting completion based on my browsing history (the items in green).
In my experience, removing specific items from your history will not remove them from showing up in this address bar auto-completion.
To quickly remove these auto complete items:
Start typing a few letters that generate the offending suggestion.
Use your keyboard's arrow keys to select the suggestion you don't like (selected item is highlighted blue in screenshot).
Press shift+delete on windows or shift+fn+delete on mac to remove the selected item.

How can I get an event to fire every time localStorage is updated in Safari 5+?

I have tried to follow the examples on the Safari Developer Site.
The documentation suggests adding an event listener like so:
window.addEventListener('storage', storage_handler, false);
And then setting your handler function like this:
function storage_handler(evt)
{
alert('The modified key was '+evt.key);
alert('The original value was '+evt.oldValue);
alert('The new value is '+evt.newValue);
alert('The URL of the page that made the change was '+evt.url);
alert('The window where the change was made was '+evt.source);
}
But I can't seem to get this code to work on my machine (OS X 10.6, Safari 5.01) nor on Safari on my iPhone 3GS (iOS 4.02).
This article offers a separate method:
window.onload = function() {
...
document.body.setAttribute("onstorage", "handleOnStorage();");
}
function handleOnStorage() {
if (window.event && window.event.key.indexOf("index::") == 0){
$("stats").innerHTML = "";
displayStats();
}
}
But I haven't had any luck with that either.
Am I doing something wrong? Is this a bug?
After investigating further (and with the help from a friend) I discovered that the storage_handler method is called not when the value of a localstorage value changes on the page in my current window or tab, but when it changes in another tab.
For example, if I have the two tabs open, and have controls in the pages in each tab to change localstorage settings, then when I hit the control in the first tab, the storage_handler method is called in the other tab.
If you want to perform some action after the objects are saved in localstorage on the same page you can manually call the function after calling localStorage.setItem and call the same function from the storage eventlistener to handle multiple tabs.
I realize this is asking about Safari but, per the Mozilla Developer Network, the StorageEvent is only fired if the web storage object is changed from outside the page, e.g., in another tab.
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
Scroll down to "Responding to storage changes with the StorageEvent".
(I would have added this as a comment to the accepted answer but I don't have the rep for that.)
You can send a storage event every time you set the local storage
const favorites: null | string =
localStorage.getItem(favoritesKey);
localStorage.setItem(
favoriteKey,
JSON.stringify(
favorites === null
? [id]
: [...JSON.parse(favorites), id]
)
);
window.dispatchEvent(new Event("storage"));
Then the following will trigger
useEffect(() => {
const listener = () => {
const favorites: null | string = localStorage.getItem(favoriteKey);
if (favorites !== null) {
setState(JSON.parse(favorites));
}
};
window.addEventListener("storage", listener);
return () => {
window.removeEventListener("storage", listener);
};
}, []);