[NaCl SDK] Examples cleanup.

BUG=none
TEST=none
NOTRY=true


Review URL: https://chromiumcodereview.appspot.com/10674003

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@145173 0039d316-1c4b-4281-b951-d872f2087c98

28 files changed, 698 insertions, 1282 deletions

diff --git a/native_client_sdk/src/examples/common.js b/native_client_sdk/src/examples/common.js
index cedb470b..f7df0d8 100644
--- a/native_client_sdk/src/examples/common.js
+++ b/native_client_sdk/src/examples/common.js
@@ -2,75 +2,206 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-naclModule = null;  // Global application object.
-statusText = 'NO-STATUSES';
-
-function extractSearchParameter(name, def_value) {
-  var nameIndex = window.location.search.indexOf(name + "=");
-  if (nameIndex != -1) {
-    var value = location.search.substring(nameIndex + name.length + 1);
-    var endIndex = value.indexOf("&");
-    if (endIndex != -1)
-      value = value.substring(0, endIndex);
-    return value;
+// Javascript module pattern:
+//   see http://en.wikipedia.org/wiki/Unobtrusive_JavaScript#Namespaces
+// In essence, we define an anonymous function which is immediately called and
+// returns a new object. The new object contains only the exported definitions;
+// all other definitions in the anonymous function are inaccessible to external
+// code.
+var common = (function () {
+
+  /**
+   * Create the Native Client <embed> element as a child of the DOM element
+   * named "listener".
+   *
+   * @param {string} name The name of the example.
+   * @param {string} tool The name of the toolchain, e.g. "glibc", "newlib" etc.
+   * @param {number} width The width to create the plugin.
+   * @param {number} height The height to create the plugin.
+   */
+  function createNaClModule(name, tool, width, height) {
+    var moduleEl = document.createElement('embed');
+    moduleEl.setAttribute('name', 'nacl_module');
+    moduleEl.setAttribute('id', 'nacl_module');
+    moduleEl.setAttribute('width', width);
+    moduleEl.setAttribute('height',height);
+    moduleEl.setAttribute('src', tool + '/' + name + '.nmf');
+    moduleEl.setAttribute('type', 'application/x-nacl');
+
+    // The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
+    // and a 'message' event listener attached.  This wrapping method is used
+    // instead of attaching the event listeners directly to the <EMBED> element
+    // to ensure that the listeners are active before the NaCl module 'load'
+    // event fires.
+    var listenerDiv = document.getElementById('listener');
+    listenerDiv.appendChild(moduleEl);
+  }
+
+  /** Add the default "load" and "message" event listeners to the element with
+   * id "listener".
+   *
+   * The "load" event is sent when the module is successfully loaded. The
+   * "message" event is sent when the naclModule posts a message using
+   * PPB_Messaging.PostMessage() (in C) or pp::Instance().PostMessage() (in
+   * C++).
+   */
+  function attachDefaultListeners() {
+    var listenerDiv = document.getElementById('listener');
+    listenerDiv.addEventListener('load', moduleDidLoad, true);
+    listenerDiv.addEventListener('message', handleMessage, true);
+  }
+
+  /**
+   * Called when the NaCl module is loaded.
+   *
+   * This event listener is registered in createNaClModule above.
+   */
+  function moduleDidLoad() {
+    common.naclModule = document.getElementById('nacl_module');
+    updateStatus('SUCCESS');
+
+    if (typeof window.moduleDidLoad !== 'undefined') {
+      window.moduleDidLoad();
+    }
+  }
+
+  /**
+   * Hide the NaCl module's embed element.
+   *
+   * We don't want to hide by default; if we do, it is harder to determine that
+   * a plugin failed to load. Instead, call this function inside the example's
+   * "moduleDidLoad" function.
+   *
+   */
+  function hideModule() {
+    // Setting common.naclModule.style.display = "None" doesn't work; the
+    // module will no longer be able to receive postMessages.
+    common.naclModule.style.height = "0";
+  }
+
+  /**
+   * Return true when |s| starts with the string |prefix|.
+   *
+   * @param {string} s The string to search.
+   * @param {string} prefix The prefix to search for in |s|.
+   */
+  function startsWith(s, prefix) {
+    // indexOf would search the entire string, lastIndexOf(p, 0) only checks at
+    // the first index. See: http://stackoverflow.com/a/4579228
+    return s.lastIndexOf(prefix, 0) === 0;
   }
-  return def_value;
-}
-
-function createNaClModule(name, tool, width, height) {
-  var listenerDiv = document.getElementById('listener');
-  var naclModule = document.createElement('embed');
-  naclModule.setAttribute('name', 'nacl_module');
-  naclModule.setAttribute('id', 'nacl_module');
-  naclModule.setAttribute('width', width);
-  naclModule.setAttribute('height',height);
-  naclModule.setAttribute('src', tool + '/' + name + '.nmf');
-  naclModule.setAttribute('type', 'application/x-nacl');
-  listenerDiv.appendChild(naclModule);
-}
-
-// Indicate success when the NaCl module has loaded.
-function moduleDidLoad() {
-  naclModule = document.getElementById('nacl_module');
-  updateStatus('SUCCESS');
-}
-
-// Handle a message coming from the NaCl module.
-function handleMessage(message_event) {
-  alert(message_event.data);
-}
-
-// If the page loads before the Native Client module loads, then set the
-// status message indicating that the module is still loading.  Otherwise,
-// do not change the status message.
-function pageDidLoad(name, tool, width, height) {
-  updateStatus('Page loaded.');
-  if (naclModule == null) {
-    updateStatus('Creating embed: ' + tool)
-    width = typeof width !== 'undefined' ? width : 200;
-    height = typeof height !== 'undefined' ? height : 200;
-    createNaClModule(name, tool, width, height)
-  } else {
-    // It's possible that the Native Client module onload event fired
-    // before the page's onload event.  In this case, the status message
-    // will reflect 'SUCCESS', but won't be displayed.  This call will
-    // display the current message.
-    updateStatus('Waiting.');
+
+  /**
+   * Add a message to an element with id "log", separated by a <br> element.
+   *
+   * This function is used by the default "log:" message handler.
+   *
+   * @param {string} message The message to log.
+   */
+  function logMessage(message) {
+    var logEl = document.getElementById('log');
+    logEl.innerHTML += message + '<br>';
+    console.log(message)
   }
-}
-
-// Set the global status message.  If the element with id 'statusField'
-// exists, then set its HTML to the status message as well.
-// opt_message The message test.  If this is null or undefined, then
-//     attempt to set the element with id 'statusField' to the value of
-//     |statusText|.
-function updateStatus(opt_message) {
-  if (opt_message) {
-    statusText = opt_message; 
+
+  /**
+   */
+  var defaultMessageTypes = {
+    'alert': alert,
+    'log': logMessage
+  };
+
+  /**
+   * Called when the NaCl module sends a message to JavaScript (via
+   * PPB_Messaging.PostMessage())
+   *
+   * This event listener is registered in createNaClModule above.
+   *
+   * @param {Event} message_event A message event. message_event.data contains
+   *     the data sent from the NaCl module.
+   */
+  function handleMessage(message_event) {
+    if (typeof message_event.data === 'string') {
+      for (var type in defaultMessageTypes) {
+        if (defaultMessageTypes.hasOwnProperty(type)) {
+          if (startsWith(message_event.data, type + ':')) {
+            func = defaultMessageTypes[type];
+            func(message_event.data.slice(type.length + 1));
+          }
+        }
+      }
+    }
+
+    if (typeof window.handleMessage !== 'undefined') {
+      window.handleMessage(message_event);
+    }
   }
-  var statusField = document.getElementById('statusField');
-  if (statusField) {
-    statusField.innerHTML = statusText;
+
+  /**
+   * Common entrypoint for NaCl module loading. This function should be hooked
+   * up to the document body's onload event, for example:
+   *
+   *   <body onload="common.onload(...)">
+   *
+   * @param {string} name The name of the example.
+   * @param {string} tool The name of the toolchain, e.g. "glibc", "newlib" etc.
+   * @param {number} width The width to create the plugin.
+   * @param {number} height The height to create the plugin.
+   */
+  function pageDidLoad(name, tool, width, height) {
+    // If the page loads before the Native Client module loads, then set the
+    // status message indicating that the module is still loading.  Otherwise,
+    // do not change the status message.
+    updateStatus('Page loaded.');
+    if (common.naclModule == null) {
+      updateStatus('Creating embed: ' + tool)
+
+      // We use a non-zero sized embed to give Chrome space to place the bad
+      // plug-in graphic, if there is a problem.
+      width = typeof width !== 'undefined' ? width : 200;
+      height = typeof height !== 'undefined' ? height : 200;
+      createNaClModule(name, tool, width, height);
+      attachDefaultListeners();
+    } else {
+      // It's possible that the Native Client module onload event fired
+      // before the page's onload event.  In this case, the status message
+      // will reflect 'SUCCESS', but won't be displayed.  This call will
+      // display the current message.
+      updateStatus('Waiting.');
+    }
   }
-}
 
+  /** Saved text to display in the element with id 'statusField'. */
+  var statusText = 'NO-STATUSES';
+
+  /**
+   * Set the global status message. If the element with id 'statusField'
+   * exists, then set its HTML to the status message as well.
+   *
+   * @param {string} opt_message The message to set. If null or undefined, then
+   *     set element 'statusField' to the message from the last call to
+   *     updateStatus.
+   */
+  function updateStatus(opt_message) {
+    if (opt_message) {
+      statusText = opt_message;
+    }
+    var statusField = document.getElementById('statusField');
+    if (statusField) {
+      statusField.innerHTML = statusText;
+    }
+  }
+
+  // The symbols to export.
+  return {
+    /** A reference to the NaCl module, once it is loaded. */
+    naclModule: null,
+
+    onload: pageDidLoad,
+    attachDefaultListeners: attachDefaultListeners,
+    createNaClModule: createNaClModule,
+    hideModule: hideModule,
+    updateStatus: updateStatus
+  };
+
+}());
diff --git a/native_client_sdk/src/examples/dlopen/dlopen.cc b/native_client_sdk/src/examples/dlopen/dlopen.cc
index 567c7c81..5a5487e 100644
--- a/native_client_sdk/src/examples/dlopen/dlopen.cc
+++ b/native_client_sdk/src/examples/dlopen/dlopen.cc
@@ -48,7 +48,7 @@ class dlOpenInstance : public pp::Instance {
 
   // Helper function to post a message back to the JS and stdout functions.
   void logmsg(const char* pStr){
-    PostMessage(pp::Var(pStr));
+    PostMessage(pp::Var(std::string("log:") + pStr));
     fprintf(stdout, pStr);
   }
 
diff --git a/native_client_sdk/src/examples/dlopen/index.html b/native_client_sdk/src/examples/dlopen/index.html
index 001005b..e2a2d78 100644
--- a/native_client_sdk/src/examples/dlopen/index.html
+++ b/native_client_sdk/src/examples/dlopen/index.html
@@ -1,76 +1,44 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
 <head>
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="-1" />
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
   <title><TITLE></title>
   <script type="text/javascript" src="common.js"></script>
-  <script type="text/javascript" >
-    function handleMessage(message_event) {
-      updateStatus(message_event.data);
+  <script type="text/javascript">
+    function moduleDidLoad() {
+      // The module is not hidden by default so we can easily see if the plugin
+      // failed to load.
+      common.hideModule();
     }
 
-    function updateStatus(opt_message) {
-      if (opt_message) {
-        statusText = opt_message;
-      }
-      var statusField = document.getElementById('statusField');
-      var answerLog = document.getElementById('answerlog');
-      if (statusField) {
-        statusField.innerHTML = statusText;
-      }
-      if (answerLog) {
-        answerLog.innerHTML += (opt_message  +"<br>");
-      }
-    }
-
-    function askBall()
-    {
-      naclModule = document.getElementById('nacl_module');
-      var consolec = document.getElementById('consolec');
-      updateStatus('ASK: ' + consolec.value);
-      naclModule.postMessage('query');
+    function askBall() {
+      var questionEl = document.getElementById('question');
+      var query = questionEl.value;
+      questionEl.value = '';
+      document.getElementById('log').innerHTML += 'You asked:' + query + '<br>';
+      common.naclModule.postMessage('query');
       return false;
     }
   </script>
 </head>
-<body onload="pageDidLoad('<NAME>', '<tc>')">
-
-<h1><TITLE></h1>
-<h2>Status: <code id="statusField">NO-STATUS</code></h2>
-  <!-- The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-  and a 'message' event listener attached.  This wrapping method is used
-  instead of attaching the event listeners directly to the <EMBED> element to
-  ensure that the listeners are active before the NaCl module 'load' event
-  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-  pp::Instance.PostMessage() (in C++) from within the initialization code in
-  your NaCl module. 
-  
-  The src points to a manifest file, which provides the Native Client plug-in
-  a mapping between architecture and NaCl Executable (NEXE). 
-  
-  We use a non-zero sized embed to give Chrome space to place the bad plug-in
-  graphic, if there is a problem.
-  -->
-  <div id="listener">
-    <script type="text/javascript">
-      var listener = document.getElementById('listener')
-      listener.addEventListener('load', moduleDidLoad, true);
-      listener.addEventListener('message', handleMessage, true);
-    </script>
-  </div>
-  <h1>The Magic 8 Ball </h1>
-  </div>
-  <br />
-  <div>Eightball loaded, type a question below, press the button, and get a response.</div>
-  <input type="text" id="consolec" value=""/>
-  <input type="button" id="button" value="ASK!" onclick="return askBall()"/>
-  </div>
-  <div id="answerlog"></div>
+<body onload="common.onload('<NAME>', '<tc>')">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <div>Magic eightball: type a question below, press the button, and get a
+      response.</div>
+  <form action="#" onsubmit="return askBall();">
+    <input type="text" id="question" value="">
+    <input type="submit" value="ASK!">
+  </form>
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
+  <div id="listener"></div>
+  <div id="log"></div>
 </body>
 </html>
diff --git a/native_client_sdk/src/examples/file_histogram/index.html b/native_client_sdk/src/examples/file_histogram/index.html
index 7642f30..f03c0d3 100644
--- a/native_client_sdk/src/examples/file_histogram/index.html
+++ b/native_client_sdk/src/examples/file_histogram/index.html
@@ -6,16 +6,16 @@
   found in the LICENSE file.
   -->
 <head>
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="-1" />
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
   <title><TITLE></title>
   <script type="text/javascript" src="common.js"></script>
   <script type ="text/javascript" >
     function postFileContents(file) {
       var reader = new FileReader();
       reader.onload = function(load_event) {
-        if (naclModule)
-          naclModule.postMessage(load_event.target.result);
+        if (common.naclModule)
+          common.naclModule.postMessage(load_event.target.result);
       }
       reader.readAsArrayBuffer(file);
     }
@@ -37,45 +37,20 @@
       var files = file_input.files;
       for(var i = 0; i < files.length; ++i)
         postFileContents(files[i]);
-      return false;
     }
   </script>
-
 </head>
-<body onload="pageDidLoad('<NAME>', '<tc>', 256, 256)">
-
-<h1>Native Client Simple Module</h1>
-<h2>Status: <code id="statusField">NO-STATUS</code></h2>
-  <!-- The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-  and a 'message' event listener attached.  This wrapping method is used
-  instead of attaching the event listeners directly to the <EMBED> element to
-  ensure that the listeners are active before the NaCl module 'load' event
-  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-  pp::Instance.PostMessage() (in C++) from within the initialization code in
-  your NaCl module. 
-  
-  The src points to a manifest file, which provides the Native Client plug-in
-  a mapping between architecture and NaCl Executable (NEXE). 
-  
-  We use a non-zero sized embed to give Chrome space to place the bad plug-in
-  graphic, if there is a problem.
-  -->
+<body onload="common.onload('<NAME>', '<tc>', 256, 256)">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <input type="file" id="FileInput" onchange="handleFileInput()" multiple>
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
   <div id="listener">
     <script type="text/javascript">
       var listener = document.getElementById('listener');
-      listener.addEventListener('load', moduleDidLoad, true);
-      listener.addEventListener('message', handleMessage, true);
       listener.addEventListener('drop', handleFileDrop, true);
     </script>
-    <form name="FileInput"
-          action=""
-          method=""
-          onsubmit="return handleFileInput()">
-      <input type="file"
-             id="FileInput"
-             onchange="this.form.onsubmit()"
-             multiple>
-    </form>
   </div>
 </body>
 </html>
diff --git a/native_client_sdk/src/examples/file_io/index.html b/native_client_sdk/src/examples/file_io/index.html
index a71a3d1..db3eaed 100644
--- a/native_client_sdk/src/examples/file_io/index.html
+++ b/native_client_sdk/src/examples/file_io/index.html
@@ -6,42 +6,42 @@
   found in the LICENSE file.
   -->
 <head>
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="-1" />
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
   <title><TITLE></title>
   <script type="text/javascript" src="common.js"></script>
   <script type="text/javascript" >
     function loadFile() {
-      if (naclModule) {
+      if (common.naclModule) {
         var fileName = document.getElementById('file_name').value;
 
         // Package a message using a simple protocol containing:
         // instruction file_name_length file_name
         var msg = "ld " + fileName.length + " " + fileName;
-        naclModule.postMessage(msg);
+        common.naclModule.postMessage(msg);
       }
     }
 
     function saveFile() {
-      if (naclModule) {
+      if (common.naclModule) {
         var fileName = document.getElementById('file_name').value;
         var fileText = document.getElementById('file_editor').value;
 
         // Package a message using a simple protocol containing:
         // instruction file_name_length file_name file_contents
         var msg = "sv " + fileName.length + " " + fileName + " " + fileText;
-        naclModule.postMessage(msg);
+        common.naclModule.postMessage(msg);
       }
     }
 
     function deleteFile() {
-      if (naclModule) {
+      if (common.naclModule) {
         var fileName = document.getElementById('file_name').value;
 
         // Package a message using a simple protocol containing:
         // instruction file_name_length file_name
         var msg = "de " + fileName.length + " " + fileName;
-        naclModule.postMessage(msg);
+        common.naclModule.postMessage(msg);
       }
     }
 
@@ -49,11 +49,11 @@
       var messageParts = message_event.data.split("|", 3);
 
       if (messageParts[0] == "ERR") {
-        updateStatus(messageParts[1]);
+        common.updateStatus(messageParts[1]);
         document.getElementById('statusField').style.color = "red";
       }
       else if(messageParts[0] == "STAT") {
-        updateStatus(messageParts[1]);
+        common.updateStatus(messageParts[1]);
       }
       else if (messageParts[0] == "DISP") {
         // Display the message in the file edit box
@@ -61,51 +61,39 @@
       }
       else if (messageParts[0] == "READY") {
         var statusField = document.getElementById('statusField');
-        updateStatus(statusField.innerHTML + ' Ready!');
+        common.updateStatus(statusField.innerHTML + ' Ready!');
       }
     }
   </script>
 </head>
 <body>
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
 
-<h1><TITLE></h1>
-<h2>Status: <code id="statusField">NO-STATUS</code></h2>
-  <!-- The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-  and a 'message' event listener attached.  This wrapping method is used
-  instead of attaching the event listeners directly to the <EMBED> element to
-  ensure that the listeners are active before the NaCl module 'load' event
-  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-  pp::Instance.PostMessage() (in C++) from within the initialization code in
-  your NaCl module. 
-  
-  The src points to a manifest file, which provides the Native Client plug-in
-  a mapping between architecture and NaCl Executable (NEXE). 
-  
-  We use a non-zero sized embed to give Chrome space to place the bad plug-in
-  graphic, if there is a problem.
-  -->
+  <textarea id="file_editor"
+    cols="40"
+    rows="10"
+    wrap="hard"
+    placeholder="Enter some text to save in a file..."></textarea>
+  <br>File Name
+  <input type="text" id="file_name" action="">
+  <button id="save_but" onclick="saveFile()" action="">Save</button>
+  <button id="load_but" onclick="loadFile()" action="">Load</button>
+  <button id="delete_but" onclick="deleteFile()" action="">Delete</button>
+
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
   <div id="listener">
     <script type="text/javascript">
       window.webkitStorageInfo.requestQuota(window.PERSISTENT, 1024*1024,
           function(bytes) {
-            updateStatus('Allocated '+bytes+' bytes of persistant storage.');
-            createNaClModule('<NAME>', '<tc>', 200, 200);
+            common.updateStatus(
+                'Allocated '+bytes+' bytes of persistant storage.');
+            common.createNaClModule('<NAME>', '<tc>', 200, 200);
+            common.attachDefaultListeners();
           },
           function(e) { alert('Failed to allocate space') });
-      var listener = document.getElementById('listener')
-      listener.addEventListener('load', moduleDidLoad, true);
-      listener.addEventListener('message', handleMessage, true);
     </script>
-    <textarea id="file_editor"
-      cols="40"
-      rows="10"
-      wrap="hard"
-      placeholder="Enter some text to save in a file..."></textarea>
-    <br>File Name
-    <input type="text" id="file_name" action=""/>
-    <button id="save_but" onclick="saveFile()" action="">Save</button>
-    <button id="load_but" onclick="loadFile()" action="">Load</button>
-    <button id="delete_but" onclick="deleteFile()" action="">Delete</button>
   </div>
 </body>
 </html>
diff --git a/native_client_sdk/src/examples/fullscreen_tumbler/example.dsc b/native_client_sdk/src/examples/fullscreen_tumbler/example.dsc
index eb45d6d..3e843eb 100644
--- a/native_client_sdk/src/examples/fullscreen_tumbler/example.dsc
+++ b/native_client_sdk/src/examples/fullscreen_tumbler/example.dsc
@@ -2,7 +2,7 @@
   'TOOLS': ['newlib', 'glibc', 'pnacl'],
   'TARGETS': [
     {
-      'NAME' : 'tumbler',
+      'NAME' : 'fullscreen_tumbler',
       'TYPE' : 'main',
       'SOURCES' : [
         'callback.h',
diff --git a/native_client_sdk/src/examples/fullscreen_tumbler/index.html b/native_client_sdk/src/examples/fullscreen_tumbler/index.html
index 558ac2dc..45b7f1f 100644
--- a/native_client_sdk/src/examples/fullscreen_tumbler/index.html
+++ b/native_client_sdk/src/examples/fullscreen_tumbler/index.html
@@ -1,58 +1,42 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
 <head>
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="-1" />
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
   <title><TITLE></title>
-    <script type="text/javascript">
-      // Provide the tumbler namespace
-      tumbler = {};
-      // Fullscreen support is in Chrome version 16.
-      tumbler.CHROME_MINIMUM_VERSION = 16;
-    </script>
-    <script type="text/javascript" src="check_browser.js"></script>
-    <script type="text/javascript" src="bind.js"></script>
-    <script type="text/javascript" src="dragger.js"></script>
-    <script type="text/javascript" src="tumbler.js"></script>
-    <script type="text/javascript" src="vector3.js"></script>
-    <script type="text/javascript" src="trackball.js"></script>
-    <script type="text/javascript">
-      // Check for Native Client support in the browser before the DOM loads.
-      var isValidBrowser = false;
-      var browserSupportStatus = 0;
-      var checker = new browser_version.BrowserChecker(
-          tumbler.CHROME_MINIMUM_VERSION,
-          navigator["appVersion"],
-          navigator["plugins"]);
-      checker.checkBrowser();
-
-      isValidBrowser = checker.getIsValidBrowser();
-      browserSupportStatus = checker.getBrowserSupportStatus();
-    </script>
+  <script type="text/javascript">
+    // Provide the tumbler namespace
+    tumbler = {};
+  </script>
+  <script type="text/javascript" src="common.js"></script>
+  <script type="text/javascript" src="check_browser.js"></script>
+  <script type="text/javascript" src="bind.js"></script>
+  <script type="text/javascript" src="dragger.js"></script>
+  <script type="text/javascript" src="tumbler.js"></script>
+  <script type="text/javascript" src="vector3.js"></script>
+  <script type="text/javascript" src="trackball.js"></script>
+  <script type="text/javascript">
+    function moduleDidLoad() {
+      tumbler.application = new tumbler.Application();
+      tumbler.application.moduleDidLoad();
+    }
+  </script>
 </head>
-  <body id="bodyId">
-    <h1>Interactive Cube Example</h1>
-    <p>
-      The Native Client module executed in this page draws a 3D cube
-      and allows you to rotate it using a virtual trackball method. To toggle
-      the view to/from fullscreen, press the Enter key.
-    </p>
-    <div id="tumbler_view"></div>
-    <script type="text/javascript">
-      if (browserSupportStatus ==
-          browser_version.BrowserChecker.StatusValues.CHROME_VERSION_TOO_OLD) {
-          alert('This example will only work on Chrome version ' +
-                tumbler.CHROME_MINIMUM_VERSION +
-                ' or later.');
-      } else {
-        tumbler.application = new tumbler.Application();
-        tumbler.application.run('tumbler_view');
-      }
-    </script>
-  </body>
+<body onload="common.onload('<NAME>', '<tc>', 480, 480)">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <p>
+    The Native Client module executed in this page draws a 3D cube
+    and allows you to rotate it using a virtual trackball method. To toggle
+    the view to/from fullscreen, press the Enter key.
+  </p>
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+    See common.js.-->
+  <div id="listener"></div>
+</body>
 </html>
diff --git a/native_client_sdk/src/examples/fullscreen_tumbler/tumbler.js b/native_client_sdk/src/examples/fullscreen_tumbler/tumbler.js
index de8c2bf..5b49fd9 100644
--- a/native_client_sdk/src/examples/fullscreen_tumbler/tumbler.js
+++ b/native_client_sdk/src/examples/fullscreen_tumbler/tumbler.js
@@ -40,25 +40,6 @@ tumbler.Application = function() {
    * @private
    */
   this.dragger_ = null;
-
-  /**
-   * The function objects that get attached as event handlers.  These are
-   * cached so that they can be removed when they are no longer needed.
-   * @type {function}
-   * @private
-   */
-  this.boundModuleDidLoad_ = null;
-}
-
-/**
- * The ids used for elements in the DOM.  The Tumbler Application expects these
- * elements to exist.
- * @enum {string}
- * @private
- */
-tumbler.Application.DomIds_ = {
-  MODULE: 'tumbler',  // The <embed> element representing the NaCl module
-  VIEW: 'tumbler_view'  // The <div> containing the NaCl element.
 }
 
 /**
@@ -66,9 +47,7 @@ tumbler.Application.DomIds_ = {
  * @param {?Element} nativeModule The instance of the native module.
  */
 tumbler.Application.prototype.moduleDidLoad = function() {
-  this.module_ = document.getElementById(tumbler.Application.DomIds_.MODULE);
-  // Unbind the load function.
-  this.boundModuleDidLoad_ = null;
+  this.module_ = document.getElementById('nacl_module');
 
   /**
    * Set the camera orientation property on the NaCl module.
@@ -99,35 +78,3 @@ tumbler.Application.prototype.assert = function(cond, message) {
     throw new Error(message);
   }
 }
-
-/**
- * The run() method starts and 'runs' the application.  The trackball object
- * is allocated and all the events get wired up.
- * @param {?String} opt_contentDivName The id of a DOM element in which to
- *     embed the Native Client module.  If unspecified, defaults to
- *     VIEW.  The DOM element must exist.
- */
-tumbler.Application.prototype.run = function(opt_contentDivName) {
-  contentDivName = opt_contentDivName || tumbler.Application.DomIds_.VIEW;
-  var contentDiv = document.getElementById(contentDivName);
-  this.assert(contentDiv, "Missing DOM element '" + contentDivName + "'");
-
-  // Note that the <EMBED> element is wrapped inside a <DIV>, which has a 'load'
-  // event listener attached.  This method is used instead of attaching the
-  // 'load' event listener directly to the <EMBED> element to ensure that the
-  // listener is active before the NaCl module 'load' event fires.
-  this.boundModuleDidLoad_ = this.moduleDidLoad.bind(this);
-  contentDiv.addEventListener('load', this.boundModuleDidLoad_, true);
-
-  // Load the published .nexe.  This includes the 'nacl' attribute which
-  // shows how to load multi-architecture modules.  Each entry in the "nexes"
-  // object in the  .nmf manifest file is a key-value pair: the key is the
-  // runtime ('x86-32', 'x86-64', etc.); the value is a URL for the desired
-  // NaCl module.  To load the debug versions of your .nexes, set the 'nacl'
-  //  attribute to the _dbg.nmf version of the manifest file.
-  contentDiv.innerHTML = '<embed id="'
-                         + tumbler.Application.DomIds_.MODULE + '" '
-                         + 'src=newlib/tumbler.nmf '
-                         + 'type="application/x-nacl" '
-                         + 'width="480" height="480" />'
-}
diff --git a/native_client_sdk/src/examples/gamepad/index.html b/native_client_sdk/src/examples/gamepad/index.html
index 92c06e0..c7d902a 100644
--- a/native_client_sdk/src/examples/gamepad/index.html
+++ b/native_client_sdk/src/examples/gamepad/index.html
@@ -1,42 +1,23 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
 <head>
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="-1" />
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
   <title><TITLE></title>
   <script type="text/javascript" src="common.js"></script>
 </head>
-<body onload="pageDidLoad('<NAME>', '<tc>', '800', '200')">
-
-<h1><TITLE></h1>
-<h2>Status: <code id="statusField">NO-STATUS</code></h2>
-  <!-- The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-  and a 'message' event listener attached.  This wrapping method is used
-  instead of attaching the event listeners directly to the <EMBED> element to
-  ensure that the listeners are active before the NaCl module 'load' event
-  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-  pp::Instance.PostMessage() (in C++) from within the initialization code in
-  your NaCl module. 
-  
-  The src points to a manifest file, which provides the Native Client plug-in
-  a mapping between architecture and NaCl Executable (NEXE). 
-  
-  We use a non-zero sized embed to give Chrome space to place the bad plug-in
-  graphic, if there is a problem.
-  -->
+<body onload="common.onload('<NAME>', '<tc>', '800', '200')">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
   <p> Attached gamepad values should appear, left to right, once they've been
   interacted with. Buttons, esp triggers are analog. </p>
-  <div id="listener">
-    <script type="text/javascript">
-      var listener = document.getElementById('listener')
-      listener.addEventListener('load', moduleDidLoad, true);
-      listener.addEventListener('message', handleMessage, true);
-    </script>
-  </div>
+  <div id="listener"></div>
 </body>
 </html>
diff --git a/native_client_sdk/src/examples/geturl/index.html b/native_client_sdk/src/examples/geturl/index.html
index f47522b..e2f2663 100644
--- a/native_client_sdk/src/examples/geturl/index.html
+++ b/native_client_sdk/src/examples/geturl/index.html
@@ -1,18 +1,24 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
 <head>
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="-1" />
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
   <title><TITLE></title>
   <script type="text/javascript" src="common.js"></script>
-  <script type="text/javascript" >
+  <script type="text/javascript">
+    function moduleDidLoad() {
+      // The module is not hidden by default so we can easily see if the plugin
+      // failed to load.
+      common.hideModule();
+    }
+
     function loadUrl() {
-      naclModule.postMessage('getUrl:geturl_success.html');
+      common.naclModule.postMessage('getUrl:geturl_success.html');
     }
 
     function handleMessage(message_event) {
@@ -34,39 +40,17 @@
     }
   </script>
 </head>
-<body onload="pageDidLoad('<NAME>', '<tc>')">
-
-<h1><TITLE></h1>
-<h2>Status: <code id="statusField">NO-STATUS</code></h2>
-<p>
-<table border=5 cellpadding=5% summary="A title and a result log">
-  <tr>
-    <td valign=top><pre id='general_output' class='notrun'></pre></td>
-  </tr>
-</table>
-<form name="geturl_form" action="" method="get">
-  <input type="button" value="Get URL" onclick="loadUrl()"/>
-</form>
-  <!-- The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-  and a 'message' event listener attached.  This wrapping method is used
-  instead of attaching the event listeners directly to the <EMBED> element to
-  ensure that the listeners are active before the NaCl module 'load' event
-  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-  pp::Instance.PostMessage() (in C++) from within the initialization code in
-  your NaCl module. 
-  
-  The src points to a manifest file, which provides the Native Client plug-in
-  a mapping between architecture and NaCl Executable (NEXE). 
-  
-  We use a non-zero sized embed to give Chrome space to place the bad plug-in
-  graphic, if there is a problem.
-  -->
-  <div id="listener">
-    <script type="text/javascript">
-      var listener = document.getElementById('listener')
-      listener.addEventListener('load', moduleDidLoad, true);
-      listener.addEventListener('message', handleMessage, true);
-    </script>
-  </div>
+<body onload="common.onload('<NAME>', '<tc>')">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <table border=5 cellpadding=5% summary="A title and a result log">
+    <tr>
+      <td valign=top><pre id='general_output' class='notrun'></pre></td>
+    </tr>
+  </table>
+  <input type="button" value="Get URL" onclick="loadUrl()">
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
+  <div id="listener"></div>
 </body>
 </html>
diff --git a/native_client_sdk/src/examples/hello_world/hello_world.c b/native_client_sdk/src/examples/hello_world/hello_world.c
index 80dbe21..434386e 100644
--- a/native_client_sdk/src/examples/hello_world/hello_world.c
+++ b/native_client_sdk/src/examples/hello_world/hello_world.c
@@ -31,10 +31,10 @@ enum {
 };
 
 static const char *s_TCNames[TCMAX] = {
-  "Hello World (newlib)!",
-  "Hello World (glibc)!",
-  "Hello World (pnacl)!",
-  "Hello World (host plugin)!",
+  "alert:Hello World (newlib)!",
+  "alert:Hello World (glibc)!",
+  "alert:Hello World (pnacl)!",
+  "alert:Hello World (host plugin)!",
 };
 
 static PPB_Messaging* ppb_messaging_interface = NULL;
diff --git a/native_client_sdk/src/examples/hello_world/index.html b/native_client_sdk/src/examples/hello_world/index.html
index c0586bd..75546c0 100644
--- a/native_client_sdk/src/examples/hello_world/index.html
+++ b/native_client_sdk/src/examples/hello_world/index.html
@@ -1,40 +1,21 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
 <head>
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="-1" />
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
   <title><TITLE></title>
   <script type="text/javascript" src="common.js"></script>
 </head>
-<body onload="pageDidLoad('<NAME>', '<tc>')">
-
-<h1><TITLE></h1>
-<h2>Status: <code id="statusField">NO-STATUS</code></h2>
-  <!-- The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-  and a 'message' event listener attached.  This wrapping method is used
-  instead of attaching the event listeners directly to the <EMBED> element to
-  ensure that the listeners are active before the NaCl module 'load' event
-  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-  pp::Instance.PostMessage() (in C++) from within the initialization code in
-  your NaCl module. 
-  
-  The src points to a manifest file, which provides the Native Client plug-in
-  a mapping between architecture and NaCl Executable (NEXE). 
-  
-  We use a non-zero sized embed to give Chrome space to place the bad plug-in
-  graphic, if there is a problem.
-  -->
-  <div id="listener">
-    <script type="text/javascript">
-      var listener = document.getElementById('listener')
-      listener.addEventListener('load', moduleDidLoad, true);
-      listener.addEventListener('message', handleMessage, true);
-    </script>
-  </div>
+<body onload="common.onload('<NAME>', '<tc>')">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
+  <div id="listener"></div>
 </body>
 </html>
diff --git a/native_client_sdk/src/examples/hello_world_gles/index.html b/native_client_sdk/src/examples/hello_world_gles/index.html
index 19dc438..451affb4 100644
--- a/native_client_sdk/src/examples/hello_world_gles/index.html
+++ b/native_client_sdk/src/examples/hello_world_gles/index.html
@@ -1,40 +1,21 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
 <head>
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="-1" />
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
   <title><TITLE></title>
   <script type="text/javascript" src="common.js"></script>
 </head>
-<body onload="pageDidLoad('<NAME>', '<tc>', 640, 480)">
-
-<h1><TITLE></h1>
-<h2>Status: <code id="statusField">NO-STATUS</code></h2>
-  <!-- The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-  and a 'message' event listener attached.  This wrapping method is used
-  instead of attaching the event listeners directly to the <EMBED> element to
-  ensure that the listeners are active before the NaCl module 'load' event
-  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-  pp::Instance.PostMessage() (in C++) from within the initialization code in
-  your NaCl module. 
-  
-  The src points to a manifest file, which provides the Native Client plug-in
-  a mapping between architecture and NaCl Executable (NEXE). 
-  
-  We use a non-zero sized embed to give Chrome space to place the bad plug-in
-  graphic, if there is a problem.
-  -->
-  <div id="listener">
-    <script type="text/javascript">
-      var listener = document.getElementById('listener')
-      listener.addEventListener('load', moduleDidLoad, true);
-      listener.addEventListener('message', handleMessage, true);
-    </script>
-  </div>
+<body onload="common.onload('<NAME>', '<tc>', 640, 480)">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
+  <div id="listener"></div>
 </body>
 </html>
diff --git a/native_client_sdk/src/examples/hello_world_interactive/hello_world_interactive.html b/native_client_sdk/src/examples/hello_world_interactive/hello_world_interactive.html
deleted file mode 100644
index 516a995..0000000
--- a/native_client_sdk/src/examples/hello_world_interactive/hello_world_interactive.html
+++ /dev/null
@@ -1,126 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <!--
-  Copyright (c) 2011 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
-<head>
-  <title>Hello, World!</title>
-
-  <script type="text/javascript">
-    helloWorldModule = null;  // Global application object.
-    statusText = 'NO-STATUS';
-
-    // Indicate success when the NaCl module has loaded.
-    function moduleDidLoad() {
-      helloWorldModule = document.getElementById('hello_world');
-      updateStatus('SUCCESS');
-    }
-
-    // Handle a message coming from the NaCl module.
-    function handleMessage(message_event) {
-      alert(message_event.data);
-    }
-
-    // If the page loads before the Native Client module loads, then set the
-    // status message indicating that the module is still loading.  Otherwise,
-    // do not change the status message.
-    function pageDidLoad() {
-      // Set the focus on the text input box.  Doing this means you can press
-      // return as soon as the page loads, and it will fire the reversetText()
-      // function.
-      document.forms.helloForm.inputBox.focus();
-      if (helloWorldModule == null) {
-        updateStatus('LOADING...');
-      } else {
-        // It's possible that the Native Client module onload event fired
-        // before the page's onload event.  In this case, the status message
-        // will reflect 'SUCCESS', but won't be displayed.  This call will
-        // display the current message.
-        updateStatus();
-      }
-    }
-
-    function fortyTwo() {
-      helloWorldModule.postMessage('fortyTwo');
-    }
-
-    function reverseText() {
-      // Grab the text from the text box, pass it into reverseText()
-      var inputBox = document.forms.helloForm.inputBox;
-      helloWorldModule.postMessage('reverseText:' + inputBox.value);
-      // Note: a |false| return tells the <form> tag to cancel the GET action
-      // when submitting the form.
-      return false;
-    }
-
-    // Set the global status message.  If the element with id 'statusField'
-    // exists, then set its HTML to the status message as well.
-    // opt_message The message test.  If this is null or undefined, then
-    //     attempt to set the element with id 'statusField' to the value of
-    //     |statusText|.
-    function updateStatus(opt_message) {
-      if (opt_message)
-        statusText = opt_message;
-      var statusField = document.getElementById('statusField');
-      if (statusField) {
-        statusField.innerHTML = statusText;
-      }
-    }
-  </script>
-</head>
-<body onload="pageDidLoad()">
-
-<h1>Native Client Simple Module</h1>
-<p>
-  <form name="helloForm"
-        action=""
-        method="get"
-        onsubmit="return reverseText()">
-    <input type="text" id="inputBox" name="inputBox" value="Hello world" /><p/>
-    <input type="button" value="Call fortyTwo()" onclick="fortyTwo()" />
-    <input type="submit" value="Call reverseText()" />
-  </form>
-  <!-- Load the published .nexe.  This includes the 'src' attribute which
-  shows how to load multi-architecture modules.  Each entry in the "nexes"
-  object in the  .nmf manifest file is a key-value pair: the key is the runtime
-  ('x86-32', 'x86-64', etc.); the value is a URL for the desired NaCl module.
-  To load the debug versions of your .nexes, set the 'src' attribute to the
-  _dbg.nmf version of the manifest file.
-
-  Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-  and a 'message' event listener attached.  This wrapping method is used
-  instead of attaching the event listeners directly to the <EMBED> element to
-  ensure that the listeners are active before the NaCl module 'load' event
-  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-  pp::Instance.PostMessage() (in C++) from within the initialization code in
-  your NaCl module.
-  -->
-  <div id="listener">
-    <script type="text/javascript">
-      var listener = document.getElementById('listener')
-      listener.addEventListener('load', moduleDidLoad, true);
-      listener.addEventListener('message', handleMessage, true);
-    </script>
-
-    <embed name="nacl_module"
-           id="hello_world"
-           width=200 height=200
-           src="hello_world.nmf"
-           type="application/x-nacl" />
-  </div>
-
-</p>
-
-<p>If the module is working correctly, a click on the "Call fortyTwo()" button
-  should open a popup dialog containing <b>42</b> as its value.</p>
-
-<p> Clicking on the "Call reverseText()" button
-  should open a popup dialog containing the textbox contents and its reverse
-   as its value.</p>
-
-<h2>Status</h2>
-<div id="statusField">NO-STATUS</div>
-</body>
-</html>
diff --git a/native_client_sdk/src/examples/hello_world_interactive/index.html b/native_client_sdk/src/examples/hello_world_interactive/index.html
index 561fd2e..3e6bbe6 100644
--- a/native_client_sdk/src/examples/hello_world_interactive/index.html
+++ b/native_client_sdk/src/examples/hello_world_interactive/index.html
@@ -6,58 +6,42 @@
   found in the LICENSE file.
   -->
 <head>
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="-1" />
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
   <title><TITLE></title>
   <script type="text/javascript" src="common.js"></script>
   <script type="text/javascript">
+    function moduleDidLoad() {
+      // The module is not hidden by default so we can easily see if the plugin
+      // failed to load.
+      common.hideModule();
+    }
+
     function fortyTwo() {
-      naclModule.postMessage('fortyTwo');
+      common.naclModule.postMessage('fortyTwo');
     }
 
     function reverseText() {
-      updateStatus('Reversing');
       // Grab the text from the text box, pass it into reverseText()
       var inputBox = document.getElementById('inputBox');
-      naclModule.postMessage('reverseText:' + inputBox.value);
-      // Note: a |false| return tells the <form> tag to cancel the GET action
-      // when submitting the form.
-      return false;
+      common.naclModule.postMessage('reverseText:' + inputBox.value);
+    }
+
+    function handleMessage(message_event) {
+      alert(message_event.data);
     }
   </script>
 </head>
-<body onload="pageDidLoad('<NAME>', '<tc>')">
-
-<h1>Native Client Simple Module</h1>
-<h2>Status: <code id="statusField">NO-STATUS</code></h2>
-  <!-- The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-  and a 'message' event listener attached.  This wrapping method is used
-  instead of attaching the event listeners directly to the <EMBED> element to
-  ensure that the listeners are active before the NaCl module 'load' event
-  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-  pp::Instance.PostMessage() (in C++) from within the initialization code in
-  your NaCl module. 
-  
-  The src points to a manifest file, which provides the Native Client plug-in
-  a mapping between architecture and NaCl Executable (NEXE). 
-  
-  We use a non-zero sized embed to give Chrome space to place the bad plug-in
-  graphic, if there is a problem.
-  -->
-  <div id="listener">
-    <script type="text/javascript">
-      var listener = document.getElementById('listener')
-      listener.addEventListener('load', moduleDidLoad, true);
-      listener.addEventListener('message', handleMessage, true);
-    </script>
-  </div>
+<body onload="common.onload('<NAME>', '<tc>')">
+  <h1>Native Client Simple Module</h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
+  <div id="listener"></div>
+  <textarea id="inputBox" rows="4" cols="50">Hello World</textarea>
   <div>
-    <textarea id="inputBox" name="inputBox" rows="4" cols="50">Hello World</textarea>
-    <div/>
-    <table>
-    <button id="fortyTwoButton" onclick="fortyTwo()">Call fortyTwo()</button>
-    <button id="reverseTextButton" onclick="reverseText()">Call reverseText()</button>
-    <table/>
-  </div>
+    <button onclick="fortyTwo()">Call fortyTwo()</button>
+    <button onclick="reverseText()">Call reverseText()</button>
+  <div/>
 </body>
 </html>
diff --git a/native_client_sdk/src/examples/input_events/index.html b/native_client_sdk/src/examples/input_events/index.html
index 6ed42a8..7eb3da5 100644
--- a/native_client_sdk/src/examples/input_events/index.html
+++ b/native_client_sdk/src/examples/input_events/index.html
@@ -1,59 +1,52 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
 <head>
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="-1" />
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
   <title><TITLE></title>
+  <script type="text/javascript" src="common.js"></script>
   <script type="text/javascript">
     var kMaxArraySize = 20;
     var messageArray = new Array();
     
-    function $(id) {
-     return document.getElementById(id);
+    function moduleDidLoad() {
+      common.naclModule.style.backgroundColor = 'gray';
     }
 
-    function receiveMessage(message) {
-          // Show last |kMaxArraySize| events in html.
-          messageArray.push(message.data);
-          if (messageArray.length > kMaxArraySize) {
-            messageArray.shift();
-          }
-          var newData = messageArray.join('<BR>');
-	  document.getElementById('eventString').innerHTML = newData;
-          // Print event to console.
-	  console.log(message.data);
+    function handleMessage(message) {
+      // Show last |kMaxArraySize| events in html.
+      messageArray.push(message.data);
+      if (messageArray.length > kMaxArraySize) {
+        messageArray.shift();
+      }
+      var newData = messageArray.join('<BR>');
+      document.getElementById('eventString').innerHTML = newData;
+      // Print event to console.
+      console.log(message.data);
     }
   </script>
 </head>
-<body>
-<h1><TITLE></h1>
-  <div id="listener">
-    <script type="text/javascript">
-      $('listener').addEventListener('message', receiveMessage, true);
-    </script>
+<body onload="common.onload('<NAME>', '<tc>')">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
 
-    <embed name="nacl_module"
-           id="event_module"
-           width=400 height=400
-           src="<tc>/<NAME>.nmf"
-           type="application/x-nacl"
-           style="background-color:gray" />
- </div>
-<p>
-This example demonstrates handling of input events in PPAPI.</p>
-<p>
-Each time an input event happens in the context of the gray box,
-the embedded NaCl module posts a message describing the event
-back to JavaScript, which prints a message to the JavaScript
-console in Chrome and to a string on the page.</p>
-<h2>Events</h2>
-<pre>
-<p><b id='eventString'>None</b></p>
-</pre>
+  <p>This example demonstrates handling of input events in PPAPI.</p>
+  <p>Each time an input event happens in the context of the gray box, the
+  embedded NaCl module posts a message describing the event back to JavaScript,
+  which prints a message to the JavaScript console in Chrome and to a string on
+  the page.</p>
+
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
+  <div id="listener"></div>
+  <h2>Events</h2>
+  <pre>
+    <p><b id='eventString'>None</b></p>
+  </pre>
 </body>
 </html>
diff --git a/native_client_sdk/src/examples/load_progress/index.html b/native_client_sdk/src/examples/load_progress/index.html
index 45594b4..009eb19 100644
--- a/native_client_sdk/src/examples/load_progress/index.html
+++ b/native_client_sdk/src/examples/load_progress/index.html
@@ -1,29 +1,16 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
 <head>
-  <title>Load Progress Example</title>
-  <script type="text/javascript" src="../common/check_browser.js"></script>
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
+  <title><TITLE></title>
+  <script type="text/javascript" src="common.js"></script>
   <script type="text/javascript">
-    // Check for Native Client support in the browser before the DOM loads.
-    var isValidBrowser = false;
-    var browserSupportStatus = 0;
-    var checker = new browser_version.BrowserChecker(
-        14,  // Minumum Chrome version.
-        navigator["appVersion"],
-        navigator["plugins"]);
-    checker.checkBrowser();
-
-    loadProgressModule = null;  // Global application object.
-    statusText = 'NO-STATUS';
-
-    isValidBrowser = checker.getIsValidBrowser();
-    browserSupportStatus = checker.getBrowserSupportStatus();
-
     // Handler that gets called when the NaCl module starts loading.  This
     // event is always triggered when an <EMBED> tag has a MIME type of
     // application/x-nacl.
@@ -61,7 +48,7 @@
     // the error, you have to check lastError on the <EMBED> element to find
     // out what happened.
     function moduleLoadError() {
-      appendToEventLog('error: ' + loadProgressModule.lastError);
+      appendToEventLog('error: ' + common.naclModule.lastError);
     }
 
     // Handler that gets called if the NaCl module load is aborted.
@@ -71,9 +58,8 @@
 
     // When the NaCl module has loaded indicate success.
     function moduleDidLoad() {
-      loadProgressModule = document.getElementById('load_progress');
       appendToEventLog('load');
-      updateStatus('SUCCESS');
+      common.updateStatus('SUCCESS');
     }
 
     // Handler that gets called when the NaCl module loading has completed.
@@ -91,142 +77,42 @@
       appendToEventLog('lastError: ' + lastError);
     }
 
-
     // Handle a message coming from the NaCl module.
     function handleMessage(message_event) {
       alert(message_event.data);
     }
 
-    // Set the global status message.  Updates the 'status_field' element with
-    // the new text.
-    // opt_message The message text.  If this is null or undefined, then
-    //     attempt to set the element with id 'status_field' to the value of
-    //     |statusText|.
-    function updateStatus(opt_message) {
-      if (opt_message)
-        statusText = opt_message;
-      var statusField = document.getElementById('status_field');
-      if (statusField) {
-        statusField.innerHTML = statusText;
-      }
-    }
-
-    // Append an event name to the 'event_log_field' element.  Event names
+    // Append an event name to the 'log' element.  Event names
     // are separated by a <br> tag so they get listed one per line.
     // logMessage The message to append to the log.
     function appendToEventLog(logMessage) {
-      var eventLogField = document.getElementById('event_log_field');
+      var eventLogField = document.getElementById('log');
       if (eventLogField.innerHTML.length == 0) {
         eventLogField.innerHTML = logMessage;
       } else {
         eventLogField.innerHTML = eventLogField.innerHTML +
-                                  '<br />' +
+                                  '<br>' +
                                   logMessage;
       }
     }
   </script>
 </head>
-<body>
-
-<h1>Native Client Load Event Example</h1>
-
-<h2>Event Log</h2>
-<div id="event_log_field"></div>
-<h2>Status</h2>
-<div id="status_field">NO-STATUS</div>
-
-<div id="listener">
-  <script type="text/javascript">
-    var listener = document.getElementById('listener');
-    listener.addEventListener('loadstart', moduleDidStartLoad, true);
-    listener.addEventListener('progress', moduleLoadProgress, true);
-    listener.addEventListener('error', moduleLoadError, true);
-    listener.addEventListener('abort', moduleLoadAbort, true);
-    listener.addEventListener('load', moduleDidLoad, true);
-    listener.addEventListener('loadend', moduleDidEndLoad, true);
-    listener.addEventListener('message', handleMessage, true);
-
-  switch (browserSupportStatus) {
-    case browser_version.BrowserChecker.StatusValues.NACL_ENABLED:
-      appendToEventLog('Native Client plugin enabled.');
-      break;
-    case browser_version.BrowserChecker.StatusValues.UNKNOWN_BROWSER:
-      updateStatus('UNKNOWN BROWSER');
-      break;
-    case browser_version.BrowserChecker.StatusValues.CHROME_VERSION_TOO_OLD:
-      appendToEventLog(
-          'Chrome too old: You must use Chrome version 14 or later.');
-      updateStatus('NEED CHROME 14 OR LATER');
-      break;
-    case browser_version.BrowserChecker.StatusValues.NACL_NOT_ENABLED:
-      appendToEventLog(
-          'NaCl disabled: Native Client is not enabled.<br>' +
-          'Please go to <b>chrome://plugins</b> and enable Native Client ' +
-          'plugin.');
-      updateStatus('NaCl NOT ENABLED');
-      break;
-    case browser_version.BrowserChecker.StatusValues.NOT_USING_SERVER:
-      appendToEventLog(
-          'file: URL detected, please use a web server to host Native ' +
-          'Client applications.');
-      updateStatus('NaCl NOT ENABLED');
-    default:
-      appendToEventLog('Unknown error: Unable to detect browser and/or ' +
-                       'Native Client support.');
-      updateStatus('UNKNOWN ERROR');
-      break;
-    }
-  </script>
-
-  <!-- Load the published .nexe.  This includes the 'src' attribute which
-  shows how to load multi-architecture modules.  Each entry in the "nexes"
-  object in the  .nmf manifest file is a key-value pair: the key is the runtime
-  ('x86-32', 'x86-64', etc.); the value is a URL for the desired NaCl module.
-  To load the debug versions of your .nexes, set the 'src' attribute to the
-  _dbg.nmf version of the manifest file.
-
-  Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-  and a 'message' event listener attached.  This wrapping method is used
-  instead of attaching the event listeners directly to the <EMBED> element to
-  ensure that the listeners are active before the NaCl module 'load' event
-  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-  pp::Instance.PostMessage() (in C++) from within the initialization code in
-  your NaCl module.
-  -->
-  <embed name="nacl_module"
-         id="load_progress"
-         width=0 height=0
-         src="<tc>/load_progress.nmf"
-         type="application/x-nacl" />
-
-  <script type="text/javascript">
-    loadProgressModule = document.getElementById('load_progress');
-    // Futher diagnose NaCl loading.
-    if (loadProgressModule == null ||
-        typeof loadProgressModule.readyState == 'undefined') {
-      switch (browserSupportStatus) {
-        case browser_version.BrowserChecker.StatusValues.NACL_ENABLED:
-          // The NaCl plugin is enabled and running, it's likely that the flag
-          // isn't set.
-          appendToEventLog(
-              'NaCl flag disabled: The Native Client flag is not enabled.<br>' +
-              'Please go to <b>chrome://flags</b> enable Native Client and ' +
-              'relaunch your browser.  See also: ' +
-              '<a href="http://code.google.com/chrome/nativeclient/docs/' +
-              'running.html">Running Web Applications that Use Native Client' +
-              '</a>');
-          updateStatus('NaCl NOT ENABLED');
-          break;
-        case browser_version.BrowserChecker.StatusValues.UNKNOWN_BROWSER:
-          appendToEventLog('Native Client applications are not supported by ' +
-                           'this browser.');
-          break;
-        default:
-          appendToEventLog('Unknown error when loading Native Client ' +
-                           'application.');
-      }
-    }
-  </script>
-</div>
+<body onload="common.createNaClModule('<NAME>', '<tc>', 200, 200)">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <h2>Event Log</h2>
+  <div id="log"></div>
+  <div id="listener">
+    <script type="text/javascript">
+      var listener = document.getElementById('listener');
+      listener.addEventListener('loadstart', moduleDidStartLoad, true);
+      listener.addEventListener('progress', moduleLoadProgress, true);
+      listener.addEventListener('error', moduleLoadError, true);
+      listener.addEventListener('abort', moduleLoadAbort, true);
+      listener.addEventListener('load', moduleDidLoad, true);
+      listener.addEventListener('loadend', moduleDidEndLoad, true);
+      listener.addEventListener('message', handleMessage, true);
+    </script>
+  </div>
 </body>
 </html>
diff --git a/native_client_sdk/src/examples/mouselock/index.html b/native_client_sdk/src/examples/mouselock/index.html
index addf617..690aea5 100644
--- a/native_client_sdk/src/examples/mouselock/index.html
+++ b/native_client_sdk/src/examples/mouselock/index.html
@@ -1,20 +1,19 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
 <head>
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="-1" />
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
   <title><TITLE></title>
   <script type="text/javascript" src="common.js"></script>
 </head>
-<body onload="pageDidLoad('<NAME>', '<tc>', 300, 300)">
-
-<h1><TITLE></h1>
-<h2>Status: <code id="statusField">NO-STATUS</code></h2>
+<body onload="common.onload('<NAME>', '<tc>', 300, 300)">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
   <h1>Full-screen and Mouse-lock Example</h1>
   <ul>
     <li>There are two different kinds of fullscreen mode: "tab fullscreen" and
@@ -54,26 +53,8 @@
   combined fullscreen and mouselock mode.</p>
   <p>While in fullscreen, pressing Enter will exit/enter mouse lock mode.</p>
 
-  <!-- The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-  and a 'message' event listener attached.  This wrapping method is used
-  instead of attaching the event listeners directly to the <EMBED> element to
-  ensure that the listeners are active before the NaCl module 'load' event
-  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-  pp::Instance.PostMessage() (in C++) from within the initialization code in
-  your NaCl module. 
-  
-  The src points to a manifest file, which provides the Native Client plug-in
-  a mapping between architecture and NaCl Executable (NEXE). 
-  
-  We use a non-zero sized embed to give Chrome space to place the bad plug-in
-  graphic, if there is a problem.
-  -->
-  <div id="listener">
-    <script type="text/javascript">
-      var listener = document.getElementById('listener')
-      listener.addEventListener('load', moduleDidLoad, true);
-      listener.addEventListener('message', handleMessage, true);
-    </script>
-  </div>
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
+  <div id="listener"></div>
 </body>
 </html>
diff --git a/native_client_sdk/src/examples/multithreaded_input_events/index.html b/native_client_sdk/src/examples/multithreaded_input_events/index.html
index 70f7c48..0647621 100644
--- a/native_client_sdk/src/examples/multithreaded_input_events/index.html
+++ b/native_client_sdk/src/examples/multithreaded_input_events/index.html
@@ -1,28 +1,25 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
 <head>
-  <title>Input Events</title>
-
+  <title><TITLE></title>
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
+  <title><TITLE></title>
+  <script type="text/javascript" src="common.js"></script>
   <script type="text/javascript">
     var kMaxArraySize = 20;
     var messageArray = new Array();
-    var eventModule = null;
-
-    function $(id) {
-      return document.getElementById(id);
-    }
 
-    // Indicate success when the NaCl module has loaded.
     function moduleDidLoad() {
-      eventModule = document.getElementById('event_module');
+      common.naclModule.style.backgroundColor = 'gray';
     }
 
-    function receiveMessage(message) {
+    function handleMessage(message) {
       // Show last |kMaxArraySize| events in html.
       messageArray.push(message.data);
       if (messageArray.length > kMaxArraySize) {
@@ -33,48 +30,41 @@
       // Print event to console.
       console.log(message.data);
     }
+
     function cancelQueue() {
-      if (eventModule == null) {
+      if (common.naclModule == null) {
         console.log('Module is not loaded.');
         return;
       }
-      eventModule.postMessage('CANCEL');
+      common.naclModule.postMessage('CANCEL');
     }
   </script>
 </head>
-<body>
-<h1>InputEvent Handling Example</h1>
-  <div id="listener">
-    <script type="text/javascript">
-      $('listener').addEventListener('message', receiveMessage, true);
-      $('listener').addEventListener('load', moduleDidLoad, true);
-    </script>
-    <button onclick="cancelQueue()">Kill worker thread and queue</button>
-    <p/>
-    <embed name="nacl_module"
-           id="event_module"
-           width=400 height=400
-           src="<tc>/mt_input_events.nmf"
-           type="application/x-nacl"
-           style="background-color:gray" />
-  </div>
-<p>
-This example demonstrates handling of input events in PPAPI.</p>
-<p>
-Each time an input event happens in the context of the gray box,
-the main thread in the embedded NaCl module converts it from a Pepper input
-event to a non-Pepper event and puts this custom event onto a shared queue.
-A worker thread in the embedded NaCl module reads events from the queue,
-and converts each event to a string and then uses CallOnMainThread to post a
-message describing the event back to JavaScript, which prints a message to the
-JavaScript console in Chrome and to a string on the page.</p>
-<p>
-If you press the 'Kill worker thread and queue' button, then the main thread
-(which puts events on the queue) will call CancelQueue, indicating that the
-main thread will no longer put events on the queue.  When the worker sees that
-the shared queue has been cancelled, the worker thread will terminate.</p>
-<h2>Events</h2>
-<pre><p><b id='eventString'>None</b></p>
-</pre>
+<body onload="common.onload('<NAME>', '<tc>')">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <button onclick="cancelQueue()">Kill worker thread and queue</button>
+
+  <p>This example demonstrates handling of input events in PPAPI.</p>
+  <p>Each time an input event happens in the context of the gray box, the main
+  thread in the embedded NaCl module converts it from a Pepper input event to a
+  non-Pepper event and puts this custom event onto a shared queue.  A worker
+  thread in the embedded NaCl module reads events from the queue, and converts
+  each event to a string and then uses CallOnMainThread to post a message
+  describing the event back to JavaScript, which prints a message to the
+  JavaScript console in Chrome and to a string on the page.</p>
+  <p>If you press the 'Kill worker thread and queue' button, then the main
+  thread (which puts events on the queue) will call CancelQueue, indicating
+  that the main thread will no longer put events on the queue.  When the worker
+  sees that the shared queue has been cancelled, the worker thread will
+  terminate.</p>
+
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
+  <div id="listener"></div>
+  <h2>Events</h2>
+  <pre>
+    <p><b id='eventString'>None</b></p>
+  </pre>
 </body>
 </html>
diff --git a/native_client_sdk/src/examples/pi_generator/index.html b/native_client_sdk/src/examples/pi_generator/index.html
index ca24580..acc215c 100644
--- a/native_client_sdk/src/examples/pi_generator/index.html
+++ b/native_client_sdk/src/examples/pi_generator/index.html
@@ -1,82 +1,50 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
-  <head>
-    <title>Monte Carlo Estimate for Pi</title>
-    <script type="text/javascript">
-      var piGenerator = null;
-      var paintInterval = null;
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
+<head>
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
+  <title><TITLE></title>
+  <script type="text/javascript" src="common.js"></script>
+  <script type="text/javascript">
+    var paintInterval = null;
 
-      // Start up the paint timer when the NaCl module has loaded.
-      function moduleDidLoad() {
-        piGenerator = document.getElementById('piGenerator');
-        paintInterval = setInterval('piGenerator.postMessage("paint")', 5);
-      }
+    // Start up the paint timer when the NaCl module has loaded.
+    function moduleDidLoad() {
+      paintInterval = setInterval('common.naclModule.postMessage("paint")', 5);
+    }
 
-      // Handle a message coming from the NaCl module.  The message payload is
-      // assumed to contain the current estimated value of Pi.  Update the Pi
-      // text display with this value.
-      function handleMessage(message_event) {
-        document.form.pi.value = message_event.data;
-      }
+    // Handle a message coming from the NaCl module.  The message payload is
+    // assumed to contain the current estimated value of Pi.  Update the Pi
+    // text display with this value.
+    function handleMessage(message_event) {
+      document.getElementById('pi').value = message_event.data;
+    }
 
-      function pageDidUnload() {
-        clearInterval(paintInterval);
-      }
-    </script>
-  </head>
-  <body id="bodyId" onunload="pageDidUnload()">
-    <h1>Monte Carlo Estimate for Pi</h1>
-    <p>
-      The Native Client module executed in this page creates a thread
-      that estimates pi (&pi;) using the Monte Carlo method.
-      The thread randomly puts 1,000,000,000 points
-      inside a square that shares two sides with a quarter circle (a quadrant).
-      Because the area of
-      the quadrant is r&#178;&pi;/4
-      and the area of
-      the square is r&#178;,
-      dividing the number of points inside the quadrant
-      by the number of points inside the square gives us
-      an estimate of &pi;/4.
-      The textbox under the square
-      shows the current estimate of &pi;.
-    </p>
-    <!-- Load the published .nexe.  This includes the 'src' attribute which
-    shows how to load multi-architecture modules.  Each entry in the "nexes"
-    object in the .nmf manifest file is a key-value pair: the key is the
-    runtime ('x86-32', 'x86-64', etc.); the value is a URL for the desired NaCl
-    module.  To load the debug versions of your .nexes, set the 'src'
-    attribute to the _dbg.nmf version of the manifest file.
-
-    Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-    and a 'message' event listener attached.  This wrapping method is used
-    instead of attaching the event listeners directly to the <EMBED> element to
-    ensure that the listeners are active before the NaCl module 'load' event
-    fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-    pp::Instance.PostMessage() (in C++) from within the initialization code in
-    your NaCl module.
-    -->
-    <div id="listener">
-      <script type="text/javascript">
-        var listener = document.getElementById('listener')
-        listener.addEventListener('load', moduleDidLoad, true);
-        listener.addEventListener('message', handleMessage, true);
-      </script>
-
-      <embed name="nacl_module"
-             id="piGenerator"
-             width=200 height=200
-             src="<tc>/pi_generator.nmf"
-             type="application/x-nacl" />
-    </div>
-    <br />
-    <form name="form">
-      <input type="text" size="15" name="pi" />
-    </form>
-  </body>
+    function pageDidUnload() {
+      clearInterval(paintInterval);
+    }
+  </script>
+</head>
+<body onload="common.onload('<NAME>', '<tc>')" onunload="pageDidUnload()">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <p>
+    The Native Client module executed in this page creates a thread that
+    estimates pi (&pi;) using the Monte Carlo method.  The thread randomly puts
+    1,000,000,000 points inside a square that shares two sides with a quarter
+    circle (a quadrant).  Because the area of the quadrant is r&#178;&pi;/4 and
+    the area of the square is r&#178;, dividing the number of points inside the
+    quadrant by the number of points inside the square gives us an estimate of
+    &pi;/4.  The textbox under the square shows the current estimate of &pi;.
+  </p>
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
+  <div id="listener"></div>
+  <input type="text" size="15" id="pi">
+</body>
 </html>
diff --git a/native_client_sdk/src/examples/pong/index.html b/native_client_sdk/src/examples/pong/index.html
index 4b02899..f41ac5a 100644
--- a/native_client_sdk/src/examples/pong/index.html
+++ b/native_client_sdk/src/examples/pong/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
 <head>
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="-1" />
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
   <title><TITLE></title>
   <script type="text/javascript" src="common.js"></script>
   <script type="text/javascript" >
@@ -15,8 +15,9 @@
     function pageDidUnload() {
       clearInterval(paintInterval);
     }
+
     function resetScore() {
-      naclModule.postMessage("resetScore");
+      common.naclModule.postMessage("resetScore");
     }
 
     // Handle a message coming from the NaCl module.  The message payload is
@@ -35,33 +36,20 @@
   </script>
 </head>
 <body onunload="pageDidUnload()">
-<h1><TITLE></h1>
-<h2>Status: <code id="statusField">NO-STATUS</code></h2>
-  <!-- The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-  and a 'message' event listener attached.  This wrapping method is used
-  instead of attaching the event listeners directly to the <EMBED> element to
-  ensure that the listeners are active before the NaCl module 'load' event
-  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-  pp::Instance.PostMessage() (in C++) from within the initialization code in
-  your NaCl module. 
-  
-  The src points to a manifest file, which provides the Native Client plug-in
-  a mapping between architecture and NaCl Executable (NEXE). 
-  
-  We use a non-zero sized embed to give Chrome space to place the bad plug-in
-  graphic, if there is a problem.
-  -->
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
   <div id="listener">
     <script type="text/javascript">
       window.webkitStorageInfo.requestQuota(window.PERSISTENT, 1024,
           function(bytes) {
-            updateStatus('Allocated '+bytes+' bytes of persistent storage.');
-            createNaClModule('<NAME>', '<tc>', 800, 600);
+            common.updateStatus(
+                'Allocated '+bytes+' bytes of persistent storage.');
+            common.createNaClModule('<NAME>', '<tc>', 800, 600);
+            common.attachDefaultListeners();
           },
           function(e) { alert('Failed to allocate space'); });
-      var listener = document.getElementById('listener')
-      listener.addEventListener('load', moduleDidLoad, true);
-      listener.addEventListener('message', handleMessage, true);
     </script>
   </div>
   <p id="score"></p>
diff --git a/native_client_sdk/src/examples/pong/pong.cc b/native_client_sdk/src/examples/pong/pong.cc
index 54ba17f3..f650c76 100644
--- a/native_client_sdk/src/examples/pong/pong.cc
+++ b/native_client_sdk/src/examples/pong/pong.cc
@@ -40,6 +40,14 @@ namespace AsyncCallbacks {
 void FlushCallback(void*, int32_t) {
 }
 
+// Callback that is called as a result of pp::FileIO::SetLength
+void SetLengthCallback(void* data, int32_t result) {
+  if (result != PP_OK)
+    return;
+  Pong* pong = static_cast<Pong*>(data);
+  pong->file_io_->Flush(pp::CompletionCallback(FlushCallback, NULL));
+}
+
 // Callback that is called as a result of pp::FileIO::Write
 void WriteCallback(void* data, int32_t bytes_written) {
   if (bytes_written < 0)
@@ -47,7 +55,9 @@ void WriteCallback(void* data, int32_t bytes_written) {
   Pong* pong = static_cast<Pong*>(data);
   pong->offset_ += bytes_written;
   if (pong->offset_ == pong->bytes_buffer_.length()) {
-    pong->file_io_->Flush(pp::CompletionCallback(FlushCallback, NULL));
+    // Truncate the file.
+    pong->file_io_->SetLength(pong->offset_,
+                              pp::CompletionCallback(SetLengthCallback, pong));
   } else {
     // Not all the bytes to be written have been written, so call
     // pp::FileIO::Write again.
diff --git a/native_client_sdk/src/examples/sine_synth/index.html b/native_client_sdk/src/examples/sine_synth/index.html
index eb1717b..36f5acc 100644
--- a/native_client_sdk/src/examples/sine_synth/index.html
+++ b/native_client_sdk/src/examples/sine_synth/index.html
@@ -1,28 +1,34 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
 <head>
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="-1" />
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
   <title><TITLE></title>
   <script type="text/javascript" src="common.js"></script>
   <script type="text/javascript" >
+    function moduleDidLoad() {
+      // The module is not hidden by default so we can easily see if the plugin
+      // failed to load.
+      common.hideModule();
+    }
+
     function toggleSound(flag) {
-      naclModule.postMessage('setFrequency:' +
+      common.naclModule.postMessage('setFrequency:' +
           document.getElementById('frequency_field').value);
       if (flag) {
-        naclModule.postMessage('playSound');
+        common.naclModule.postMessage('playSound');
       } else {
-        naclModule.postMessage('stopSound');
+        common.naclModule.postMessage('stopSound');
       }
     }
 
     function changeFrequency(freq) {
-      naclModule.postMessage('setFrequency:' + freq);
+      common.naclModule.postMessage('setFrequency:' + freq);
     }
 
     function handleMessage(e) {
@@ -30,37 +36,20 @@
     }
   </script>
 </head>
-<body onload="pageDidLoad('<NAME>', '<tc>')">
+<body onload="common.onload('<NAME>', '<tc>')">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
 
-<h1><TITLE></h1>
-<h2>Status: <code id="statusField">NO-STATUS</code></h2>
   <p>Click the button to start and stop the sine wave playing.</p>
   <button onclick="toggleSound(true)">Play</button>
   <button onclick="toggleSound(false)">Stop</button>
+
   <p>Enter the frequency of the sine wave:</p>
   <input type="text" size="15" id="frequency_field"
-         value="440" onchange="changeFrequency(this.value)" />
+         value="440" onchange="changeFrequency(this.value)">
 
-  <!-- The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-  and a 'message' event listener attached.  This wrapping method is used
-  instead of attaching the event listeners directly to the <EMBED> element to
-  ensure that the listeners are active before the NaCl module 'load' event
-  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-  pp::Instance.PostMessage() (in C++) from within the initialization code in
-  your NaCl module. 
-  
-  The src points to a manifest file, which provides the Native Client plug-in
-  a mapping between architecture and NaCl Executable (NEXE). 
-  
-  We use a non-zero sized embed to give Chrome space to place the bad plug-in
-  graphic, if there is a problem.
-  -->
-  <div id="listener">
-    <script type="text/javascript">
-      var listener = document.getElementById('listener')
-      listener.addEventListener('load', moduleDidLoad, true);
-      listener.addEventListener('message', handleMessage, true);
-    </script>
-  </div>
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
+  <div id="listener"></div>
 </body>
 </html>
diff --git a/native_client_sdk/src/examples/sine_synth/sine_synth.html b/native_client_sdk/src/examples/sine_synth/sine_synth.html
deleted file mode 100644
index a956897..0000000
--- a/native_client_sdk/src/examples/sine_synth/sine_synth.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<!--
-Copyright (c) 2011 The Chromium Authors. All rights reserved.
-Use of this source code is governed by a BSD-style license that can be
-found in the LICENSE file.
--->
-<head>
-  <title>Sine Wave Synthesizer</title>
-  <script type="text/javascript">
-    sineSynth = null;  // Global application object.
-
-    // Indicate success when the NaCl module has loaded.
-    function moduleDidLoad() {
-      sineSynth = document.getElementById('sineSynth');
-      document.getElementById('frequency_field').value = 440;
-    }
-
-    // Handle a message coming from the NaCl module.  The message payload
-    // contains the frequency value.  Update the frequency field with this
-    // value.
-    function handleMessage(message_event) {
-      document.getElementById('frequency_field').value = message_event.data;
-    }
-
-    function toggleSound(flag) {
-      sineSynth.postMessage('setFrequency:' +
-          document.getElementById('frequency_field').value);
-      if (flag) {
-        sineSynth.postMessage('playSound');
-      } else {
-        sineSynth.postMessage('stopSound');
-      }
-    }
-
-    function changeFrequency(freq) {
-      sineSynth.postMessage('setFrequency:' + freq);
-    }
-  </script>
-</head>
-
-<body id="bodyId">
-  <h1>Sine Wave Synthesizer</h1>
-  <p>Click the button to start and stop the sine wave playing.</p>
-  <button onclick="toggleSound(true)">Play</button>
-  <button onclick="toggleSound(false)">Stop</button>
-  <p>Enter the frequency of the sine wave:</p>
-  <input type="text" size="15" id="frequency_field"
-         value="#undef" onchange="changeFrequency(this.value)" />
-  <!-- Load the published .nexe.  This includes the 'src' attribute which
-  shows how to load multi-architecture modules.  Each entry in the "nexes"
-  object in the .nmf manifest file is a key-value pair: the key is the runtime
-  ('x86-32', 'x86-64', etc.); the value is a URL for the desired NaCl module.
-  To load the debug versions of your .nexes, set the 'src' attribute to the
-  _dbg.nmf version of the manifest file.
-
-  Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
-  and a 'message' event listener attached.  This wrapping method is used
-  instead of attaching the event listeners directly to the <EMBED> element to
-  ensure that the listeners are active before the NaCl module 'load' event
-  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
-  pp::Instance.PostMessage() (in C++) from within the initialization code in
-  your NaCl module.
-  -->
-  <div id="listener">
-    <script type="text/javascript">
-      var listener = document.getElementById('listener')
-      listener.addEventListener('load', moduleDidLoad, true);
-      listener.addEventListener('message', handleMessage, true);
-    </script>
-
-    <embed name="nacl_module"
-           id="sineSynth"
-           width=0 height=0
-           src="sine_synth.nmf"
-           type="application/x-nacl" />
-  </div>
-</body>
-</html>
diff --git a/native_client_sdk/src/examples/tumbler/index.html b/native_client_sdk/src/examples/tumbler/index.html
index f2bee02..1fcce01 100644
--- a/native_client_sdk/src/examples/tumbler/index.html
+++ b/native_client_sdk/src/examples/tumbler/index.html
@@ -1,34 +1,40 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
 <head>
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="-1" />
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
   <title><TITLE></title>
-    <script type="text/javascript">
-      // Provide the tumbler namespace
-      tumbler = {};
-    </script>
-    <script type="text/javascript" src="bind.js"></script>
-    <script type="text/javascript" src="dragger.js"></script>
-    <script type="text/javascript" src="tumbler.js"></script>
-    <script type="text/javascript" src="vector3.js"></script>
-    <script type="text/javascript" src="trackball.js"></script>
-</head>
-  <body id="bodyId">
-    <h1>Interactive Cube Example</h1>
-    <p>
-      The Native Client module executed in this page draws a 3D cube
-      and allows you to rotate it using a virtual trackball method.
-    </p>
-    <div id="tumbler_view"></div>
-    <script type="text/javascript">
+  <script type="text/javascript">
+    // Provide the tumbler namespace
+    tumbler = {};
+  </script>
+  <script type="text/javascript" src="common.js"></script>
+  <script type="text/javascript" src="bind.js"></script>
+  <script type="text/javascript" src="dragger.js"></script>
+  <script type="text/javascript" src="tumbler.js"></script>
+  <script type="text/javascript" src="vector3.js"></script>
+  <script type="text/javascript" src="trackball.js"></script>
+  <script type="text/javascript">
+    function moduleDidLoad() {
       tumbler.application = new tumbler.Application();
-      tumbler.application.run('tumbler_view');
-    </script>
-  </body>
+      tumbler.application.moduleDidLoad();
+    }
+  </script>
+</head>
+<body onload="common.onload('<NAME>', '<tc>', 480, 480)">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <p>
+    The Native Client module executed in this page draws a 3D cube
+    and allows you to rotate it using a virtual trackball method.
+  </p>
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+    See common.js.-->
+  <div id="listener"></div>
+</body>
 </html>
diff --git a/native_client_sdk/src/examples/tumbler/tumbler.js b/native_client_sdk/src/examples/tumbler/tumbler.js
index 0c2a31b..e47d600 100644
--- a/native_client_sdk/src/examples/tumbler/tumbler.js
+++ b/native_client_sdk/src/examples/tumbler/tumbler.js
@@ -40,25 +40,6 @@ tumbler.Application = function() {
    * @private
    */
   this.dragger_ = null;
-
-  /**
-   * The function objects that get attached as event handlers.  These are
-   * cached so that they can be removed when they are no longer needed.
-   * @type {function}
-   * @private
-   */
-  this.boundModuleDidLoad_ = null;
-}
-
-/**
- * The ids used for elements in the DOM.  The Tumlber Application expects these
- * elements to exist.
- * @enum {string}
- * @private
- */
-tumbler.Application.DomIds_ = {
-  MODULE: 'tumbler',  // The <embed> element representing the NaCl module
-  VIEW: 'tumbler_view'  // The <div> containing the NaCl element.
 }
 
 /**
@@ -66,9 +47,7 @@ tumbler.Application.DomIds_ = {
  * @param {?Element} nativeModule The instance of the native module.
  */
 tumbler.Application.prototype.moduleDidLoad = function() {
-  this.module_ = document.getElementById(tumbler.Application.DomIds_.MODULE);
-  // Unbind the load function.
-  this.boundModuleDidLoad_ = null;
+  this.module_ = document.getElementById('nacl_module');
 
   /**
    * Set the camera orientation property on the NaCl module.
@@ -99,35 +78,3 @@ tumbler.Application.prototype.assert = function(cond, message) {
     throw new Error(message);
   }
 }
-
-/**
- * The run() method starts and 'runs' the application.  The trackball object
- * is allocated and all the events get wired up.
- * @param {?String} opt_contentDivName The id of a DOM element in which to
- *     embed the Native Client module.  If unspecified, defaults to
- *     VIEW.  The DOM element must exist.
- */
-tumbler.Application.prototype.run = function(opt_contentDivName) {
-  contentDivName = opt_contentDivName || tumbler.Application.DomIds_.VIEW;
-  var contentDiv = document.getElementById(contentDivName);
-  this.assert(contentDiv, "Missing DOM element '" + contentDivName + "'");
-
-  // Note that the <EMBED> element is wrapped inside a <DIV>, which has a 'load'
-  // event listener attached.  This method is used instead of attaching the
-  // 'load' event listener directly to the <EMBED> element to ensure that the
-  // listener is active before the NaCl module 'load' event fires.
-  this.boundModuleDidLoad_ = this.moduleDidLoad.bind(this);
-  contentDiv.addEventListener('load', this.boundModuleDidLoad_, true);
-
-  // Load the published .nexe.  This includes the 'nacl' attribute which
-  // shows how to load multi-architecture modules.  Each entry in the "nexes"
-  // object in the  .nmf manifest file is a key-value pair: the key is the
-  // runtime ('x86-32', 'x86-64', etc.); the value is a URL for the desired
-  // NaCl module.  To load the debug versions of your .nexes, set the 'nacl'
-  //  attribute to the _dbg.nmf version of the manifest file.
-  contentDiv.innerHTML = '<embed id="'
-                         + tumbler.Application.DomIds_.MODULE + '" '
-                         + 'src=newlib/tumbler.nmf '
-                         + 'type="application/x-nacl" '
-                         + 'width="480" height="480" />'
-}
diff --git a/native_client_sdk/src/examples/websocket/index.html b/native_client_sdk/src/examples/websocket/index.html
index 96a2064..c511482 100644
--- a/native_client_sdk/src/examples/websocket/index.html
+++ b/native_client_sdk/src/examples/websocket/index.html
@@ -1,104 +1,61 @@
 <!DOCTYPE html>
 <html>
-  <!--
-  Copyright (c) 2012 The Chromium Authors. All rights reserved.
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
-  -->
+<!--
+Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
 <head>
-  <title>WebSocket</title>
-
+  <title><TITLE></title>
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
+  <title><TITLE></title>
+  <script type="text/javascript" src="common.js"></script>
   <script type="text/javascript">
-    websocket = null;  // Global application object.
-    statusText = 'NO-STATUS';
-
-    // Indicate success when the NaCl module has loaded.
     function moduleDidLoad() {
-      websocket = document.getElementById('websocket');
-      updateStatus('SUCCESS');
-    }
-
-    // Handle a message coming from the NaCl module.
-    function handleMessage(message_event) {
-      console.log(message_event);
-      document.getElementById('log').value += message_event.data + '\n';
-    }
-
-    function pageDidLoad() {
-      if (websocket == null) {
-        updateStatus('LOADING...');
-      } else {
-        updateStatus();
-      }
+      // The module is not hidden by default so we can easily see if the plugin
+      // failed to load.
+      common.hideModule();
     }
 
     function doConnect() {
       // Send a request message. See also websocket.cc for the request format.
-      websocket.postMessage('o;' + document.getElementById('url').value);
+      var url = document.getElementById('url').value;
+      common.naclModule.postMessage('o;' + url);
     }
 
     function doSend() {
       // Send a request message. See also websocket.cc for the request format.
-      websocket.postMessage(
-          's;' + document.getElementById('message').value);
+      var message = document.getElementById('message').value;
+      common.naclModule.postMessage('s;' + message);
     }
 
     function doClose() {
       // Send a request message. See also websocket.cc for the request format.
-      websocket.postMessage('c;');
-    }
-
-    function updateStatus(opt_message) {
-      if (opt_message)
-        statusText = opt_message;
-      var statusField = document.getElementById('statusField');
-      if (statusField) {
-        statusField.innerHTML = statusText;
-      }
+      common.naclModule.postMessage('c;');
     }
   </script>
 </head>
-<body onload="pageDidLoad()">
-
-<h1><TITLE></h1>
-<p>
+<body onload="common.onload('<NAME>', '<tc>')">
+  <h1><TITLE></h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <div>Set a server URL, then push "Connect" button to establish a connection.
+    <br>"Send" button sends text message on the left text area.
+    <br>"Close" button closes the connection.
+  <div>
   <form action="#" onsubmit="doConnect(); return false;">
-    <input type="text" id="url"
-      value="ws://html5rocks.websocket.org/echo?encoding=text" />
-    <input type="submit" value="Connect" />
+    <input type="text" id="url" style="width: 400px"
+      value="ws://html5rocks.websocket.org/echo?encoding=text">
+    <input type="submit" value="Connect">
   </form>
 
   <form action="#" onsubmit="doSend(); return false;">
-    <input type="text" id="message" value="hello" />
-    <input type="submit" value="Send" />
-  </form>
-
-  <form action="#" onsubmit="doClose(); return false;">
-    <input type="submit" value="Close" />
+    <input type="text" id="message" value="hello" style="width: 400px">
+    <input type="submit" value="Send">
   </form>
 
-  <textarea id="log" rows="10" cols="80"></textarea>
-
-  <div id="listener">
-    <script type="text/javascript">
-      var listener = document.getElementById('listener')
-      listener.addEventListener('load', moduleDidLoad, true);
-      listener.addEventListener('message', handleMessage, true);
-    </script>
-
-    <embed name="nacl_module"
-           id="websocket"
-           width=0 height=0
-           src="<tc>/websocket.nmf"
-           type="application/x-nacl" />
-  </div>
-</p>
-
-<p>Set a server URL, then push "Connect" button to establish a connection.</p>
-<p>"Send" button sends text message on the left text area.</p>
-<p>"Close" button closes the connection/</p>
-
-<h2>Status</h2>
-<div id="statusField">NO-STATUS</div>
+  <input type="button" value="Close" onclick="doClose()">
+  <div id="listener"></div>
+  <div id="log"></div>
 </body>
 </html>
diff --git a/native_client_sdk/src/examples/websocket/websocket.cc b/native_client_sdk/src/examples/websocket/websocket.cc
index 87692e1..fc1f0ed 100644
--- a/native_client_sdk/src/examples/websocket/websocket.cc
+++ b/native_client_sdk/src/examples/websocket/websocket.cc
@@ -77,7 +77,7 @@ void WebSocketInstance::Open(const std::string& url) {
   if (!websocket_)
     return;
   websocket_->Connect(pp::Var(url), NULL, 0, callback);
-  PostMessage(pp::Var("connecting..."));
+  PostMessage(pp::Var("log:connecting..."));
 }
 
 void WebSocketInstance::Close() {
@@ -92,7 +92,7 @@ void WebSocketInstance::Send(const std::string& message) {
   if (!IsConnected())
     return;
   websocket_->SendMessage(pp::Var(message));
-  PostMessage(pp::Var(std::string("send: ") + message));
+  PostMessage(pp::Var(std::string("log:send: ") + message));
 }
 
 void WebSocketInstance::Receive() {
@@ -104,23 +104,26 @@ void WebSocketInstance::Receive() {
 
 void WebSocketInstance::OnConnectCompletion(int32_t result) {
   if (result != PP_OK) {
-    PostMessage(pp::Var("connection failed"));
+    PostMessage(pp::Var("alert:connection failed"));
     return;
   }
-  PostMessage(pp::Var("connected"));
+  PostMessage(pp::Var("log:connected"));
   Receive();
 }
 
 void WebSocketInstance::OnCloseCompletion(int32_t result) {
-  PostMessage(pp::Var(PP_OK == result ? "closed" : "abnormally closed"));
+  PostMessage(pp::Var(PP_OK == result ?
+        "log:closed" :
+        "alert:abnormally closed"));
 }
 
 void WebSocketInstance::OnReceiveCompletion(int32_t result) {
   if (result == PP_OK) {
     if (receive_var_.is_array_buffer())
-      PostMessage(pp::Var("receive: binary data"));
+      PostMessage(pp::Var("log: receive: binary data"));
     else
-      PostMessage(pp::Var(std::string("receive: ") + receive_var_.AsString()));
+      PostMessage(pp::Var(std::string("log:receive: ") +
+          receive_var_.AsString()));
   }
   Receive();
 }