Using HTMLService with Google Apps Script

November 03, 2017

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>

Google Apps Script

ShareWhatsAppTwitterFacebook

Amit Agarwal

Google Developer Expert, Google Cloud Champion

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory