• Google Apps Scriptでサイドバーを表示します。
• サイドバーの内容はcreateHtmlOutputFromFileメソッドで読み込むHTMLで、jQueryを扱うこともできます。
• Google ドキュメント アドオンではCSSのパッケージ(https://ssl.gstatic.com/docs/script/css/add-ons.css)が用意されていて、link要素で読み込んで利用します。
• HTML側からサーバースクリプトを呼び出すときは「google.script.run」を使います。

//var ui = SpreadsheetApp.getUi();
var ui = DocumentApp.getUi();

function onOpen(e){
    var html = HtmlService.createHtmlOutputFromFile('Sidebar').setTitle('サンプル サイドバー').setWidth(300);
    ui.showSidebar(html);
}

function showAlert(arg){
    ui.alert('Hello! ' + arg);
}

・Sidebar.html

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(function(){
        $('#btnOK').click(function(){
            google.script.run.showAlert('Taro.');
        });
    });
</script>
<p><button id="btnOK" class="action">OK</button></p>

• CSS Package for Add-ons
• https://developers.google.com/apps-script/add-ons/css?hl=ja
• HTML Service: Create and Serve HTML
• https://developers.google.com/apps-script/guides/html/?hl=ja
• HTML Service
• https://developers.google.com/apps-script/reference/html/?hl=ja
• createHtmlOutputFromFile(filename)
• https://developers.google.com/apps-script/reference/html/html-service?hl=ja#createHtmlOutputFromFile%28String%29
• Class HtmlOutput
• https://developers.google.com/apps-script/reference/html/html-output?hl=ja
• showSidebar(userInterface)
• https://developers.google.com/apps-script/reference/base/ui?hl=ja#showSidebar%28Object%29
• Class google.script.run (Client-side API)
• https://developers.google.com/apps-script/guides/html/reference/run?hl=ja