Sample Extension for Tabs Zoom API.

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

Index: chrome/common/extensions/docs/examples/api/tabs/popup.js
diff --git a/chrome/common/extensions/docs/examples/api/tabs/popup.js b/chrome/common/extensions/docs/examples/api/tabs/popup.js
new file mode 100644
index 0000000000000000000000000000000000000000..6f90bbf9adac4194281c786865a021687ea401f7
--- /dev/null
+++ b/chrome/common/extensions/docs/examples/api/tabs/popup.js
@@ -0,0 +1,122 @@
+/**
+ * @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.
+ */
+
+tabId = -1;
+zoomStep = 1.1;
+
+function displayZoomLevel(level) {
+  var percentZoom = parseFloat(level) * 100;
+  var zoom_percent_str = percentZoom.toFixed(1) + '%';
+
+  document.getElementById('displayButton').textContent = zoom_percent_str;
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  chrome.tabs.query({active: true}, function (tabs) {
+    if (tabs.length > 1)
+      console.log('TabsQuery: ' + tabs)
+    tabId= tabs[0].id;

[raymes, 2014/07/17 00:39:10]

nit: tabId =
This seems like it is just going to use an arbitrary tab (not necessarily the
current one, which would make behavior weird)?

Since you only ever choose 1 tab, why not just omit the tab ID altogether which
causes the zoom API to default to the current tab. Alternatively you could allow
the user to select the tab to zoom, but this would make the example
significantly more complicated.

[wjmaclean, 2014/07/17 18:46:26]

I thought the query would only ever return the current tab, so the array would
only have one element. I wanted to showcase the zoom api calls with a tabId ...
is there a better way to get the tabId of the current tab?
Done.

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

Ah, my bad it seems like your query would correctly only return the current tab.
If you want to keep it that way, it's fine by me. Sorry for the noise.

+
+    chrome.tabs.getZoomSettings(tabId, function(zoomSettings) {
+      var modeRadios = document.getElementsByName('modeRadio');
+      for (var i = 0; i < modeRadios.length; i++)

[raymes, 2014/07/17 00:39:10]

need {} around this multi-line for loop (here and below)

[wjmaclean, 2014/07/17 18:46:27]

Done.

+        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(tabId, displayZoomLevel);
+  });
+
+  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) {
+  if (tabId == -1)
+    return;
+
+  chrome.tabs.getZoom(tabId, function(zoomFactor) {
+    currentZoomFactor = zoomFactor;

[raymes, 2014/07/17 00:39:10]

I think you can get rid of the "currentZoomFactor" variable. It's only used on
the next line in place of zoomFactor.

[wjmaclean, 2014/07/17 18:46:27]

Done.

+    var newZoomFactor = factorDelta * currentZoomFactor;
+    chrome.tabs.setZoom(tabId, 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() {
+  if (tabId == -1)
+    return;
+
+  chrome.tabs.setZoom(tabId, 1.0);
+}
+
+function doSetMode() {
+  if (tabId == -1)
+    return;
+
+  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 === undefined) || (scopeVal === undefined)) {

[raymes, 2014/07/17 00:39:10]

if (!modeVal || !scopeVal)

[wjmaclean, 2014/07/17 18:46:27]

Done.

+    alert('You must specify values for both mode & scope first.');
+    self.close();

[raymes, 2014/07/17 00:39:10]

My guess is that this case should never really happen? It might be worth just
logging something to the console rather than the above 2 lines.

[wjmaclean, 2014/07/17 18:46:27]

Done.

+    return;
+  }
+
+  chrome.tabs.setZoomSettings(tabId, { mode: modeVal, scope: scopeVal },
+    function() {
+      if (chrome.runtime.lastError)

[raymes, 2014/07/17 00:39:10]

nit: {} for multi-line if

[wjmaclean, 2014/07/17 18:46:27]

Done.

+        console.log('[ZoomDemoExtension] doSetMode() error: ' +
+                    chrome.runtime.lastError.message);
+    });
+}
+
+function doClose() {
+  self.close();
+}