Add Chrome magnifier extension #1251
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Created a fully functional Chrome browser extension with a magnifying glass feature: - Circular magnifier that follows mouse movement - Adjustable zoom level (1.5x - 5x) - Adjustable magnifier size (100px - 400px) - Keyboard shortcut support (Alt + M) - Modern popup UI with gradient design - Complete documentation in Chinese Files included: - manifest.json: Extension configuration - popup.html & js/popup.js: Control interface - js/magnifier.js: Core magnifier functionality - css/magnifier.css: Styling - icons/: Generated icons in 16x16, 48x48, 128x128 - generate_icons.py: Python script to generate icons - README.md: Comprehensive user guide
|
您的来信已收到。
|
|
我是莫文俊，邮件已经收到了，谢谢你。
|
|
这是来自QQ邮箱的自动回复邮件。
您好，您的邮件已经收到，我会尽快给您回复。
|
…-011CUpjjYF9Cg8P1KR9EhdjP
Fixed the "Could not establish connection. Receiving end does not exist" error. Changes: - Added comprehensive error handling in popup.js - Implemented page type detection to identify unsupported pages (chrome://, etc.) - Added automatic retry mechanism with 500ms delay - Improved user feedback with clear status messages - Added contentScriptReady flag to track connection state - Updated version to 1.0.1 User-facing improvements: - Shows "Please refresh the page and try again" when content script not loaded - Shows "This page does not support the extension" on chrome:// pages - Disables toggle button when extension is not ready - Better error messages in all edge cases Documentation: - Updated README with detailed FAQ about connection errors - Created TESTING.md with step-by-step testing instructions - Added troubleshooting guide and debugging tips
Major update v1.1.0: The magnifier now displays actual webpage content instead of just placeholder text. Changes: - Completely rewrote magnifier.js to use DOM cloning technique - Created magnifierLens container that holds a cloned copy of the page body - Used CSS transform scale() and translate() to zoom and position content - Added MutationObserver to detect page changes and update magnified content - Implemented requestAnimationFrame for smooth performance - Removed canvas-based placeholder implementation Technical implementation: - createMagnifierV2(): Creates magnifier with lens container - updateMagnifierV2(): Calculates zoom and translation on mouse move - syncPageContent(): Clones document body and removes scripts/magnifier - MutationObserver: Marks content as needing update when page changes - Transform: scale(zoom) translate(x, y) for smooth magnification User-visible improvements: - Magnifier now shows real text, images, buttons, links, etc. - All CSS styles are preserved in the magnified view - Smooth scrolling and real-time updates - Circular mask with enhanced shadows for better appearance Performance optimizations: - Content only re-cloned when page changes (needsUpdate flag) - Uses requestAnimationFrame to batch DOM updates - Removes script tags from clones to prevent execution - Efficient transform-based positioning (GPU accelerated) Updated documentation: - README: Added v1.1.0 changelog with feature highlights - TESTING.md: Added verification steps for real content magnification - manifest.json: Bumped version to 1.1.0 Fixes #issue: Magnifier displays real webpage content instead of placeholder
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Created a fully functional Chrome browser extension with a magnifying glass feature:
Files included: