Add code, config, and resources

README.md

@@ -1,2 +1,21 @@
 # chrome-zoom-toggler
-One-click toggle between two customizable browser zoom levels
+
+A Chrome and Edge extension to enable one-click toggling between two customizable page zoom levels.
+
+## 1. Installation
+
+This extension is not on the Chrome Web Store yet. To install it manually into your Chrome or Edge browser, following the steps below:
+
+1. Download this extension. You can choose either options:
+    * Download the latest stable release from the [Releases](https://github.com/jsh9/chatgpt-to-markdown/releases) page
+    * Clone this repository (which may contain newer-than-stable features). [Here](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)) is how to clone a Github repository.
+
+2. Manually load the downloaded/cloned files into the browser:
+    * [Chrome](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked)
+    * [Edge](https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/extension-sideloading)
+
+## 2. How to use
+
+Once installed, click on the icon of the extension to switch between 110% zoom and 150% zoom.
+
+You can customize the two zoom levels by right-clicking on the icon and go to Extension Options.  Enter your desired zoom levels in the pop-up page.

background.js

@@ -0,0 +1,94 @@
+const ZOOM_LEVEL_1_KEY = 'zoom_level_1';
+const ZOOM_LEVEL_2_KEY = 'zoom_level_2';
+const TARGET_ZOOM_LEVEL_KEY = 'target_zoom_level';
+const EPSILON = 0.001;
+
+let zoomLevel1 = 110;
+let zoomLevel2 = 150;
+
+// Load initial zoom levels
+chrome.storage.sync.get([ZOOM_LEVEL_1_KEY, ZOOM_LEVEL_2_KEY], (result) => {
+  zoomLevel1 = result[ZOOM_LEVEL_1_KEY] || 110;
+  zoomLevel2 = result[ZOOM_LEVEL_2_KEY] || 150;
+
+  console.log('User-specified zoom levels:', zoomLevel1, zoomLevel2);
+});
+
+// Listen for storage changes to update zoom levels
+chrome.storage.onChanged.addListener((changes) => {
+  if (changes[ZOOM_LEVEL_1_KEY]) {
+    zoomLevel1 = changes[ZOOM_LEVEL_1_KEY].newValue || 110;
+  }
+  if (changes[ZOOM_LEVEL_2_KEY]) {
+    zoomLevel2 = changes[ZOOM_LEVEL_2_KEY].newValue || 150;
+  }
+});
+
+// Listen for extension icon clicks
+chrome.browserAction.onClicked.addListener((tab) => {
+  // Retrieve the current zoom level of the active tab
+  chrome.tabs.getZoom(tab.id, (currentZoom) => {
+    let currentZoomPct = currentZoom * 100;
+    console.log('Current zoom level:', currentZoomPct);
+    console.log('zoomLevel1:', zoomLevel1);
+    console.log('zoomLevel2:', zoomLevel2);
+
+    // Toggle between the two user-defined zoom levels
+    let newZoomLevel = determineNewZoomLevel(
+      currentZoomPct,
+      zoomLevel1,
+      zoomLevel2,
+    );
+
+    console.log('Setting zoom level to:', newZoomLevel);
+
+    // Apply the new zoom level to all open tabs
+    setZoomLevelForAllTabs(newZoomLevel);
+    chrome.storage.sync.set({ [TARGET_ZOOM_LEVEL_KEY]: newZoomLevel });
+  });
+});
+
+// Function to set the zoom level for all open tabs
+function setZoomLevelForAllTabs(zoomLevel) {
+  chrome.tabs.query({}, (tabs) => {
+    tabs.forEach((tab) => {
+      chrome.tabs.setZoom(tab.id, zoomLevel / 100);
+    });
+  });
+}
+
+// Apply the stored zoom level to all new tabs when they are created
+chrome.tabs.onCreated.addListener((tab) => {
+  setZoomToTargetLevel(tab.id);
+});
+
+// Apply the stored zoom level to all updated tabs when they are refreshed
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  if (changeInfo.status === 'complete') {
+    setZoomToTargetLevel(tabId);
+  }
+});
+
+
+function setZoomToTargetLevel(tabId) {
+  chrome.tabs.getZoom(tabId, () => {
+    chrome.storage.sync.get(TARGET_ZOOM_LEVEL_KEY, (result) => {
+      let targetZoomLevel = result[TARGET_ZOOM_LEVEL_KEY];
+      chrome.tabs.setZoom(tabId, targetZoomLevel / 100);
+    });
+  });
+}
+
+
+function determineNewZoomLevel(currentZoomPct, zoomLevel1, zoomLevel2) {
+  let newZoomLevel = areNumbersClose(currentZoomPct, zoomLevel1)
+    ? zoomLevel2
+    : zoomLevel1;
+
+  return newZoomLevel;
+}
+
+
+function areNumbersClose(a, b) {
+  return Math.abs(a - b) < EPSILON;
+}

manifest.json

@@ -0,0 +1,27 @@
+{
+    "manifest_version": 2,
+    "name": "Zoom Toggler",
+    "version": "0.0.1",
+    "description": "Quickly toggle browser page zoom between two levels",
+    "permissions": [
+        "storage",
+        "tabs"
+    ],
+    "options_page": "options.html",
+    "background": {
+        "scripts": ["background.js"],
+        "persistent": false
+    },
+    "browser_action": {
+      "default_icon": {
+        "16": "icon.png",
+        "48": "icon.png",
+        "128": "icon.png"
+      }
+    },
+    "icons": {
+        "16": "icon.png",
+        "48": "icon.png",
+        "128": "icon.png"
+    }
+}

options.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        width: 300px;
+        height: auto;
+        padding: 10px;
+        font-family: Arial, sans-serif;
+      }
+
+      input[type='number'] {
+        width: 80px;
+      }
+    </style>
+  </head>
+  <body>
+    <h3>Zoom levels:</h3>
+    <form id="zoomForm">
+      <label for="zoom1">Zoom 1:</label>
+      <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 />
+      <button type="submit">Save</button>
+    </form>
+    <div id="status"></div>
+    <script src="options.js"></script>
+  </body>
+</html>

options.js

@@ -0,0 +1,26 @@
+const ZOOM_LEVEL_1_KEY = 'zoom_level_1';
+const ZOOM_LEVEL_2_KEY = 'zoom_level_2';
+
+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] || '';
+  });
+
+  // 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);
+
+    chrome.storage.sync.set({ [ZOOM_LEVEL_1_KEY]: zoom1, [ZOOM_LEVEL_2_KEY]: zoom2 }, () => {
+      // Display a message to the user to indicate that the zoom levels have been saved
+      const status = document.getElementById('status');
+      status.textContent = 'Zoom levels saved.';
+      setTimeout(() => {
+        status.textContent = '';
+      }, 2000);
+    });
+  });
+});