Screen Marker

Draw on-screen markers by dragging with modifier keys. For presentations, online classes, and annotations.

To those opening the store 👋 This extension allows you to draw boxes on the screen using only keyboard shortcuts. We have summarized the key points for each heading below. 【📋 Quick Reference】 ・✏️ Drawing a marker: Hold down the modifier key and drag → A rectangular marker appears on the screen. ・🧹 Clearing markers: Clear by tapping the set modifier key within about 0.5 seconds. ・🆓 Free Version: 1 setting tab, 1 simultaneous marker, drawing appearance is default style (key can be changed). ・⭐ Pro Version: 3 setting tabs, multiple simultaneous drawings, your custom style is reflected in the drawing, export/import of settings. ・⚙️ Settings: From the pop-up menu of the extension icon. Help and language switching are available from the companion page. ・⚠️ Caution: May not work depending on the site or display method. For sensitive screens, follow internal company rules. 【✨ What this extension can do】 ・🖥️ Screen Marker is a Chrome extension that allows you to draw rectangular markers on a web page you are viewing simply by dragging the mouse while holding down a modifier key. ・It is displayed directly overlaid on the browser's view area. 💼 Examples of uses: ・📸 Temporarily marking areas before taking a screenshot ・💬 Indicating areas you want to show during online meetings or classes ・🎬 Circling the area you want someone to look at during an operation demo 💡 Other points: ・The drawn markers remain on the page and will persist until the page is reloaded. ・There is a minimum drag requirement to prevent accidental drawing of rectangles from very small movements. ・You can manage settings such as color, key, and behavior from the extension icon's pop-up. ・Help and upgrade information can be viewed from a page within the same extension package. ・By default, markers are tied to the display of "that tab." If you switch between multiple tabs, it's recommended to establish a workflow, such as taking a screenshot or making a note before closing a tab, for peace of mind. 【🖱️ Basic Usage】 ✏️ Drawing: ・Hold down all modifier keys set in the popup and drag. ・The default is something like holding down both the left Shift and left Ctrl keys (can be changed in the product settings). 🧹 Keys and Clearing: ・You can assign different modifier key combinations for each setting, allowing you to use them for different purposes. ・To clear all drawn markers at once, press and release the assigned modifier keys within about 0.5 seconds. ⚠️ Notes: ・Depending on your keyboard or OS, some modifier keys, including left/right distinction, may not be detected as expected. ・We recommend testing in your own environment to ensure they do not conflict with other shortcuts before making them permanent. 🆓 Free Version vs ⭐ Pro Version: ・Free Version: Primarily supports markers associated with Setting 1. ・Pro Version: Can handle markers tied to multiple settings. ・If you want to keep markers visible for a long time, you can adjust the fade-out time and automatic fading behavior in the style settings. 【🎨 Marker Appearance and Style】 🛠️ Example adjustable items: ・Fill color・Opacity ・Border color・Opacity・Thickness ・Corner radius ・Line type (solid, double line, wavy, dashed, etc.) ⏱️ Other options: ・Fade out (fades after a set time) ・Display drawing indicator ・Follow scrolling or not ・Activate only on specific URL patterns ✨ Styling Tips: ・For high visibility: Yellowish fill and a dark border. ・For subtle explanations: Pastel tones with increased opacity. ・For color blindness or projection environments: Try combinations of high-contrast line colors and appropriately opaque fills. 🆓⭐ Differences between Free and Pro version (Style): ・Free version: You can change and save styles in the UI, but the default style will be used for actual drawing (Note that the preview and actual drawing might not match). ・Pro version: The saved style is directly reflected in the drawing. ・Even in the free version, you can change key assignments and flexibly set the key combination used for drawing. 【⚙️ Settings Tab and Key Assignment】 ・Pro Version: Three settings tabs (1, 2, and 3). Each can be assigned a different modifier key and style. ・Free Version: Only Setting 1. 🎭 Example Role Division (Pro): ・Setting 1: Highlighting important points ・Setting 2: Thin frame for supplementary explanations ・Setting 3: For temporary pointing 📚 Simultaneous Drawing: ・Pro Version: Can leave multiple markers on the screen simultaneously. ・Free Version: Only one at a time. You cannot add a new rectangle while a marker already exists. This leads to a flow of clearing between sections or considering Pro. ・It is recommended to follow the instructions within the product for default key assignments, and if there are conflicts, assign one of them to a different modifier key. 【💎 Free vs. Pro Differences】 🆓 Free Version: ・Basic screen marker functionality available without payment. ⭐ Pro Version: ・Through subscriptions via Stripe or lifetime purchases. Only valid upon successful license verification. 📊 Main Differences: ・Number of settings tabs (Free: 1 / Pro: 3) ・Number of concurrent drawings (Free: 1 / Pro: Multiple) ・Whether styles are reflected in drawings (Free: Default / Pro: As saved) ・Export/Import of settings (Pro only) ・Priority support (Assumed for Pro) 🌐 Connection Details: ・License verification is done over the network. In offline or restricted proxy environments, Pro may temporarily be unavailable. Please consider improving your connection or trying again after some time. 📝 Notation: ・Please follow the wording for pricing and plans on the upgrade screen and store listing. ・We recommend avoiding exaggerated claims and aligning with the product description to adhere to the review guidelines. ・Refunds and cancellations are subject to the terms and conditions of the payment platform and the store. 【📤 Export and Import】 ・Pro Version only: Export your settings to a file and import them later for use in a different environment or for backup purposes. ・Free Version: Not available. 🤝 Useful Scenarios: ・You want to share the same appearance or keybindings with your team ・You want to transfer settings when switching devices ・You want to revert to the original settings after testing changes ・Please handle exported files in accordance with your organization's security policy. 【📖 Help, Onboarding, Multi-language】 ・The settings UI for help, first-time walkthrough, and popups supports multiple languages via the Chrome extension's internationalization messages. ・The display language can be switched in the settings. ・The wording, key names, and date/unit notations may vary depending on the locale. ・New users will grasp the major operations faster by following the onboarding flow. 【🔒 Privacy and Data】 ・The marker is overlaid on the page you are viewing as a DOM element (it does not rewrite and save the page content). ・License verification and authentication follow the policies of Firebase and payment providers. ・We do not provide a mechanism for developers to view the content of markers drawn by the user by default. ・To sign in or verify subscriptions, minimal necessary information may be exchanged with the server. ・When using on confidential screens, please judge according to your organization's information security policy. ・Please also note that the marker will appear in shared screens or recordings. 【💳 Licensing, Billing, and Support】 ・Billing follows the Chrome Web Store guidelines. ・License status is verified by the server and cached. ・In case of network failures, there may be retries, or notifications/dialogs depending on the situation. ・For priority support for Pro, please prioritize the instructions provided at the time of publication regarding contact points and SLA. ・When linking accounts or changing emails, please follow the in-product instructions to ensure the license is transferred correctly. 【🎯 Potential Use Cases】 ・Highlight key points on slides or demo screens during presentations ・Indicate specific parts of teaching materials during online classes or training sessions ・Sequentially mark points of focus during support or sales demos ・Point out UI locations when explaining internal tools ・Outline areas needing revisions during design reviews ・Emphasize code ranges during remote pair programming ✅ Advantages: ・Often works within the browser, eliminating the need to launch separate drawing applications. 📺 Notes: ・For video streaming or live broadcasts, it is recommended to check in advance whether the display remains stable when combined with the specifications of the streaming tool. 【⚠️ Notes and Limitations】 🧩 How it works: ・It overlays content on top of the displayed web page. Examples where behavior may vary by site: ・Security headers and Content Security Policy ・Display only within iframes ・Shadow DOM Examples where it may not work or behave as expected: ・Full-screen displays of games or videos ・Special embedded pages ・PDF viewers or custom viewers 🖥️ Environment: ・Differences in handling coordinates and scaling may occur with multiple monitors or high resolutions. 🤝 Compliance: ・Please do not use this in a way that violates copyrights or terms of service. ・Please do not record or share other people's screens without permission. Product Changes: ・The boundary between the free version and the Pro version may change with updates. Please check the latest product description for details. 💬 Bugs/Requests: ・If there is a designated contact method, using that channel may result in a faster response than through reviews. 【💡 Introduction and Usage Tips】 🚀 Upon initial setup: ・Test on representative sites such as internal portals, learning management systems, video sites, and document tools. ・Confirm that the assigned keys do not conflict with existing browser shortcuts. 📦 Deployment: ・When distributing to multiple devices in educational institutions or companies, it is effective to use the exported settings as a template or to document the recommended keys. ♿ Accessibility: ・By utilizing Pro's styles to distinguish not only by color but also by line thickness, double lines, or dashed lines, the information is easier to convey even in projection environments. 📋 Logs: ・Enabling logs makes it easier to convey the situation when investigating bugs, but please handle them with care as they may include URLs and screen information. 🔄 Updates: ・When upgrading versions, checking the release notes or in-product announcements for behavioral changes or new options makes it easier to update manuals. 🔧 Coexistence with other tools: ・If used with another screen annotation tool, be careful of overlapping shortcuts or overlays, and it is easier to stabilize operation by assigning roles to one tool. 【🖥️ Interaction with the Screen】 ・The marker is drawn overlaid on the visible area of the tab you are viewing. The main target is the webpage area below the address bar, and it will not overlap the browser's UI itself. ・When scrolling the page vertically, if "Scroll Following" is turned off, the marker will remain at the drawn position. If it is on, the display will follow the scroll. ・In multi-monitor environments, the interpretation of coordinates and scale may change after moving the window to a different display. If the position looks unnatural, please clear the marker and redraw it. ・When used with split view or picture-in-picture, the appearance can change depending on which frame is "the tab." For streaming or recording, please check that there is no discrepancy between the viewer's screen and your screen. ・On special pages where the display is contained only within an iframe of the same origin, whether the overlay appears on the parent page or the child frame depends on the page structure. If it is not as expected, refreshing by opening the page in full screen or a separate tab may improve the appearance. 【🤝 Guide to choosing between Free and Pro】 ・For short demos or personal use, the free version is often sufficient if one highlight style is enough. ・If you want to distinguish between "Important," "Supplementary," and "Temporary Pointer" in a presentation using different colors or line styles, or if you want to highlight multiple areas simultaneously, the Pro version's multiple settings and simultaneous drawing are recommended. ・If your team wants to standardize colors or key bindings, using the export and import features in the Pro version settings makes management easier. 【📝 Summary】 ・Screen Marker is a Chrome extension that allows you to draw markers on the screen using modifier keys and dragging. ・It is helpful for situations where you want to draw attention to something on the screen, such as during presentations, education, demos, internal explanations, or reviews. 📌 Version Comparison: ・Free Version: Basic features and key assignment customization. ・Pro Version: Multiple settings, simultaneous drawing, full style reflection, setting migration, and more. 👣 Recommended Getting Started: ・A natural flow is to first test the basic functionality with the free version and then consider Pro when team use or visual consistency becomes necessary. 🔧 Troubleshooting: ・If the behavior changes after a Chrome or OS update, please try by reloading the extension or rechecking your key assignments.