Using HTMLService with Google Apps Script

The Text Browser uses the URLFetchApp service of Google Apps Script to fetch web pages and the HtmlService to render this content on the user’s screen.

Here’s the full source that powers the Text Browser sans the CSS styling.

Code.js

// Code.js
function doGet() {
  var html = HtmlService.createTemplateFromFile('textbrowser').evaluate();
  html.setTitle('Text Browser - Digital Inspiration');
  return html;
}

function getHTML(url) {
  try {
    var response = UrlFetchApp.fetch(url);
  } catch (e) {
    return (
      "Sorry but Google couldn't fetch the requested web page. " +
      'Please try another URL!<br />' +
      '<small>' +
      e.toString() +
      '</small>'
    );
  }
  return response.getContentText();
}

TextBrowser.html

// TextBrowser.html
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
  </head>

  <body>
    <div id="wrap">
      <div class="container">
        <div class="page-header">
          <h2 class="title">The Text Browser</h2>

          <small>Enter a URL below and hit the Go! button.</small>
          <div class="input-append">
            <input id="URL" type="text" />
            <button type="button" onclick="loadURL();" id="go">Go!</button>
          </div>
        </div>
        <div class="loading"></div>
        <div class="webpage"></div>
      </div>
    </div>

    <script>
      $('#URL').keyup(function (e) {
        if (e.keyCode == 13) {
          loadURL();
        }
      });

      function onSuccess(html) {
        $('div.webpage').html(html);

        $('div.webpage').show();
        $('div.loading').hide();

        $('div.webpage a').bind('click', function () {
          var value = $(this).attr('href');
          $('#URL').val(value);
          loadURL();
          return false;
        });

        $('div.webpage img').remove();
        $('div.webpage iframe').remove();
        $('div.webpage form').remove();
      }

      function loadURL() {
        var url = $('#URL').val();
        $('div.webpage').hide('fast');
        if (url.length >= 4) {
          $('div.loading').show();
          google.script.run.withSuccessHandler(onSuccess).getHTML(url);
        }
      }
    </script>
  </body>
</html>

Awards & Recognition