Google docs：单击按钮或使用用户脚本更改样式（tampermonkey）答案

【问题标题】：Google docs : click a button or change style with userscript (tampermonkey)Google docs：单击按钮或使用用户脚本更改样式（tampermonkey）
【发布时间】：2018-09-26 05:02:43
【问题描述】：

我想使用键盘快捷键来更改谷歌文档中选定文本的颜色。

我可以通过 id 获取按钮元素，但是当我向该元素发送 click() 时，什么也没有发生（这是我尝试使用用于调试的粗体按钮，因为它比我想要使用按钮 @987654322 执行的操作更简单@)

var button = document.getElementById("boldButton");
alert(button.innerHTML);   // working
button.click();   // not working

我也想获取选择然后应用样式，但 getSelection 是空的：

var text = document.getSelection();
alert(text);  // empty

到目前为止，这是我的脚本：

// ==UserScript==
// @name         Google docs
// @match        https://docs.google.com/document/d/#######
// @require    http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// @require    http://cdnjs.cloudflare.com/ajax/libs/sugar/1.3/sugar.min.js
// ==/UserScript==

var editingIFrame = $('iframe.docs-texteventtarget-iframe')[0];
if (editingIFrame) {
    editingIFrame.contentDocument.addEventListener("keydown", hook, false);
}
function hook(key) { 
    if (key.ctrlKey  &&  key.altKey  &&  key.code === "KeyE") {
        var button = document.getElementById("boldButton");
        button.click();   // not working
    }
}

【问题讨论】：

试试 button.dispatchEvent(new MouseEvent('click', {bubbles:true}))
感谢您的帮助 wOxxoM 但仍然无法正常工作。

标签： javascript google-docs userscripts tampermonkey

【解决方案1】：

点击按钮的诀窍是这样做：

var clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent(eventType, true, true);
button.dispatchEvent(clickEvent);

这是完整的脚本：

// ==UserScript==
// @name         Google docs
// @match        https://docs.google.com/document/d/#########
// @require    http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// ==/UserScript==
// sources:
// for iframe https://stackoverflow.com/a/46217408/3154274
// for switch https://stackoverflow.com/q/13362028/3154274
// combinaison of key  https://stackoverflow.com/a/37559790/3154274
// dispatchEvent https://stackoverflow.com/a/33887557/3154274
var editingIFrame = $('iframe.docs-texteventtarget-iframe')[0];
if (editingIFrame) {
    editingIFrame.contentDocument.addEventListener("keydown", hook, false);
}

function hook(key) {
    if (key.ctrlKey && key.altKey && key.code === "KeyY") {
        var button = document.getElementById("textColorButton");
        var color = document.querySelector('[title="light red berry 3"]');
        triggerMouseEvent(button, "mouseover");
        triggerMouseEvent(button, "mousedown");
        triggerMouseEvent(button, "mouseup");
        triggerMouseEvent(color, "mouseover");
        triggerMouseEvent(color, "mousedown");
        triggerMouseEvent(color, "mouseup");
    }

}

function triggerMouseEvent(node, eventType) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent(eventType, true, true);
    node.dispatchEvent(clickEvent);
}

【讨论】：