Screen Marker

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

For those opening the store 👋 This extension allows you to draw boxes on the screen with only keyboard operations. We have summarized the key points by headings below. 【📋 Quick Reference】 ・✏️ Draw Marker: Press and hold the modifier key while dragging → Draws a rectangular marker on the screen. ・🧹 Erase Marker: Clear by tapping the set modifier key within approx. 0.5 seconds. ・🆓 Free Version: 1 settings tab, 1 simultaneous marker, drawing appearance is default style (key customizable). ・⭐ Pro Version: 3 settings tabs, multiple simultaneous drawings, own styles reflected in drawing, export/import settings. ・⚙️ Settings: From the extension icon's popup. Help and language switching are available from the dedicated page. ・⚠️ Note: May not function depending on the website or display method. Treat confidential screens according to internal rules. 【✨ What this extension can do】 ・🖥️ Screen Marker is a Chrome extension that allows you to draw rectangular markers on the webpage you are viewing just by dragging the mouse while holding down a modifier key. ・It displays directly overlaid on the browser's display area. 💼 Examples of Uses: ・📸 Temporarily marking areas before taking a screenshot ・💬 Pointing out sections you want to highlight during online meetings or classes ・🎬 Surrounding the area you want others to focus on during an operational demo 💡 Other Points: ・Drawn markers remain on the page and are visible until the page is reloaded. ・There is a minimum size requirement to reduce accidental markings (e.g., very small drags may not draw a rectangle). ・You can manage settings such as color, key, and behavior from the extension icon's pop-up menu. ・Help and upgrade guides can be referenced from pages within the same extension package. ・By default, markers are tied to the display of "that tab." If you switch between multiple tabs, it is recommended to establish a workflow, such as taking a screenshot or note before closing the tab, to ensure everything is captured. 【🖱️ Basic Usage】 ✏️ Drawing: ・Drag while holding down all the modifier keys set in the pop-up. ・The default is holding down both the left Shift and left Ctrl keys (can be changed within the product). 🧹 Keys and Clearing: ・You can assign different modifier key combinations for each setting, allowing you to use them according to the task. ・To clear drawn markers in bulk, press and release the set modifier keys within about 0.5 seconds. ⚠️ Caution: ・Depending on your keyboard and OS, some modifier keys, including left/right distinctions, may not be detected as expected. ・We recommend testing in your own environment to ensure there are no conflicts with other shortcuts before adopting them. 🆓 Free Version and ⭐ Pro Version: ・Free Version: Primarily supports markers associated with Setting 1. ・Pro Version: Can handle markers linked to multiple settings. ・If you want to keep markers for a long time, you can adjust the fade-out time and automatic fading behavior in the style settings. 【🎨 Marker Appearance and Style】 🛠️ Examples of adjustable items: ・Fill color・Opacity ・Border color・Opacity・Thickness ・Corner rounding ・Line type (solid, double, wavy, dashed, etc.) ⏱️ Other options: ・Fade out (fades after a certain time) ・Drawing indicator display ・Follow scrolling or not ・Activate only on specific URL patterns ✨ Styling Tips: ・For high visibility: Yellow fill and dark borders. ・For calm explanations: Pastel tones with increased opacity. ・For colorblind friendly or projection environments: Try combinations of high-contrast line colors and moderate fill opacity. 🆓⭐ Difference 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 may not match). ・Pro Version: Saved styles are directly reflected in the drawing. ・Even in the Free Version, you can change key assignments and flexibly set which key combination triggers drawing. 【⚙️ Settings Tab and Key Assignments】 ・Pro Version: Three setting tabs (1, 2, and 3). Each can be assigned a different modifier key and style. ・Free Version: Only Setting 1. 🎭 Example of Role Separation (Pro): ・Setting 1: Highlighting important areas ・Setting 2: Thin box for supplementary explanations ・Setting 3: For temporary pointing 📚 Simultaneous Drawing: ・Pro Version: Can keep multiple markers displayed on the screen at once. ・Free Version: Limited to one at a time. New rectangles cannot be added while a marker already exists. This will require clearing between sections or considering Pro. ・For default key assignments, please follow the instructions within the product, and it may be advisable to move one of the assignments to a different modifier key if a conflict occurs. 【💎 Differences between Free and Pro Version】 🆓 Free Version: ・Use basic screen marker without payment. ⭐ Pro Version: ・Via subscription or lifetime purchase through Stripe. Valid only when license verification is successful. 📊 Main Differences: ・Number of settings tabs (Free: 1 / Pro: 3) ・Number of simultaneous drawings (Free: 1 / Pro: Multiple) ・Whether styles are reflected in the drawing (Free: Default / Pro: As saved) ・Export/import of settings (Pro only) ・Priority support (Assumed for Pro) 🌐 Connection Notes: ・License verification is done over the network. In offline or strict proxy environments, Pro may temporarily be unavailable. Please consider improving your connection or trying again after some time. 📝 Labeling: ・Please follow the upgrade screen and store listing for prices and plan names. ・We recommend avoiding exaggeration and matching the in-app description to align with review guidelines. ・Refunds and cancellations are subject to the terms of the payment platform and the store. 【📤 Export and Import】 ・Pro Version only: Export settings to a file and import them in a different environment or for backup purposes. ・Free Version: Not available. 🤝 Useful Scenarios: ・When you want to share the same appearance or key bindings within a team ・When you want to transfer settings when switching devices ・When you want to revert settings after testing changes ・Please handle export files according to your organization's security policy. 【📖 Help • Onboarding • Multi-language】 ・The Help, initial guide, and pop-up settings UI supports multiple languages through Chrome extension's internationalization messages. ・The displayed language can be switched from settings. ・The text, key names, and formats for dates or units may vary depending on the locale. ・First-time users will understand faster by following the onboarding flow and trying out the main functions. 【🔒 Privacy and Data】 ・The marker is overlaid on the currently viewed page as a DOM element (it does not write over or save the page body). ・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 users by default. ・For sign-in or subscription confirmation, the minimum necessary information may be exchanged with the server. ・Please judge the use of this marker on confidential screens according to your organization's information security policy. ・Please also note that the marker may appear when screen sharing or recording. 【💳 License, Billing, and Support】 ・Billing follows the instructions of the Chrome Web Store. ・License status is confirmed by server-side verification and cache. ・During network failures, there may be retries, or notifications/dialogs depending on the situation. ・For Pro users, please follow the instructions available at the time of viewing for contact points and SLAs. ・When linking accounts or changing email addresses, please follow the instructions within the product to ensure the license is transferred correctly. 【🎯 Potential Use Cases】 ・Circling key points on slides or demo screens during presentations ・Indicating relevant parts of educational materials during online classes or training ・Sequentially marking points of focus during support or sales demos ・Pointing out UI locations during internal tool explanations ・Outlining areas requiring revisions during design reviews ・Highlighting code ranges during remote pair programming ✅ Advantages: ・It is often possible to complete the action within the browser itself, without needing to launch a separate drawing application. 📺 Notes: ・For video streaming or live broadcasts, it is advisable to check in advance to ensure stable display when combined with the specifications of the streaming tool. 【⚠️ Notes and Limitations】 🧩 How it works: ・It overlays a layer on top of the webpage display. Examples where behavior may change depending on the site: ・Security headers or Content Security Policy ・Display only within an iframe ・Shadow DOM Examples where it may not work or behave unexpectedly: ・Games or full-screen video displays ・Special embedded pages ・PDF viewers or proprietary viewers 🖥️ Environment: ・Discrepancies in handling coordinates and scaling may occur on multiple monitors or high-resolution displays. 🤝 Compliance: ・Please do not use this in ways that violate 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 in-product description. 💬 Bugs/Requests: ・If there is a specified contact method, using that may result in a faster response than leaving a review. 【💡 Introduction and Usage Tips】 🚀 Right after installation: ・Test on representative sites such as company portals, learning management systems, video sites, and document tools. ・Check if the assigned keys 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 templates or to document recommended keys. ♿ Accessibility: ・To make it easier to convey information even in projection environments, utilize the Pro's styles to differentiate not only by color but also by line thickness, double lines, and dashed lines. 📋 Logs: ・Enabling logs makes it easier to report situations during troubleshooting, but please be careful with handling cases where URLs or screen information are included. 🔄 Updates: ・When there is a version update, checking the release notes or in-app announcements for behavior changes or new options will make it easier to update the manual. 🔧 Use with other tools: ・If using with another screen annotation tool, be mindful of overlapping shortcuts or overlays, and it is best for stable operation to assign roles to one tool. 【🖥️ Interaction with the Screen】 ・The marker is drawn over the visible area of the currently viewed tab. The main target is the webpage area below the address bar, and it will not overlap with the browser's UI itself. ・When scrolling vertically through the page, 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 it appears in an unnatural position, please clear it once and redraw it. ・When used with split-screen or picture-in-picture, the appearance will change depending on which frame is "that tab." When streaming or recording, please check for any discrepancies between the viewer's screen and your screen. ・On special pages that only display within an iframe of the same origin, whether the overlay is placed on the parent page or the child frame depends on the page structure. If the result is not as expected, reopening it in full-page view or a separate tab may improve it. 【🤝 Guidelines for Choosing Between Free and Pro Versions】 ・If you only need basic highlighting for short demos or personal use, the free version is often sufficient with just one type of emphasis. ・If you want to differentiate between "Important," "Supplementary," or "Temporary Pointer" during a presentation using different colors or line types, or if you need to draw on multiple areas simultaneously, the Pro version's multiple settings and simultaneous drawing are recommended. ・If you need to keep the same colors or keybindings consistent across a team, using the export and import functions in the Pro version settings makes management easier. 【📝 Summary】 ・Screen Marker is a Chrome extension that allows you to draw markers on your screen using modifier keys and drag. ・It is useful for situations where you want to draw attention to something on the screen, such as presentations, education, demos, internal briefings, and reviews. 📌 Version Comparison: ・Free Version: Basic features and key assignment customization. ・Pro Version: Multiple settings, simultaneous drawing, full style reflection, setting migration, etc. 👣 Recommended Getting Started: ・It is natural to first test the feel with the free version and then consider Pro when team usage or visual consistency becomes necessary. 🔧 Troubleshooting: ・If the behavior changes after a Chrome or OS update, please try reloading the extension or reconfirming key assignments.