How to run TamperMonkey function after window.location.href change
When automating workflows using TamperMonkey scripts, you often have a situation where you want to run some function, then set window.location.href
and after that page has loaded, run another part of your code. However, since the browser physically reloads the page, the Tampermonkey script is also reloaded - hence, your original function will stop being executed.
Fixing this is easy once you grasp the concept:
- Before reloading the page, we set a specific key in sessionStorage, indicating what we want to do once the page has finished loading
- Then we can set
window.location.href
- On each page load, we check if the key is set and, if so, we run the appropriate function and delete the key
Note that in the TamperMonkey context, this is limited to pages that are included in the @match
configuration of the script (otherwise, the script won’t be executed on the new page that is being loaded):
// ==UserScript==
// @name TamperMonkey continuation example
// @namespace http://tampermonkey.net/
// @version 0.1
// @author You
// @match https://techoverflow.net
// @grant none
// ==/UserScript==
(function() {
'use strict';
const continuationKey = "_my_script_continuation_key"; // This sessionstorage key
// Check continuation
const continuationActions = {
"printMsg": onPrintMsg
};
const _continuation = sessionStorage.getItem(continuationKey);
if(_continuation) {
sessionStorage.removeItem(continuationKey);
const action = continuationActions[_continuation]
if(action) {action();}
}
function onPrintMsg() {
console.log("This is run after reloading the page");
}
function onAltQ() {
console.log("Will now reload the page...");
sessionStorage.setItem(continuationKey, "printMsg");
window.location.href = window.location.origin + "/";
}
function onKeydown(evt) {
// Use https://keycode.info/ to get keys
if (evt.altKey && evt.keyCode == 81) {
onAltQ();
}
}
document.addEventListener('keydown', onKeydown, true);
})();