Google 文档：单击按钮或使用用户脚本更改样式 (tampermonkey)

Question

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

我可以通过 id 获取按钮元素，但是当我将 click() 发送到该元素时，什么也没有发生（这是我尝试使用用于调试的粗体按钮，因为它比我想做的更简单带按钮 textColorButton )

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
    }
}

Answer 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 
// for switch 
// combinaison of key  
// dispatchEvent 
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);
}

Google 文档：单击按钮或使用用户脚本更改样式 (tampermonkey)

Google docs : click a button or change style with userscript (tampermonkey)

javascript

google-docs

userscripts

tampermonkey