One script to click buttons on two different pages?

Question

I manage a site that has multiple embedded web pages. It is a form of Mantis Bug Tracker that is used to submit tickets. Once a ticket is created it is given a few buttons, Close, assign etc. I am looking to Select the close button, which I can already do then click in the closing notes area which I was able to determine based off of knowing the elements and using document.querySelectorAll("input[value=Close]")[0].click().

This works. However it's done using two scripts.

I am trying to condense it into one script.

I have tried adding an include of the second page and the script desired for the specific page, however in the real world that doesn't quite work.

Script 1:

document.onkeyup = function(e) {
    if (e.which == 117) {
        document.querySelectorAll("input[value=Close]")[0].click();
    } else if (e.ctrlKey && e.which == 66) {
        alert("Ctrl + B shortcut combination was pressed");
    } else if (e.ctrlKey && e.altKey && e.which == 89) {
        alert("Ctrl + Alt + Y shortcut combination was pressed");
    }
}

Script 2:

var EffectiveDate = "";
document.onkeyup = function(e) {
    if (e.which == 117) {
        document.querySelectorAll("textarea[name=bugnote_text]")[0].value = " ";
        document.querySelectorAll("input[value='Close Ticket']")[0].click();

    } else if (e.ctrlKey && e.which == 66) {
        alert("Ctrl + B shortcut combination was pressed");
    } else if (e.ctrlKey && e.altKey && e.which == 89) {
        alert("Ctrl + Alt + Y shortcut combination was pressed");
    }
}

The first group of code is designed for the first initial page where it just needs to find a specific button and press it. Once it is processed. I would like to have the second group of code to seamlessly run after the new page is loaded but as of right now these are two separate scripts that are successful in doing what I desire.

I am able to find the elements desired and can correctly do the process stated just looking to simplify the script into one script. This of course does not run as it has been given but it does work in separate userscripts. Is this Possible?

Answer 1

1. To get the script to do the same thing on 2 different pages, merely adjust the @match and/or @include directives to fire on both pages.
2. To get one script to do different things on 2 different pages:
   A) Make sure it fires on both pages per step 1.
   B) Test location properties to determine which code to fire.

For example:

// ==UserScript==
// @name     _Click on two pages
// @match    *://YOUR_SERVER.COM/PATH_FOO/*
// @match    *://YOUR_SERVER.COM/PATH_BAR/*
// @grant    none
// ==/UserScript==

document.addEventListener ("keydown", zEvent => {
    if (zEvent.which == 117) {  //  F6
        zEvent.preventDefault();
        if (location.pathname.includes("/PATH_FOO/") ) {
            document.querySelectorAll("input[value=Close]")[0].click();
        }
        else if (location.pathname.includes("/PATH_BAR/") ) {
            document.querySelectorAll("textarea[name=bugnote_text]")[0].value = " ";
            document.querySelectorAll("input[value='Close Ticket']")[0].click();
        }
    }
    else if (zEvent.ctrlKey && zEvent.which == 66) {
        zEvent.preventDefault();
        alert("Ctrl + B shortcut combination was pressed");
    }
    else if (zEvent.ctrlKey && zEvent.altKey && zEvent.which == 89) {
        zEvent.preventDefault();
        alert("Ctrl + Alt + Y shortcut combination was pressed");
    }
} );

---

Some of the other issues with the question code:

1. It uses already defined browser hotkeys (vary by browser and OS). So use .preventDefault() to avoid side affects and extra actions.
2. Likewise, firing on keyup will fire too late to prevent default actions (which mostly fire on keydown).
3. Don't use .on... event handlers, use addEventListener.
4. Debugging by alert() is annoying and problematic (it masks some problems and can cause others). Use console.log.