javascript button userscripts violentmonkey

How do I create a userscript that creates a button on a webpage, that when clicked, runs the GM_registerMenuCommand for that userscript?

I have a userscript that includes a GM_registerMenuCommand('Render LaTeX', () => { (and so forth) that makes part of the userscript only run when manually triggered by selecting the ViolentMonkey addon from my browser bar, then clicking the button labeled "Render LaTeX".

I want to add a button to the webpage this userscript is set to match, which when clicked does the above. I'm just at a loss for how to do so. The only information even regarding buttons I've yet been able to find was here.

I've tried tinkering with the code provided in the second answer to the linked question. I was able to adjust the text and positioning, but I couldn't figure out how to make the button do what I want or change its appearance to better fit into the website it's going on.

// ==UserScript==
// @name        TeX Button
// @namespace   all
// @match     https://mail.google.com/mail/*
// @version     1
// @grant       none
// ==/UserScript==

(function(){
    'use strict'

  window.addEventListener('load', () => {
    addButton('TeX', selectReadFn)
    })

    function addButton(text, onclick, cssObj) {
        cssObj = cssObj || {position: 'absolute', bottom: '92.375%', left:'19.35%', 'z-index': 3}
        let button = document.createElement('button'), btnStyle = button.style
        document.body.appendChild(button)
        button.innerHTML = text
        button.onclick = onclick
        Object.keys(cssObj).forEach(key => btnStyle[key] = cssObj[key])
        return button
    }

    function selectReadFn() {
        [...document.getElementsByClassName('MN')].filter(isRead).forEach(element => element.click())
    }

    function isRead(element) {
        childs = element.parentElement.parentElement.parentElement.getElementsByClassName('G3')
        return ![...childs].some(e => e.innerText.search(/unread/i)!==-1)
    }

}())

Below is the code with the GM_registerMenuCommand I mentioned. I don't know if this is actually needed for reference, but I figured it couldn't hurt to share.

// ==UserScript==
// @name        LaTeX for Gmail v2.1
// @namespace   Violentmonkey Scripts
// @match       https://mail.google.com/mail/*
// @grant       GM_registerMenuCommand
// @grant       GM_addElement
// @require     https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js
// @version     2.1
// @author      /u/MistralMireille & /u/LoganJFisher
// @description Adds support for TeXTheWorld delimiters to Gmail, and an register menu to activate rendering using traditional LaTeX delimiters
// ==/UserScript==

GM_addElement('link', {
  rel: "stylesheet",
  src: "https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.css"
});

function renderLatex() {
  document.querySelectorAll("#\\:1 > .nH .aHU.hx > [role='list'] > [role='listitem'][aria-expanded='true']").forEach(message => {
let subportion = message.querySelector("[data-message-id]"); // need to select a subportion of [role='listitem'] to stop rendering latex in the textinput
if(subportion) {
  message = subportion;
}
message.innerHTML = message.innerHTML.replace(/\[;(.+?);\]/g, (match, p1) => {
  return katex.renderToString(p1, { throwOnError: false, output: "mathml", displayMode: false });
});
message.innerHTML = message.innerHTML.replace(/\[\(;(.+?);\)\]/g, (match, p1) => {
  return katex.renderToString(p1, { throwOnError: false, output: "mathml", displayMode: true });
});
  });
}

GM_registerMenuCommand('Render LaTeX', () => {
  document.querySelectorAll("#\\:1 > .nH .aHU.hx > [role='list'] > [role='listitem'][aria-expanded='true']").forEach(message => {
    let subportion = message.querySelector("[data-message-id]"); // need to select a subportion of [role='listitem'] to stop rendering latex in the textinput
    if(subportion) {
      message = subportion;
    }
    message.innerHTML = message.innerHTML.replace(/\\\[(.+?)\\\]/g, (match, p1) => {
      return katex.renderToString(p1, { throwOnError: false, output: "mathml", displayMode: true });
    });
    message.innerHTML = message.innerHTML.replace(/\$\$(.+?)\$\$/g, (match, p1) => {
      return katex.renderToString(p1, { throwOnError: false, output: "mathml", displayMode: true });
    });
    //message.innerHTML = message.innerHTML.replace(/\\begin\{displaymath}(.+?)\\end\{displaymath}/g, (match, p1) => {
      //return katex.renderToString(p1, { throwOnError: false, output: "mathml", displayMode: true });
    //});
    //message.innerHTML = message.innerHTML.replace(/\\begin\{equation}(.+?)\\end\{equation}/g, (match, p1) => {
      //return katex.renderToString(p1, { throwOnError: false, output: "mathml", displayMode: true });
    //});
    message.innerHTML = message.innerHTML.replace(/\\\((.+?)\\\)/g, (match, p1) => {
      return katex.renderToString(p1, { throwOnError: false, output: "mathml", displayMode: false });
    });
    message.innerHTML = message.innerHTML.replace(/\$(.+?)\$/g, (match, p1) => {
      return katex.renderToString(p1, { throwOnError: false, output: "mathml", displayMode: false });
    });
    message.innerHTML = message.innerHTML.replace(/\\begin\{math}(.+?)\\end\{math}/g, (match, p1) => {
      return katex.renderToString(p1, { throwOnError: false, output: "mathml", displayMode: false });
    });
  });
});

function waitForElement(queryString) {
  let count = 0;
  return new Promise((resolve, reject) => {
let findInterval = setInterval(() => {
  let waitElement = document.querySelector(queryString);
  if(waitElement) {
    clearInterval(findInterval);
    resolve(waitElement);
  } else if(count > 20) {
    clearInterval(findInterval);
    reject(`Couldn't find waitElement: ${queryString}.`);
  } else {
    count += 1;
  }
}, 100);
  });
}

window.addEventListener('load', () => {
  waitForElement("#\\:1 > .nH").then(messagesDiv => {
(new MutationObserver((mutationRecords, observerElement) => {
  mutationRecords.forEach(mutationRecord => {
    switch(mutationRecord.type) {
      case "childList":
        mutationRecord.addedNodes.forEach(addedNode => {
          console.log(addedNode);
          if(addedNode.tagName === "DIV" && addedNode.getAttribute("role") === "listitem") {
            renderLatex();
          }
        });
        break;
      case "attributes":
        if(mutationRecord.target.tagName === "DIV" && mutationRecord.target.getAttribute("role") === "listitem" && mutationRecord.attributeName === "aria-expanded") {
          renderLatex();
        }
    }
  });
})).observe(messagesDiv, { childList: true, subtree: true, attributes: true, attributeOldValue: true});
  });
});

Solution

Here's your script modified to add a button and a menuCommand that will both call renderLatex:

// ==UserScript==
// @name        LaTeX for Gmail v2.1
// @namespace   Violentmonkey Scripts
// @match       https://mail.google.com/mail/*
// @grant       GM_registerMenuCommand
// @grant       GM_addElement
// @require     https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js
// @version     2.1
// @author      /u/MistralMireille & /u/LoganJFisher
// @description Adds support for TeXTheWorld delimiters to Gmail, and an register menu to activate rendering using traditional LaTeX delimiters
// @noframes
// ==/UserScript==

/* globals katex */

GM_addElement('link', {
    rel: "stylesheet",
    src: "https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.css"
});

function renderLatex() {
    console.log('rendering latex...');
    const messages = document.querySelectorAll("#\\:1 > .nH .aHU.hx > [role='list'] > [role='listitem'][aria-expanded='true']");
    messages.forEach(message => {
        let subportion = message.querySelector("[data-message-id]"); // need to select a subportion of [role='listitem'] to stop rendering latex in the textinput
        if(subportion) {
            message = subportion;
        }
        message.innerHTML = message.innerHTML.replace(/\[;(.+?);\]/g, (match, p1) => {
            return katex.renderToString(p1, { throwOnError: false, output: "mathml", displayMode: false });
        });
        message.innerHTML = message.innerHTML.replace(/\[\(;(.+?);\)\]/g, (match, p1) => {
            return katex.renderToString(p1, { throwOnError: false, output: "mathml", displayMode: true });
        });
    });
}

function waitForElement(queryString) {
    let count = 0;
    return new Promise((resolve, reject) => {
        let findInterval = setInterval(() => {
            let waitElement = document.querySelector(queryString);
            if(waitElement) {
                clearInterval(findInterval);
                resolve(waitElement);
            } else if(count > 20) {
                clearInterval(findInterval);
                reject(`Couldn't find waitElement: ${queryString}.`);
            } else {
                count += 1;
            }
        }, 100);
    });
}

window.addEventListener('load', () => {
    waitForElement("#\\:1 > .nH").then(messagesDiv => {
        addButton(messagesDiv);

        (new MutationObserver((mutationRecords, observerElement) => {
            mutationRecords.forEach(mutationRecord => {
                switch(mutationRecord.type) {
                    case "childList":
                        mutationRecord.addedNodes.forEach(addedNode => {
                            console.log(addedNode);
                            if(addedNode.tagName === "DIV" && addedNode.getAttribute("role") === "listitem") {
                                renderLatex();
                            }
                        });
                        break;
                    case "attributes":
                        if(mutationRecord.target.tagName === "DIV" && mutationRecord.target.getAttribute("role") === "listitem" && mutationRecord.attributeName === "aria-expanded") {
                            renderLatex();
                        }
                }
            });
        })).observe(messagesDiv, { childList: true, subtree: true, attributes: true, attributeOldValue: true});
    });
});

function addButton(parent) {
    GM_registerMenuCommand('Render LaTeX', renderLatex);
    GM_addElement(parent, 'button', {
        id: 'LatexButton',
        textContent: 'RENDER LATEX'
    });

    parent.querySelector('#LatexButton').addEventListener('click', renderLatex);
}

*You can easily add styles to this button using GM_addStyle(css).

EDIT:

Latest version of the script:

// ==UserScript==
// @name        LaTeX for Gmail v2.1
// @namespace   Violentmonkey Scripts
// @match       https://mail.google.com/mail/*
// @grant       GM_registerMenuCommand
// @grant       GM_addElement
// @require     https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js
// @version     2.1
// @author      /u/MistralMireille & /u/LoganJFisher
// @description Adds support for TeXTheWorld delimiters to Gmail, and an register menu to activate rendering using traditional LaTeX delimiters
// @noframes
// ==/UserScript==

/* globals katex */

let LATEX_TOGGLE_STATE = true;

function renderLatex(html) {
    const katexReplaceList = [
        [/\[;(.+?);\]/g, false],
        [/\[\(;(.+?);\)\]/g, true],
        [/\\\[(.+?)\\\]/g, true],
        [/\$\$(.+?)\$\$/g, true],
        [/\\\((.+?)\\\)/g, false],
        [/\$(.+?)\$/g, false],
        [/\\begin\{math}(.+?)\\end\{math}/g, false]
    ];

    katexReplaceList.forEach( ([regex, display]) => {
        html = html.replace(regex, (m, p) => katex.renderToString(p, {throwOnError: false, output: "mathml", displayMode: display}));
    });

    return html;

}

function refreshLatex(){
    const messages = document.querySelectorAll("#\\:1 [role=list] > [role=listitem][aria-expanded=true]");
    messages.forEach(message => {
        let subportion = message.querySelector("[data-message-id] > div > div > div[id^=':'][jslog]");
        message = subportion || message;
        message.oldHTML = message.oldHTML || message.innerHTML;

        message.innerHTML = LATEX_TOGGLE_STATE ? renderLatex(message.innerHTML) : message.oldHTML;
    });
}

function toggleLatex() {
    LATEX_TOGGLE_STATE = !LATEX_TOGGLE_STATE;
    refreshLatex();
}

function waitForElement(queryString) {
    let count = 0;
    return new Promise((resolve, reject) => {
        let findInterval = setInterval(() => {
            let waitElement = document.querySelector(queryString);
            if(waitElement) {
                clearInterval(findInterval);
                resolve(waitElement);
            } else if(count > 20) {
                clearInterval(findInterval);
                reject(`Couldn't find waitElement: ${queryString}.`);
            } else {
                count += 1;
            }
        }, 100);
    });
}

window.addEventListener('load', () => {
    waitForElement("div#\\:3").then(messagesDiv => {
        GM_registerMenuCommand('Toggle LaTeX', toggleLatex);
        messagesDiv.addEventListener('click', refreshLatex);
        const target = document.querySelector('div#\\:4');
        const observer = new MutationObserver( () => { refreshLatex(); addButton() });
        observer.observe(target, {attributes: false, childList: true, subtree: false});
    });
});


function addButton() {
    const moveBtn = document.querySelector('div#\\:4 div[title="Move to"]');
    if (!moveBtn) return;

    GM_addElement(moveBtn.parentElement, 'div', {
        id: 'LatexButton',
        role: 'button',
        style: 'cursor: pointer; margin: 0 12px 0 12px;',
        'aria-label': 'Toggle LaTeX',
        'data-tooltip': 'Toggle LaTeX',
        textContent: 'LaTeX'
    });

    const latexButton = document.querySelector('#LatexButton');
    latexButton.addEventListener('click', toggleLatex);
}

if (window.trustedTypes && window.trustedTypes.createPolicy && !window.trustedTypes.defaultPolicy) {
    window.trustedTypes.createPolicy('default', {
        createHTML: string => string
    });
}

GM_addElement('link', {
    rel: "stylesheet",
    src: "https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.css"
});