Add a 3rd zoom level

jsh9 · Nov 18, 2023 · 6d5425a · 6d5425a
1 parent 4e9bd51
commit 6d5425a
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 21 deletions.
diff --git a/background.js b/background.js
@@ -1,18 +1,29 @@
 const ZOOM_LEVEL_1_KEY = 'zoom_level_1';
 const ZOOM_LEVEL_2_KEY = 'zoom_level_2';
+const ZOOM_LEVEL_3_KEY = 'zoom_level_3';
 const TARGET_ZOOM_LEVEL_KEY = 'target_zoom_level';
 const EPSILON = 0.001;
 
 let zoomLevel1 = 110;
-let zoomLevel2 = 150;
+let zoomLevel2 = 125;
+let zoomLevel3 = 150;
 
 // Load initial zoom levels
-chrome.storage.sync.get([ZOOM_LEVEL_1_KEY, ZOOM_LEVEL_2_KEY], (result) => {
-  zoomLevel1 = result[ZOOM_LEVEL_1_KEY] || zoomLevel1;
-  zoomLevel2 = result[ZOOM_LEVEL_2_KEY] || zoomLevel2;
-
-  console.log('User-specified zoom levels:', zoomLevel1, zoomLevel2);
-});
+chrome.storage.sync.get(
+  [ZOOM_LEVEL_1_KEY, ZOOM_LEVEL_2_KEY, ZOOM_LEVEL_3_KEY],
+  (result) => {
+    zoomLevel1 = result[ZOOM_LEVEL_1_KEY] || zoomLevel1;
+    zoomLevel2 = result[ZOOM_LEVEL_2_KEY] || zoomLevel2;
+    zoomLevel3 = result[ZOOM_LEVEL_3_KEY] || zoomLevel3;
+
+    console.log(
+      'User-specified zoom levels:',
+      zoomLevel1,
+      zoomLevel2,
+      zoomLevel3,
+    );
+  },
+);
 
 // Listen for storage changes to update zoom levels
 chrome.storage.onChanged.addListener((changes) => {
@@ -22,6 +33,9 @@ chrome.storage.onChanged.addListener((changes) => {
   if (changes[ZOOM_LEVEL_2_KEY]) {
     zoomLevel2 = changes[ZOOM_LEVEL_2_KEY].newValue || zoomLevel2;
   }
+  if (changes[ZOOM_LEVEL_3_KEY]) {
+    zoomLevel3 = changes[ZOOM_LEVEL_3_KEY].newValue || zoomLevel3;
+  }
 });
 
 // Listen for extension icon clicks
@@ -32,10 +46,17 @@ chrome.action.onClicked.addListener((tab) => {
   chrome.tabs.getZoom(tab.id, (currentZoomRaw) => {
     let currentZoom = currentZoomRaw * 100;
     console.log('Current zoom level:', currentZoom);
-    console.log(`User-specified zoom levels: (${zoomLevel1}, ${zoomLevel2})`);
-
-    // Toggle between the two user-defined zoom levels
-    let newZoom = determineNewZoomLevel(currentZoom, zoomLevel1, zoomLevel2);
+    console.log(
+      `User-specified zoom levels: (${zoomLevel1}, ${zoomLevel2}, ${zoomLevel3})`,
+    );
+
+    // Toggle between the three user-defined zoom levels
+    let newZoom = determineNewZoomLevel(
+      currentZoom,
+      zoomLevel1,
+      zoomLevel2,
+      zoomLevel3,
+    );
 
     // Apply the new zoom level to all open tabs
     setZoomLevelForAllTabs(currentZoom, newZoom);
@@ -91,10 +112,27 @@ function setZoomToTargetLevelInGivenTab(tabId) {
   });
 }
 
-function determineNewZoomLevel(currentZoom, zoomLevel1, zoomLevel2) {
-  let newZoomLevel = areNumbersClose(currentZoom, zoomLevel1)
-    ? zoomLevel2
-    : zoomLevel1;
+function determineNewZoomLevel(
+  currentZoom,
+  zoomLevel1,
+  zoomLevel2,
+  zoomLevel3,
+) {
+  let numbers = [zoomLevel1, zoomLevel2, zoomLevel3];
+
+  numbers.sort(function (a, b) {
+    return a - b;
+  });
+
+  let newZoomLevel;
+
+  if (areNumbersClose(currentZoom, numbers[0])) {
+    newZoomLevel = numbers[1];
+  } else if (areNumbersClose(currentZoom, numbers[1])) {
+    newZoomLevel = numbers[2];
+  } else {
+    newZoomLevel = numbers[0];
+  }
 
   return newZoomLevel;
 }

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "Zoom Toggler",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "description": "Quickly toggle browser page zoom between two levels",
     "permissions": [
         "storage"

diff --git a/options.html b/options.html
@@ -21,6 +21,8 @@ <h3>Zoom levels:</h3>
       <input type="number" id="zoom1" min="25" max="500" required /><br />
       <label for="zoom2">Zoom 2:</label>
       <input type="number" id="zoom2" min="25" max="500" required /><br />
+      <label for="zoom3">Zoom 3:</label>
+      <input type="number" id="zoom3" min="25" max="500" required /><br />
       <button type="submit">Save</button>
     </form>
     <div id="status"></div>

diff --git a/options.js b/options.js
@@ -1,21 +1,31 @@
 const ZOOM_LEVEL_1_KEY = 'zoom_level_1';
 const ZOOM_LEVEL_2_KEY = 'zoom_level_2';
+const ZOOM_LEVEL_3_KEY = 'zoom_level_3';
 
 document.addEventListener('DOMContentLoaded', () => {
   // Load saved zoom levels and populate the form
-  chrome.storage.sync.get([ZOOM_LEVEL_1_KEY, ZOOM_LEVEL_2_KEY], (result) => {
-    document.getElementById('zoom1').value = result[ZOOM_LEVEL_1_KEY] || '';
-    document.getElementById('zoom2').value = result[ZOOM_LEVEL_2_KEY] || '';
-  });
+  chrome.storage.sync.get(
+    [ZOOM_LEVEL_1_KEY, ZOOM_LEVEL_2_KEY, ZOOM_LEVEL_3_KEY],
+    (result) => {
+      document.getElementById('zoom1').value = result[ZOOM_LEVEL_1_KEY] || '';
+      document.getElementById('zoom2').value = result[ZOOM_LEVEL_2_KEY] || '';
+      document.getElementById('zoom3').value = result[ZOOM_LEVEL_3_KEY] || '';
+    },
+  );
 
   // Save the zoom levels when the form is submitted
   document.getElementById('zoomForm').addEventListener('submit', (event) => {
     event.preventDefault();
     const zoom1 = parseInt(document.getElementById('zoom1').value);
     const zoom2 = parseInt(document.getElementById('zoom2').value);
+    const zoom3 = parseInt(document.getElementById('zoom3').value);
 
     chrome.storage.sync.set(
-      { [ZOOM_LEVEL_1_KEY]: zoom1, [ZOOM_LEVEL_2_KEY]: zoom2 },
+      {
+        [ZOOM_LEVEL_1_KEY]: zoom1,
+        [ZOOM_LEVEL_2_KEY]: zoom2,
+        [ZOOM_LEVEL_3_KEY]: zoom3,
+      },
       () => {
         // Display a message to the user to indicate that the zoom levels have been saved
         const status = document.getElementById('status');