Installation

To get the most out of this add-on, you will also want to follow the directions below to customize the look of Google Docs:

1) In a Google Doc, go to Tools -> Document outline (this shows the “NavPane”)

2) Go to View -> Print Layout (this will get rid of lots of white space between pages)

3) In the Google Doc Settings, turn on Offline Editing (scripts won’t work without internet, but you will still be able to access and edit your files)

4) Install the Debate Template Google Add-On (if you haven't done so yet)

***NOTE*** - the steps below are optional. It inserts extra code into Google Docs for formatting purposes. The css code is for formatting the nav-pane on the left and for shrinking the width of the sidebar. The javascript code is for enabling the nav-pane to have collapsable elements and for adding hot keys for many of the formatting operations. Both refer to files stored on my google drive. If you'd like to see the contents of these files, type the urls into your browser's url bar. If you are code savvy and have ideas of how to improve my code, just let me know.

5) Make your function keys work without requiring pressing the Fn key: Mac / Windows / Chromebook

NEW DIRECTIONS

6) Install Tampermonkey for Chrome

7) In Tampermoney, create a new script with the following code:

// ==UserScript==

// @name Debate Template Script

// @namespace http://tampermonkey.net/

// @version 0.1

// @description try to take over the world!

// @author You

// @match https://docs.google.com/document/d/*

// @icon https://www.google.com/s2/favicons?domain=google.com

// @grant none

// ==/UserScript==

(function () {

'use strict';

const appscriptSecret = "M-QjBWlrHgLXJ_3ClAKQETfQq_tZ4bSk_" // apps script project key

const keyMaps = {

'F3': "Condense",

'F4': "Pocket",

'F5': "Hat",

'F6': "Block",

'F7': "Tag",

'F8': "Cite",

'F9': "Underline",

'F10': "Emphasis",

'F11': "Highlight",

'F12': "Clear" // works with e.preventDefault on macos, need to test on other platforms

}

var observer = new MutationObserver(function (mutationRecords) {

var node = document.createElement('div');

var hotkeyNode = document.createTextNode(`Hotkeys loading; Please wait...`);

node.setAttribute('id', 'DocsVerbatimHotkeysStatus')

node.appendChild(hotkeyNode)

document.querySelector("#docs-titlebar-container > div.docs-titlebar-buttons").prepend(node)

observer.disconnect()

});

observer.observe(document.querySelector("#docs-titlebar-container > div.docs-titlebar-buttons"), { childList: true })

window.addEventListener('load', function () {

var simulateMouseEvent = function (element, eventName, coordX, coordY) {

element.dispatchEvent(new MouseEvent(eventName, {

view: window,

bubbles: true,

cancelable: true,

clientX: coordX,

clientY: coordY,

button: 0

}));

};

var execClick = (element) => {

var box = element.getBoundingClientRect(),

coordX = box.left + (box.right - box.left) / 2,

coordY = box.top + (box.bottom - box.top) / 2;

simulateMouseEvent(element, "mousedown", coordX, coordY);

simulateMouseEvent(element, "mouseup", coordX, coordY);

simulateMouseEvent(element, "click", coordX, coordY);

return {

box: box,

coordX: coordX,

coordY: coordY

}

execClick(document.querySelector("#docs-extensions-menu")) // click open menu to propagate the divs of the extension

execClick(document.querySelector(`#${appscriptSecret}`))

execClick(document.querySelector("#docs-extensions-menu")) // close the menu that was just opened

// find the div that has all the verbatim options:

var possibleDivs = Array.from(document.querySelector('body').children).filter(x => x.nodeName.toLowerCase() === "div") // all possible divs in body that may contain the extension function custom menu

let funcContainerDiv;

for (var element of possibleDivs) {

try {

if (element.children[0].id.includes(appscriptSecret)) {

funcContainerDiv = element // set the div that contains the function custom menu funcContainerDiv for later use

}

} catch (e) { }

}

var funcMap = {}

for (var ele of funcContainerDiv.children) {

try {

funcMap[`${ele.children[0].textContent}`] = ele

} catch (e) { }

}

document.querySelector('#DocsVerbatimHotkeysStatus').innerHTML = "✓ Hotkeys Loaded!"

// key press handling

var targets = document.getElementsByClassName("docs-texteventtarget-iframe");

targets[0].contentDocument.childNodes[0].addEventListener('keydown', function (event) {

if (event.code.includes('F') && keyMaps[event.code] != undefined) { // detect function keys to improve efficiency

event.preventDefault()

execClick(document.querySelector("#docs-extensions-menu"))

execClick(document.querySelector(`#${appscriptSecret}`))

execClick(funcMap[keyMaps[event.code]])

}

})

}, false);

})();

OLD DIRECTIONS

6) Install This CSS & Javscript Chrome Injector

7) Enter the following code in the CSS and Javascript tabs of the Chrome Injector WHILE ON A GOOGLE DOC.

CSS tab - ***UPDATED July 15th, 2016***

@import url("https://docs.google.com/uc?export=open&id=0BxxolsFkwnDqNUtUeExSWC14V1E");

.navigation-item {

height:20px;

line-height:20px;

}

.collapsed-menu:before {

content:"▶";

}

.expanded-menu:before {

content:"▼";

}

.empty-menu:before {

content:"▶";

visibility:hidden;

}

.navigation-widget-row-controls-control {

display: none;

visibility: hidden;

}

.script-application-sidebar {

width : 200px;

}

Javascript Tab - ***UPDATED July 12th, 2016***

//use the old version if a reaed fails else if(script !== undefined) { eval(script);

load(); } } } rawFile.open("GET", url, true); rawFile.send(); }

Alternate Javascript Tab - This doesn't have navigation controls, but it does have the short cuts