Tampermonkey overrides JIRA Shortcuts

Question

I have a tampermonkey script which colorizes JIRA comments depending on their text. The coloring does work as expected. But all keypress events of the JIRA issue are deactivated.

Before the script I was able to press . to activated the Action Menu or press m to add a comment etc.

After the script nothing works.

Info: When I run the script within Chrome's Snippet Windows everything is fine - all shortcuts still work and the coloring has happened. That lets me assume that Tampermonkey kind of overrides or unbinds the key-events in JIRA.

Anybody an idea how to avoid this?

script

    // ==UserScript==
// @name         JiraCommentColors
// @namespace    com.company.tamperscripts
// @version      0.2
// @description  colorize comments in JIRA made by awesome xetra11
// @author       xetra11
// @match        https://jira.company.com/browse/*
// @grant        none
// @require http://code.jquery.com/jquery-1.12.4.min.js
// ==/UserScript==


(function() {
    var opacity = '0.3';
    var borderStyle = '1px solid black';
    var commentSelector = "div[id*='comment']";
    var zwischenstandSelector = 'a[name=Zwischenstand]';
    var fragenSelector = 'a[name=Frage]';
    var wartenSelector = 'a[name=Warten]';
    var colorZwischenstand = 'rgba(0, 102, 0, '+ opacity +')';
    var colorFrage = 'rgba(0, 153, 204, '+ opacity +')';
    var colorWarten = 'rgba(255, 102, 0, '+ opacity +')';

    var paintZwischenstand = function(index, element){
        $(element).closest(commentSelector)
            .css('background-color', colorZwischenstand)
            .css('border', borderStyle);
    };
    var paintFrage = function(index, element){
        $(element).closest(commentSelector)
            .css('background-color', colorFrage)
            .css('border', borderStyle);
    };
    var paintWarten = function(index, element){
        $(element).closest(commentSelector)
            .css('background-color', colorWarten)
            .css('border', borderStyle);
    };

    $(zwischenstandSelector).each(paintZwischenstand);
    $(fragenSelector).each(paintFrage);
    $(wartenSelector).each(paintWarten);
})();

Answer 1

The possible reason may be because you didn't specified the @run-at to document-end. Try the below code

// ==UserScript==
// @name         JiraCommentColors
// @namespace    com.company.tamperscripts
// @version      0.2
// @description  colorize comments in JIRA made by awesome xetra11
// @author       xetra11
// @match        https://jira.company.com/browse/*
// @grant        none
// @run-at       document-end
// @require http://code.jquery.com/jquery-1.12.4.min.js
// ==/UserScript==


(function() {
    var opacity = '0.3';
    var borderStyle = '1px solid black';
    var commentSelector = "div[id*='comment']";
    var zwischenstandSelector = 'a[name=Zwischenstand]';
    var fragenSelector = 'a[name=Frage]';
    var wartenSelector = 'a[name=Warten]';
    var colorZwischenstand = 'rgba(0, 102, 0, '+ opacity +')';
    var colorFrage = 'rgba(0, 153, 204, '+ opacity +')';
    var colorWarten = 'rgba(255, 102, 0, '+ opacity +')';

    var paintZwischenstand = function(index, element){
        $(element).closest(commentSelector)
            .css('background-color', colorZwischenstand)
            .css('border', borderStyle);
    };
    var paintFrage = function(index, element){
        $(element).closest(commentSelector)
            .css('background-color', colorFrage)
            .css('border', borderStyle);
    };
    var paintWarten = function(index, element){
        $(element).closest(commentSelector)
            .css('background-color', colorWarten)
            .css('border', borderStyle);
    };

    $(zwischenstandSelector).each(paintZwischenstand);
    $(fragenSelector).each(paintFrage);
    $(wartenSelector).each(paintWarten);
})();