diff --git a/submissions/Zoom in or out Tool/content.js b/submissions/Zoom in or out Tool/content.js new file mode 100644 index 00000000..d0b29d61 --- /dev/null +++ b/submissions/Zoom in or out Tool/content.js @@ -0,0 +1,81 @@ +let zoomLevel = 100; +let zoomStyle = null; + +// Listen for messages from the popup +chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { + if (request.action === "getZoom") { + sendResponse({zoom: zoomLevel}); + } else if (request.action === "setZoom") { + zoomLevel = request.zoom; + applyZoom(); + sendResponse({success: true}); + } else if (request.action === "fitWidth") { + fitToWidth(); + sendResponse({success: true}); + } + return true; +}); + +// Apply zoom to the page +function applyZoom() { + if (!zoomStyle) { + zoomStyle = document.createElement('style'); + document.head.appendChild(zoomStyle); + } + + zoomStyle.textContent = ` + html, body { + zoom: ${zoomLevel}% !important; + -moz-transform: scale(${zoomLevel/100}) !important; + -moz-transform-origin: 0 0 !important; + } + `; +} + +// Fit page to width +function fitToWidth() { + const viewportWidth = window.innerWidth; + const pageWidth = document.documentElement.scrollWidth; + const ratio = viewportWidth / pageWidth; + zoomLevel = Math.round(ratio * 100); + zoomLevel = Math.max(25, Math.min(400, zoomLevel)); // Limit between 25% and 400% + applyZoom(); + + // Update popup if it's open + chrome.runtime.sendMessage({action: "updateZoom", zoom: zoomLevel}); +} + +// Initialize zoom +// Check if we should use a saved zoom level +chrome.storage.sync.get(['rememberZoom'], function(result) { + if (result.rememberZoom) { + const hostname = window.location.hostname; + chrome.storage.sync.get([hostname], function(data) { + if (data[hostname]) { + zoomLevel = data[hostname]; + applyZoom(); + } + }); + } +}); + +// Listen for keyboard shortcuts +document.addEventListener('keydown', function(e) { + // Ctrl + Plus: Zoom In + if (e.ctrlKey && e.key === '+') { + zoomLevel += 10; + zoomLevel = Math.min(400, zoomLevel); + applyZoom(); + } + // Ctrl + Minus: Zoom Out + else if (e.ctrlKey && e.key === '-') { + zoomLevel -= 10; + zoomLevel = Math.max(25, zoomLevel); + applyZoom(); + } + // Ctrl + 0: Reset Zoom + else if (e.ctrlKey && e.key === '0') { + zoomLevel = 100; + applyZoom(); + } +}); diff --git a/submissions/Zoom in or out Tool/images/icon128.png b/submissions/Zoom in or out Tool/images/icon128.png new file mode 100644 index 00000000..d7e38b72 Binary files /dev/null and b/submissions/Zoom in or out Tool/images/icon128.png differ diff --git a/submissions/Zoom in or out Tool/images/icon16.png b/submissions/Zoom in or out Tool/images/icon16.png new file mode 100644 index 00000000..379604fb Binary files /dev/null and b/submissions/Zoom in or out Tool/images/icon16.png differ diff --git a/submissions/Zoom in or out Tool/images/icon48.png b/submissions/Zoom in or out Tool/images/icon48.png new file mode 100644 index 00000000..56f36f01 Binary files /dev/null and b/submissions/Zoom in or out Tool/images/icon48.png differ diff --git a/submissions/Zoom in or out Tool/manifest.json b/submissions/Zoom in or out Tool/manifest.json new file mode 100644 index 00000000..3a636121 --- /dev/null +++ b/submissions/Zoom in or out Tool/manifest.json @@ -0,0 +1,27 @@ +{ + "manifest_version": 3, + "name": "Zoom Helper", + "version": "1.0", + "description": "A simple extension to help users zoom in and out of web pages", + "permissions": ["activeTab", "storage"], + "action": { + "default_popup": "popup.html", + "default_icon": { + "16": "images/icon16.png", + "48": "images/icon48.png", + "128": "images/icon128.png" + } + }, + "icons": { + "16": "images/icon16.png", + "48": "images/icon48.png", + "128": "images/icon128.png" + }, + "content_scripts": [ + { + "matches": [""], + "js": ["content.js"], + "css": ["styles.css"] + } + ] +} diff --git a/submissions/Zoom in or out Tool/popup.css b/submissions/Zoom in or out Tool/popup.css new file mode 100644 index 00000000..d4138c59 --- /dev/null +++ b/submissions/Zoom in or out Tool/popup.css @@ -0,0 +1,65 @@ +body { + width: 300px; + padding: 15px; + font-family: Arial, sans-serif; +} + +.container { + display: flex; + flex-direction: column; + gap: 15px; +} + +h1 { + margin: 0; + text-align: center; + font-size: 18px; +} + +h2 { + margin: 0; + font-size: 14px; +} + +.zoom-controls { + display: flex; + align-items: center; + justify-content: space-between; +} + +.zoom-controls button { + width: 40px; + height: 40px; + font-size: 20px; + cursor: pointer; +} + +#zoom-level { + font-size: 16px; + font-weight: bold; +} + +.preset-buttons { + display: flex; + gap: 10px; +} + +.preset-buttons button { + flex: 1; + padding: 8px; + cursor: pointer; +} + +.options { + margin-top: 10px; +} + +.keyboard-shortcuts { + margin-top: 10px; + font-size: 12px; +} + +.keyboard-shortcuts ul { + margin: 5px 0 0 0; + padding-left: 20px; +} diff --git a/submissions/Zoom in or out Tool/popup.html b/submissions/Zoom in or out Tool/popup.html new file mode 100644 index 00000000..49a291c4 --- /dev/null +++ b/submissions/Zoom in or out Tool/popup.html @@ -0,0 +1,36 @@ + + + + Zoom Helper + + + +
+

Zoom Helper

+
+ + 100% + +
+
+ + +
+
+ +
+
+

Keyboard Shortcuts

+
    +
  • Zoom In: Ctrl + +
  • +
  • Zoom Out: Ctrl + -
  • +
  • Reset: Ctrl + 0
  • +
+
+
+ + + diff --git a/submissions/Zoom in or out Tool/popup.js b/submissions/Zoom in or out Tool/popup.js new file mode 100644 index 00000000..4fbc996c --- /dev/null +++ b/submissions/Zoom in or out Tool/popup.js @@ -0,0 +1,100 @@ +document.addEventListener('DOMContentLoaded', function() { + const zoomInButton = document.getElementById('zoom-in'); + const zoomOutButton = document.getElementById('zoom-out'); + const resetButton = document.getElementById('reset-zoom'); + const fitWidthButton = document.getElementById('fit-width'); + const zoomLevelDisplay = document.getElementById('zoom-level'); + const rememberZoomCheckbox = document.getElementById('remember-zoom'); + + let currentZoom = 100; + let rememberZoom = false; + + // Load saved settings + chrome.storage.sync.get(['rememberZoom'], function(result) { + rememberZoom = result.rememberZoom || false; + rememberZoomCheckbox.checked = rememberZoom; + }); + + // Get current tab's zoom level + chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { + if (tabs[0]) { + const tabId = tabs[0].id; + const url = new URL(tabs[0].url).hostname; + + if (rememberZoom) { + chrome.storage.sync.get([url], function(result) { + if (result[url]) { + currentZoom = result[url]; + zoomLevelDisplay.textContent = `${currentZoom}%`; + } + }); + } + + // Send message to content script to get current zoom + chrome.tabs.sendMessage(tabId, {action: "getZoom"}, function(response) { + if (response && response.zoom) { + currentZoom = response.zoom; + zoomLevelDisplay.textContent = `${currentZoom}%`; + } + }); + } + }); + + // Zoom in + zoomInButton.addEventListener('click', function() { + changeZoom(10); + }); + + // Zoom out + zoomOutButton.addEventListener('click', function() { + changeZoom(-10); + }); + + // Reset zoom + resetButton.addEventListener('click', function() { + setZoom(100); + }); + + // Fit width + fitWidthButton.addEventListener('click', function() { + chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { + if (tabs[0]) { + chrome.tabs.sendMessage(tabs[0].id, {action: "fitWidth"}); + } + }); + }); + + // Remember zoom checkbox + rememberZoomCheckbox.addEventListener('change', function() { + rememberZoom = this.checked; + chrome.storage.sync.set({rememberZoom: rememberZoom}); + }); + + // Change zoom by a relative amount + function changeZoom(amount) { + currentZoom += amount; + currentZoom = Math.max(25, Math.min(400, currentZoom)); // Limit between 25% and 400% + setZoom(currentZoom); + } + + // Set zoom to a specific level + function setZoom(level) { + currentZoom = level; + zoomLevelDisplay.textContent = `${currentZoom}%`; + + chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { + if (tabs[0]) { + const tabId = tabs[0].id; + const url = new URL(tabs[0].url).hostname; + + chrome.tabs.sendMessage(tabId, {action: "setZoom", zoom: currentZoom}); + + if (rememberZoom) { + let data = {}; + data[url] = currentZoom; + chrome.storage.sync.set(data); + } + } + }); + } +}); diff --git a/submissions/Zoom in or out Tool/readme.md b/submissions/Zoom in or out Tool/readme.md new file mode 100644 index 00000000..efce1944 --- /dev/null +++ b/submissions/Zoom in or out Tool/readme.md @@ -0,0 +1,7 @@ +- Simple popup interface with zoom in/out buttons +- Current zoom level display +- "Reset" and "Fit Width" options +- Option to remember zoom settings per website +- Keyboard shortcuts (Ctrl+Plus, Ctrl+Minus, Ctrl+0) +- Works on all websites +- Zoom range from 25% to 400% diff --git a/submissions/Zoom in or out Tool/styles.css b/submissions/Zoom in or out Tool/styles.css new file mode 100644 index 00000000..4f6dd509 --- /dev/null +++ b/submissions/Zoom in or out Tool/styles.css @@ -0,0 +1,24 @@ +.zoom-helper-controls { + position: fixed; + bottom: 20px; + right: 20px; + background: rgba(255, 255, 255, 0.8); + border-radius: 5px; + padding: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + z-index: 9999; + display: flex; + align-items: center; +} + +.zoom-helper-controls button { + width: 30px; + height: 30px; + margin: 0 5px; + cursor: pointer; +} + +.zoom-helper-controls span { + margin: 0 5px; + font-weight: bold; +}