I want to refresh a certain tab when the current tab changes, using Tampermonkey
.
I am a user of Duolingo, but I am not happy with their new change of
You can do this by:
Say, for example, that you wanted to monitor this random question, and reload its timeline page every time you clicked a vote button or the favorite star.
This complete working Tampermonkey script does that:
// ==UserScript==
// @name _Cross tab, cross domain script communication
// @match *://stackoverflow.com/questions/521295/*
// @match *://stackoverflow.com/posts/521295/timeline
// @require https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant GM_setValue
// @grant GM_addValueChangeListener
// ==/UserScript==
const xmssionKey = "Last vote-button click event";
//-- Are we on the "interactive" page/site/domain or the "monitoring" one?
if (location.pathname.includes ("questions") ) {
//-- On the "interactive page/tab...
//-- Hook into the page's vote and favorite buttons:
$(".inner-content").on ("click", ".vote a", zEvent => {
var tmStamp = new Date ().getTime ();
var ctMessage = `Button ${zEvent.target.className} clicked - ${tmStamp}`;
console.log (ctMessage);
//-- Send message to monitoring tab.
GM_setValue (xmssionKey, ctMessage);
} );
}
else {
//-- On the "monitoring" page/tab...
//-- Listen for new message:
GM_addValueChangeListener (
xmssionKey, (keyName, oldValue, newValue, bRmtTrggrd) => {
console.log (`Received new event: ${newValue}`);
//-- User feedback, esp useful with time delay:
document.title = "Reloading...";
/*-- Important:
May need to wait 1 to 300 seconds to allow for
web-app / database / API delays and/or caching.
1222 == 1.2 seconds
*/
setTimeout ( () => {location.reload(); }, 1222);
} );
}
Note that for this particular example, both pages are on the same domain (Merely to make it easier for everyone to run the demo script), but the code/strategy works just as well for cross-domain pages.