Original patch from issue 570048

chrome/common/extensions/docs/examples/api/tabs/zoom/popup.html

+<script>
+
+// The zoom extension API only allows setting of an arbitrary zoom percent.
+// The following functions provide the logic necessary to imitate the exact
+// zoom in/out behavior of the built-in zoom functions.
+
+// From WebViewImpl.cpp
+
+var textSizeMultiplierRatio = 1.2;
+
+function zoomLevelToZoomFactor(zoomLevel) {
+  return Math.pow(textSizeMultiplierRatio, zoomLevel);
+}
+
+function zoomFactorToZoomLevel(factor) {
+  // Since factor = 1.2^level, level = log(factor) / log(1.2)
+  return Math.log(factor) / Math.log(textSizeMultiplierRatio);
+}
+
+// From render_view.cc
+
+var ZoomFunction = {
+  ZoomOut: -1,
+  Reset: 0,
+  ZoomIn: 1
+}
+
+// Test that a float reperesents an integral zoom level
+function isBasicallyIntegral(zoomLevel) {
+  var epsilon = 0.000001;
+  var rounded = Math.round(zoomLevel);
+  return Math.abs(zoomLevel - rounded) < epsilon;
+}
+
+// Calculate a new zoom level for zoom in/out/reset
+function zoom(oldZoomLevel, zoomFunction) {
+  var zoomLevel;
+
+  if (zoomFunction == ZoomFunction.Reset) {
+    zoomLevel = 0;
+  } else if (isBasicallyIntegral(oldZoomLevel)) {
+    // Previous zoom level is a whole number, so just increment/decrement.
+    zoomLevel = Math.round(oldZoomLevel) + zoomFunction;
+  } else {
+    // Either the user hit the zoom factor limit and thus the zoom level is now
+    // not a whole number, or a plugin changed it to a custom value.  We want
+    // to go to the next whole number so that the user can always get back to
+    // 100% with the keyboard/menu.
+    if ((oldZoomLevel > 1 && zoomFunction > 0) ||
+        (oldZoomLevel < 1 && zoomFunction < 0)) {
+      zoomLevel = parseInt(oldZoomLevel + zoomFunction);
+    } else {
+      // We're going towards 100%, so first go to the next whole number.
+      zoomLevel = parseInt(oldZoomLevel);
+    }
+  }
+
+  return zoomLevel;
+}
+
+
+// Zoom in/out
+
+function incZoomLevel(oldZoomLevel) {
+  return zoom(oldZoomLevel, ZoomFunction.ZoomIn);
+}
+
+function decZoomLevel(oldZoomLevel) {
+  return zoom(oldZoomLevel, ZoomFunction.ZoomOut);
+}
+
+// Convert zoom percent to zoom level and apply a function,
+// then convert back to zoom percent and return the result
+function applyAsZoomLevel(zoomLevelTransform, zoomPercent) {
+  var zoomLevel = zoomFactorToZoomLevel(zoomPercent / 100);
+  var newZoomLevel = zoomLevelTransform(zoomLevel);
+  var newZoomPercent = zoomLevelToZoomFactor(newZoomLevel) * 100;
+  return newZoomPercent;
+}
+
+// Zoom in the current tab, exactly like the built-in zoom
+function zoomIn() {
+  chrome.tabs.getSelected(null, function(tab) {
+      chrome.tabs.getZoomPercent(tab.id, function(zoomPercent) {
+
+          var newZoomPercent = applyAsZoomLevel(incZoomLevel, zoomPercent);
+          chrome.tabs.setZoomPercent(tab.id, newZoomPercent, function(finalZoomPercent) {
+            displayZoomPercent(finalZoomPercent);
+          });
+        });
+    });
+}
+
+// Zoom out the current tab, exactly like the built-in zoom
+function zoomOut() {
+  chrome.tabs.getSelected(null, function(tab) {
+      chrome.tabs.getZoomPercent(tab.id, function(zoomPercent) {
+
+          var newZoomPercent = applyAsZoomLevel(decZoomLevel, zoomPercent);
+          chrome.tabs.setZoomPercent(tab.id, newZoomPercent, function(finalZoomPercent) {
+            displayZoomPercent(finalZoomPercent);
+          });
+        });
+    });
+}
+
+function zoomReset() {
+  chrome.tabs.getSelected(null, function(tab) {
+      chrome.tabs.setZoomPercent(tab.id, 100, function(finalZoomPercent) {
+        displayZoomPercent(finalZoomPercent);
+      });
+    });
+}
+
+function setZoomPercentFromInput() {
+  chrome.tabs.getSelected(null, function(tab){
+      var zoomPercent = parseFloat(document.getElementById("zoomPercentInput").value);
+
+      if (isNaN(zoomPercent)) {
+        return;
+      }
+
+      chrome.tabs.setZoomPercent(tab.id, zoomPercent, function(finalZoomPercent) {
+        displayZoomPercent(finalZoomPercent);
+      });
+    });
+}
+
+function displayZoomPercent(zoomPercent) {
+  var intZoomPercent = parseInt(zoomPercent);
+  document.getElementById("currentZoom").innerHTML = intZoomPercent;
+}
+
+function getAndDisplayZoomPercent() {
+  chrome.tabs.getSelected(null, function(tab){
+      chrome.tabs.getZoomPercent(tab.id, function(zoomPercent) {
+          displayZoomPercent(zoomPercent);
+        });
+    });
+}
+
+getAndDisplayZoomPercent();
+
+</script>
+
+<p><a id="zoomInLink" href="#" onclick="zoomIn()">zoom in</a></p>
+<p><a id="zoomOutLink" href="#" onclick="zoomOut()">zoom out</a></p>
+<p><a id="zoomResetLink" href="#" onClick="zoomReset()">reset</a></p>
+<p>Zoom: <span id="currentZoom"></span></p>
+
+<form>
+  <input id="zoomPercentInput"/>
+  <button id="zoomPercentButton" onclick="setZoomPercentFromInput()" type="button">Set Zoom</button>
+</form>