Sample Extension for Tabs Zoom API.

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

Index: chrome/common/extensions/docs/examples/api/tabs/zoom/popup.js
diff --git a/chrome/common/extensions/docs/examples/api/tabs/zoom/popup.js b/chrome/common/extensions/docs/examples/api/tabs/zoom/popup.js
new file mode 100644
index 0000000000000000000000000000000000000000..897884b6c411ffcb26d4d0b4a9f046ded7611d2e
--- /dev/null
+++ b/chrome/common/extensions/docs/examples/api/tabs/zoom/popup.js
@@ -0,0 +1,111 @@
+/**
+ * @fileoverview This code supports the popup behaviour of the extension, and
+ *               demonstrates how to:
+ *
+ *               1) Set the zoom for a tab using tabs.setZoom()
+ *               2) Read the current zoom of a tab using tabs.getZoom()
+ *               3) Set the zoom mode of a tab using tabs.setZoomSettings()
+ *               4) Read the current zoom mode of a tab using
+ *               tabs.getZoomSettings()
+ *
+ *               It also demonstrates using a zoom change listener to update the
+ *               contents of a control.
+ */
+
+zoomStep = 1.1;
+
+function displayZoomLevel(level) {
+  var percentZoom = parseFloat(level) * 100;
+  var zoom_percent_str = percentZoom.toFixed(1) + '%';
+
+  document.getElementById('displayDiv').textContent = zoom_percent_str;
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    chrome.tabs.getZoomSettings(function(zoomSettings) {
+      var modeRadios = document.getElementsByName('modeRadio');
+      for (var i = 0; i < modeRadios.length; i++) {
+        if (modeRadios[i].value == zoomSettings.mode)
+          modeRadios[i].checked = true;
+      }
+
+      var scopeRadios = document.getElementsByName('scopeRadio');
+      for (var i = 0; i < scopeRadios.length; i++) {
+        if (scopeRadios[i].value == zoomSettings.scope)
+          scopeRadios[i].checked = true;
+      }
+    });
+
+    chrome.tabs.getZoom(displayZoomLevel);

[raymes, 2014/07/18 00:10:06]

All the code in this function up to here seems indented one level too much.

[wjmaclean, 2014/07/18 18:12:49]

Done.

+
+  document.getElementById('increaseButton').onclick = doZoomIn;
+  document.getElementById('decreaseButton').onclick = doZoomOut;
+  document.getElementById('defaultButton').onclick = doZoomDefault;
+  document.getElementById('setModeButton').onclick = doSetMode;
+  document.getElementById('closeButton').onclick = doClose;
+});
+
+function zoomChangeListener(zoomChangeInfo) {
+  displayZoomLevel(zoomChangeInfo.newZoomFactor);
+}
+
+chrome.tabs.onZoomChange.addListener(zoomChangeListener);
+
+function changeZoomByFactorDelta(factorDelta) {
+  chrome.tabs.getZoom(function(zoomFactor) {
+    var newZoomFactor = factorDelta * zoomFactor;
+    chrome.tabs.setZoom(newZoomFactor, function() {
+      if (chrome.runtime.lastError)
+        console.log('[ZoomDemoExtension] ' + chrome.runtime.lastError.message);
+    });
+  });
+}
+
+function doZoomIn() {
+  changeZoomByFactorDelta(zoomStep);
+}
+
+function doZoomOut() {
+  changeZoomByFactorDelta(1.0/zoomStep);
+}
+
+function doZoomDefault() {
+  chrome.tabs.setZoom(1.0, function() {
+    if (chrome.runtime.lastError)
+      console.log('[ZoomDemoExtension] ' + chrome.runtime.lastError.message);
+  });
+}
+
+function doSetMode() {
+  var modeVal;
+  var modeRadios = document.getElementsByName('modeRadio');
+  for (var i = 0; i < modeRadios.length; i++) {
+    if (modeRadios[i].checked)
+      modeVal = modeRadios[i].value;
+  }
+
+  var scopeVal;
+  var scopeRadios = document.getElementsByName('scopeRadio');
+  for (var i = 0; i < scopeRadios.length; i++) {
+    if (scopeRadios[i].checked)
+      scopeVal = scopeRadios[i].value;
+  }
+
+  if (!modeVal || !scopeVal) {
+    console.log(
+        '[ZoomDemoExtension] Must specify values for both mode & scope.');
+    return;
+  }
+
+  chrome.tabs.setZoomSettings({ mode: modeVal, scope: scopeVal },
+    function() {
+      if (chrome.runtime.lastError) {
+        console.log('[ZoomDemoExtension] doSetMode() error: ' +
+                    chrome.runtime.lastError.message);
+      }
+    });
+}
+
+function doClose() {
+  self.close();
+}