🔧 Update with Manifest v3

app/app.js

@@ -1,84 +1,81 @@
-(function(){
+(function () {
+  var $ = document.getElementById.bind(document);
+  var $$ = document.querySelectorAll.bind(document);
 
-var $  = document.getElementById.bind(document);
-var $$ = document.querySelectorAll.bind(document);
+  var App = function ($el) {
+    this.$el = $el;
+    this.load();
 
-var App = function($el){
-  this.$el = $el;
-  this.load();
+    this.$el.addEventListener("submit", this.submit.bind(this));
 
-  this.$el.addEventListener(
-    'submit', this.submit.bind(this)
-  );
+    if (this.dob) {
+      this.renderAgeLoop();
+    } else {
+      this.renderChoose();
+    }
+  };
 
-  if (this.dob) {
-    this.renderAgeLoop();
-  } else {
-    this.renderChoose();
-  }
-};
-
-App.fn = App.prototype;
-
-App.fn.load = function(){
-  var value;
-
-  if (value = localStorage.dob)
-    this.dob = new Date(parseInt(value));
-};
-
-App.fn.save = function(){
-  if (this.dob)
-    localStorage.dob = this.dob.getTime();
-};
-
-App.fn.submit = function(e){
-  e.preventDefault();
-
-  var input = this.$$('input')[0];
-  if ( !input.valueAsDate ) return;
+  App.fn = App.prototype;
 
-  this.dob = input.valueAsDate;
-  this.save();
-  this.renderAgeLoop();
-};
+  App.fn.load = function () {
+    var value;
 
-App.fn.renderChoose = function(){
-  this.html(this.view('dob')());
-};
+    if ((value = localStorage.dob)) this.dob = new Date(parseInt(value));
+  };
 
-App.fn.renderAgeLoop = function(){
-  this.interval = setInterval(this.renderAge.bind(this), 100);
-};
+  App.fn.save = function () {
+    if (this.dob) localStorage.dob = this.dob.getTime();
+  };
 
-App.fn.renderAge = function(){
-  var now       = new Date
-  var duration  = now - this.dob;
-  var years     = duration / 31556900000;
+  App.fn.submit = function (e) {
+    e.preventDefault();
 
-  var majorMinor = years.toFixed(9).toString().split('.');
-
-  requestAnimationFrame(function(){
-    this.html(this.view('age')({
-      year:         majorMinor[0],
-      milliseconds: majorMinor[1]
-    }));
-  }.bind(this));
-};
-
-App.fn.$$ = function(sel){
-  return this.$el.querySelectorAll(sel);
-};
-
-App.fn.html = function(html){
-  this.$el.innerHTML = html;
-};
-
-App.fn.view = function(name){
-  var $el = $(name + '-template');
-  return Handlebars.compile($el.innerHTML);
-};
-
-window.app = new App($('app'))
+    var input = this.$$("input")[0];
+    if (!input.valueAsDate) return;
 
+    this.dob = input.valueAsDate;
+    this.save();
+    this.renderAgeLoop();
+  };
+
+  App.fn.renderChoose = function () {
+    this.html(this.view("dob")());
+  };
+
+  App.fn.renderAgeLoop = function () {
+    this.interval = setInterval(this.renderAge.bind(this), 100);
+  };
+
+  App.fn.renderAge = function () {
+    var now = new Date();
+    var duration = now - this.dob;
+    var years = duration / 31556900000;
+
+    var majorMinor = years.toFixed(9).toString().split(".");
+
+    requestAnimationFrame(
+      function () {
+        this.html(
+          this.view("age")({
+            year: majorMinor[0],
+            milliseconds: majorMinor[1],
+          }),
+        );
+      }.bind(this),
+    );
+  };
+
+  App.fn.$$ = function (sel) {
+    return this.$el.querySelectorAll(sel);
+  };
+
+  App.fn.html = function (html) {
+    this.$el.innerHTML = html;
+  };
+
+  App.fn.view = function (name) {
+    return Handlebars.templates[name];
+  };
+
+  window.app = new App($("app"));
 })();

app/templates.js

@@ -0,0 +1,77 @@
+(function () {
+  var template = Handlebars.template,
+    templates = (Handlebars.templates = Handlebars.templates || {});
+  templates["age"] = template({
+    compiler: [8, ">= 4.3.0"],
+    main: function (container, depth0, helpers, partials, data) {
+      var helper,
+        alias1 = depth0 != null ? depth0 : container.nullContext || {},
+        alias2 = container.hooks.helperMissing,
+        alias3 = "function",
+        alias4 = container.escapeExpression,
+        lookupProperty =
+          container.lookupProperty ||
+          function (parent, propertyName) {
+            if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+              return parent[propertyName];
+            }
+            return undefined;
+          };
+
+      return (
+        '<h1 class="age-label">AGE</h1>\n<h2 class="count">' +
+        alias4(
+          ((helper =
+            (helper =
+              lookupProperty(helpers, "year") ||
+              (depth0 != null ? lookupProperty(depth0, "year") : depth0)) !=
+            null
+              ? helper
+              : alias2),
+          typeof helper === alias3
+            ? helper.call(alias1, {
+                name: "year",
+                hash: {},
+                data: data,
+                loc: {
+                  start: { line: 2, column: 18 },
+                  end: { line: 2, column: 26 },
+                },
+              })
+            : helper),
+        ) +
+        "<sup>." +
+        alias4(
+          ((helper =
+            (helper =
+              lookupProperty(helpers, "milliseconds") ||
+              (depth0 != null
+                ? lookupProperty(depth0, "milliseconds")
+                : depth0)) != null
+              ? helper
+              : alias2),
+          typeof helper === alias3
+            ? helper.call(alias1, {
+                name: "milliseconds",
+                hash: {},
+                data: data,
+                loc: {
+                  start: { line: 2, column: 32 },
+                  end: { line: 2, column: 48 },
+                },
+              })
+            : helper),
+        ) +
+        "</sup></h2>"
+      );
+    },
+    useData: true,
+  });
+  templates["dob"] = template({
+    compiler: [8, ">= 4.3.0"],
+    main: function (container, depth0, helpers, partials, data) {
+      return '<form>\n    <h1 id="dob" class="age-label">When were you born?</h1>\n    <footer>\n        <input type="date" name="dob" id="dob">\n        <button type="submit">Motivate</button>\n    </footer>\n<form>\n';
+    },
+    useData: true,
+  });
+})();

dashboard.html

@@ -1,35 +1,17 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title>New Tab</title>
-  <meta name="description" content="">
-  <meta name="viewport" content="width=device-width">
-  <link rel="stylesheet" href="css/style.css">
-</head>
-<body>
-
-<div id="app"></div>
-
-<script id="dob-template" type="text/x-handlebars-template">
-  <form>
-    <h1 id="dob" class="age-label">When were you born?</h1>
-
-    <footer>
-      <input type="date" name="dob" id="dob">
-      <button type="submit">Motivate</button>
-    </footer>
-  <form>
-</script>
-
-<script id="age-template" type="text/x-handlebars-template">
-  <h1 class="age-label">AGE</h1>
-  <h2 class="count">{{year}}<sup>.{{milliseconds}}</sup></h2>
-</script>
-
-<script src="js/handlebars.js"></script>
-<script src="app/app.js"></script>
-
-</body>
-</html>
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <title>New Tab</title>
+        <meta name="description" content="" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="stylesheet" href="css/style.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="js/handlebars.js"></script>
+        <script src="app/templates.js"></script>
+        <script src="app/app.js"></script>
+    </body>
+</html>