Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save WiliTest/b78ad2c234565ba8ce40df15440540d9 to your computer and use it in GitHub Desktop.
Save WiliTest/b78ad2c234565ba8ce40df15440540d9 to your computer and use it in GitHub Desktop.
some google doc shortcuts to change the font and highlights using a Userscript (works with ViolentMonkey)
// Help needed: I failed to send a value to the text resize and to apply it. Any idea ?
// to install this script: install the violentmonkey extension. Then click on "raw" on this github page.
// *perso note:
//to install or to send update:
// 1/ edit must be done on github (cf. the url in the tab settings).
// 2/ Edit/update the script (using the edit github button) + increase the version (or it will ask to reinstall in the next step)
// (don't need to increase the version if the change are just for myself: just reinstall it to keep the version)
// 3/ click on RAW (it will show the changes).
// 4/ Click Update (if needed refresh the dashboard page)
// last update: 2020_02_27.
// New features:
// 2020_02_27: color in red the current title in the outline panel
// ==UserScript==
// @name Google doc shortcuts to change font and highlight
// @namespace some_google_doc_shortcuts_to_change_font_highlight
// @version 1.0.1
// @author Willi
// @description some google doc shortcuts to change the font and highlights (help needed for font size!). It also hide the page break dotted lines.
// @updateURL https://gist.github.com/WiliTest/b78ad2c234565ba8ce40df15440540d9.js
// @downloadURL https://gist.github.com/WiliTest/b78ad2c234565ba8ce40df15440540d9.js
// @supportURL https://gist.github.com/WiliTest/b78ad2c234565ba8ce40df15440540d9
// @include https://*docs.google.*/document/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// add a style sheet to the page (needed to tweak CSS) https://stackoverflow.com/a/19392142/1486850
// @grant GM_addStyle
// ==/UserScript==
console.log('ok, tamperstarted !');
// hide the page break doted line:
// https://stackoverflow.com/a/52870899/3154274
GM_addStyle ( `
.kix-page-compact::before {
border-top: none;
}
// color in red current title in outline
.outline-refresh .location-indicator-highlight.navigation-item, .outline-refresh .location-indicator-highlight.navigation-item.goog-button-hover {
color: rgb(255, 0, 0);
}
` );
// listen for key shorcuts on the text part of google gocs
// ● Tuto - 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
// ○ for dispatch :
// https://jsfiddle.net/6vyL98mz/33/
// https://jsfiddle.net/ox2La621/1/
var editingIFrame = $('iframe.docs-texteventtarget-iframe')[0];
if (editingIFrame) {
editingIFrame.contentDocument.addEventListener("keydown", dispatchkeyboard, false);
}
// match the key with the action
function dispatchkeyboard(key) {
// frontcolor
if (key.altKey && key.code === "KeyX") {// alt+X
var button = document.getElementById("textColorButton");
callMouseEvent(button);
setTimeout(function(){
var color_choice = document.getElementById("docs-material-colorpalette-cell-17"); // dark blue
console.log("dark blue: clickbutton wait 2sec");
callMouseEvent(color_choice);
}, 1);
}
if (key.altKey && key.shiftKey && key.code === "KeyX") {// shift+alt+X (ctrl+alt+X doest work (conflict with inbuilt shortcut?))
var button = document.getElementById("textColorButton");
callMouseEvent(button);
setTimeout(function(){
var color_choice = document.getElementById("docs-material-colorpalette-cell-16"); // light blue
console.log("light blue: clickbutton wait 2sec");
callMouseEvent(color_choice);
}, 1);
}
if (key.altKey && key.code === "KeyB") {//
var button = document.getElementById("textColorButton");
callMouseEvent(button);
setTimeout(function(){
var color_choice = document.getElementById("docs-material-colorpalette-cell-0"); // black
console.log("clickbutton wait 2sec");
callMouseEvent(color_choice);
}, 1);
}
if (key.altKey && key.code === "KeyR") {
var button = document.getElementById("textColorButton");
callMouseEvent(button);
setTimeout(function(){
var color_choice = document.getElementById("docs-material-colorpalette-cell-11"); //red
console.log("clickbutton wait 2sec");
callMouseEvent(color_choice);
}, 1);
}
if (key.altKey && key.code === "KeyP") {
var button = document.getElementById("textColorButton");
callMouseEvent(button);
setTimeout(function(){
var color_choice = document.getElementById("docs-material-colorpalette-cell-50"); // Marron brun
console.log("clickbutton wait 2sec");
callMouseEvent(color_choice);
}, 1);
};
if (key.altKey && key.code === "KeyV") {
var button = document.getElementById("textColorButton");
callMouseEvent(button);
setTimeout(function(){
var color_choice = document.getElementById("docs-material-colorpalette-cell-54"); // dark green 1
console.log("clickbutton wait 2sec");
callMouseEvent(color_choice);
}, 1);
}
//--------------- background color
// hl yellow
if (key.altKey && key.code === "KeyY") {
var buttonbg = document.getElementById("bgColorButton");
callMouseEvent(buttonbg);
setTimeout(function(){
var color_choice = document.getElementById("docs-material-colorpalette-cell-103"); //buttonbg.querySelector('[title="yellow"]');
console.log("clickbutton wait 2sec");
callMouseEvent(color_choice);
}, 1);
}
// hl gray
if (key.altKey && key.code === "KeyG") {
var buttonbg = document.getElementById("bgColorButton");
callMouseEvent(buttonbg);
setTimeout(function(){
var color_choice = document.getElementById("docs-material-colorpalette-cell-96"); //buttonbg.querySelector('[title="yellow"]');
console.log("clickbutton wait 2sec");
callMouseEvent(color_choice);
}, 1);
}
//---------------Failed attempt to change the font size:
function dispatchkeyboard(key) {
if (key.altKey && key.code === "KeyJ") {
var divfont = document.getElementById("fontSizeSelect");
console.log(divfont);
var inputt = divfont.getElementsByTagName('input')[0];
inputt.select();
inputt.value = "6";
consol.log('done');
var ev = document.createEvent('Event');
ev.initEvent('keypress');
ev.which = ev.keyCode = 13;
console.log(ev);
inputt.dispatchEvent(ev);
}
}
// //document.getElementById("fontSizeSelect").click();
// console.log('done');
// triggerMouseEvent (button, "mouseover");
// triggerMouseEvent (button, "mousedown");
// triggerMouseEvent (button, "mouseup");
//
}// end of dispatchkeyboard
//call each mouse event
function callMouseEvent(button){
triggerMouseEvent (button, "mouseover");
triggerMouseEvent (button, "mousedown");
triggerMouseEvent (button, "mouseup");
}
// send mouse even
function triggerMouseEvent (node, eventType) {
var eventObj = document.createEvent('MouseEvents');
eventObj.initEvent (eventType, true, true);
node.dispatchEvent (eventObj);
}
@AnonymousXiaoLongBao
Copy link

how can i download this to tampermonkey (the extension in google) and edit it so it works?
this version works, but when i download it and edit it in the tampermonkey extension it doesn't work anymore
sorry i'm quite new to this.

@WiliTest
Copy link
Author

WiliTest commented Jun 8, 2020

sorry, I'm late: to install it you have a 2 options
Option1: Install the tampermonkey brownser extension, create anew script, delete everything inside, and cut past the script above inside it, click save. To try it refresh (F5) your google doc (you must refresh after each change)

Option 2: Install the tampermonkey brownser extension, and simply click the "raw" button above of this github page, then click "install"

@kriswhiteYT
Copy link

im on the a chrome

@WiliTest
Copy link
Author

(it also works on Edge)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment