{"product_id":"trace-screenshot-annotator-screen-recorder","title":"Trace - Screenshot, Annotator \u0026 Screen Recorder","description":"\u003cp style=\"text-align: center; margin-top: 16px; margin-bottom: 24px;\"\u003e\n  \u003ca href=\"https:\/\/demo.projetostack.com\/extensions\/trace\" _blank style=\"display: inline-block; background-color: #0A0A0A; color: #FFFFFF; font-weight: bold; text-decoration: none; padding: 12px 24px; border-radius: 4px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px;\"\u003e\n    Live Demo ↗\n  \u003c\/a\u003e\n\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eCapture webpages, annotate screenshots, and record the current browser tab from one modern extension.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003eTrace is a React and TypeScript screenshot tool with visible-area, region and full-page capture, annotation tools, PNG downloads and WebM tab recording. It provides a complete source-code foundation for feedback tools, design utilities, QA workflows and client extension projects.\u003c\/p\u003e\n\u003ch2\u003ePerfect For\u003c\/h2\u003e\n\u003cp\u003e✓ Web Designers\u003c\/p\u003e\n\u003cp\u003e✓ UI \u0026amp; UX Designers\u003c\/p\u003e\n\u003cp\u003e✓ Frontend Developers\u003c\/p\u003e\n\u003cp\u003e✓ QA Testers\u003c\/p\u003e\n\u003cp\u003e✓ Software Teams\u003c\/p\u003e\n\u003cp\u003e✓ Technical Support Teams\u003c\/p\u003e\n\u003cp\u003e✓ Content Creators\u003c\/p\u003e\n\u003cp\u003e✓ Website Auditing Tools\u003c\/p\u003e\n\u003cp\u003e✓ Browser Productivity Products\u003c\/p\u003e\n\u003cp\u003e✓ Agency Client Projects\u003c\/p\u003e\n\u003ch2\u003eWhy Choose Trace?\u003c\/h2\u003e\n\u003cp\u003e✓ Capture the visible browser area\u003c\/p\u003e\n\u003cp\u003e✓ Select and capture custom webpage regions\u003c\/p\u003e\n\u003cp\u003e✓ Create full-page screenshots\u003c\/p\u003e\n\u003cp\u003e✓ Annotate screenshots inside a dedicated editor\u003c\/p\u003e\n\u003cp\u003e✓ Add pen, rectangle, arrow and text annotations\u003c\/p\u003e\n\u003cp\u003e✓ Highlight important webpage areas\u003c\/p\u003e\n\u003cp\u003e✓ Blur sensitive screenshot regions\u003c\/p\u003e\n\u003cp\u003e✓ Adjust annotation colours and stroke width\u003c\/p\u003e\n\u003cp\u003e✓ Download completed screenshots as PNG files\u003c\/p\u003e\n\u003cp\u003e✓ Record the current browser tab as WebM\u003c\/p\u003e\n\u003cp\u003e✓ Process captures locally inside the browser\u003c\/p\u003e\n\u003cp\u003e✓ Complete editable source code\u003c\/p\u003e\n\u003cp\u003e✓ Easy to customise and extend\u003c\/p\u003e\n\u003cp\u003e✓ No recurring subscription fees\u003c\/p\u003e\n\u003ch2\u003eWhat’s Included\u003c\/h2\u003e\n\u003cp\u003eYour download includes:\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Complete React \u0026amp; TypeScript Source Code\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Chrome Manifest V3 Production Build\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Screenshot Capture Popup\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Dedicated Annotation Editor\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Visible-Area Capture\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Region-Selection Capture\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Full-Page Capture\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Screenshot Stitching System\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Current-Tab Recording\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 WebM Recording Export\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Recording Status Badge\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Recording Notifications\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Pen Annotation Tool\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Rectangle Annotation Tool\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Arrow Annotation Tool\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Highlight Annotation Tool\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Text Annotation Tool\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Blur Annotation Tool\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Annotation Colour Controls\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Adjustable Stroke Width\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Undo Action\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Clear Annotations Action\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Discard Capture Action\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 PNG Download\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Temporary Capture Storage\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Background Service Worker\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Runtime Content Script\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Offscreen Recording Page\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Extension Icons \u0026amp; Assets\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 WXT Configuration\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 TypeScript Configuration\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Package Configuration\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📄 Documentation (README.md)\u003c\/strong\u003e\u003c\/p\u003e\n\u003ch2\u003eKey Features\u003c\/h2\u003e\n\u003cp\u003e✓ Visible Browser-Area Capture\u003c\/p\u003e\n\u003cp\u003e✓ Custom Region Capture\u003c\/p\u003e\n\u003cp\u003e✓ Full-Page Screenshot Capture\u003c\/p\u003e\n\u003cp\u003e✓ Automatic Page Scrolling\u003c\/p\u003e\n\u003cp\u003e✓ Vertical Screenshot Stitching\u003c\/p\u003e\n\u003cp\u003e✓ Original Scroll-Position Restoration\u003c\/p\u003e\n\u003cp\u003e✓ Dedicated Screenshot Editor\u003c\/p\u003e\n\u003cp\u003e✓ Freehand Drawing\u003c\/p\u003e\n\u003cp\u003e✓ Rectangle Outlines\u003c\/p\u003e\n\u003cp\u003e✓ Arrow Annotations\u003c\/p\u003e\n\u003cp\u003e✓ Highlighted Areas\u003c\/p\u003e\n\u003cp\u003e✓ Text Annotations\u003c\/p\u003e\n\u003cp\u003e✓ Pixelated Blur Areas\u003c\/p\u003e\n\u003cp\u003e✓ Six Annotation Colours\u003c\/p\u003e\n\u003cp\u003e✓ Adjustable Stroke Width\u003c\/p\u003e\n\u003cp\u003e✓ Undo Annotation Changes\u003c\/p\u003e\n\u003cp\u003e✓ Clear All Annotations\u003c\/p\u003e\n\u003cp\u003e✓ Discard Stored Capture\u003c\/p\u003e\n\u003cp\u003e✓ PNG Image Download\u003c\/p\u003e\n\u003cp\u003e✓ Page Title Display\u003c\/p\u003e\n\u003cp\u003e✓ Reliable Screenshot Retry System\u003c\/p\u003e\n\u003cp\u003e✓ PNG Capture\u003c\/p\u003e\n\u003cp\u003e✓ JPEG Capture Fallback\u003c\/p\u003e\n\u003cp\u003e✓ Current Tab Video Recording\u003c\/p\u003e\n\u003cp\u003e✓ WebM Video Export\u003c\/p\u003e\n\u003cp\u003e✓ Automatic Recording Filenames\u003c\/p\u003e\n\u003cp\u003e✓ Recording Status Badge\u003c\/p\u003e\n\u003cp\u003e✓ Recording Completion Notifications\u003c\/p\u003e\n\u003cp\u003e✓ Local Browser Processing\u003c\/p\u003e\n\u003ch2\u003eTechnology Stack\u003c\/h2\u003e\n\u003cp\u003eBuilt using modern browser-extension technologies:\u003c\/p\u003e\n\u003cp\u003e✓ React 19\u003c\/p\u003e\n\u003cp\u003e✓ TypeScript\u003c\/p\u003e\n\u003cp\u003e✓ WXT\u003c\/p\u003e\n\u003cp\u003e✓ Manifest V3\u003c\/p\u003e\n\u003cp\u003e✓ Canvas API\u003c\/p\u003e\n\u003cp\u003e✓ OffscreenCanvas\u003c\/p\u003e\n\u003cp\u003e✓ Browser Tabs API\u003c\/p\u003e\n\u003cp\u003e✓ Browser Scripting API\u003c\/p\u003e\n\u003cp\u003e✓ Browser Storage API\u003c\/p\u003e\n\u003cp\u003e✓ Browser Downloads API\u003c\/p\u003e\n\u003cp\u003e✓ Browser Notifications API\u003c\/p\u003e\n\u003cp\u003e✓ Chrome Tab Capture API\u003c\/p\u003e\n\u003cp\u003e✓ Chrome Offscreen Document API\u003c\/p\u003e\n\u003cp\u003e✓ MediaRecorder API\u003c\/p\u003e\n\u003cp\u003e✓ Shadow Page Content Overlay\u003c\/p\u003e\n\u003cp\u003e✓ Component-Based Architecture\u003c\/p\u003e\n\u003cp\u003e✓ Modern CSS\u003c\/p\u003e\n\u003cp\u003e✓ Modern Folder Structure\u003c\/p\u003e\n\u003ch2\u003ePerformance Features\u003c\/h2\u003e\n\u003cp\u003eDesigned for responsive screenshot workflows:\u003c\/p\u003e\n\u003cp\u003e✓ Local Screenshot Processing\u003c\/p\u003e\n\u003cp\u003e✓ No External Image-Processing Server\u003c\/p\u003e\n\u003cp\u003e✓ Reliable Capture Retry System\u003c\/p\u003e\n\u003cp\u003e✓ JPEG Fallback for Capture Errors\u003c\/p\u003e\n\u003cp\u003e✓ Device-Pixel-Aware Region Cropping\u003c\/p\u003e\n\u003cp\u003e✓ Client-Side Image Stitching\u003c\/p\u003e\n\u003cp\u003e✓ Overlap-Based Full-Page Assembly\u003c\/p\u003e\n\u003cp\u003e✓ Maximum Full-Page Capture Guard\u003c\/p\u003e\n\u003cp\u003e✓ Temporary Local Capture Storage\u003c\/p\u003e\n\u003cp\u003e✓ Local Annotation Rendering\u003c\/p\u003e\n\u003cp\u003e✓ Local WebM Recording\u003c\/p\u003e\n\u003cp\u003e✓ Automatic Unique Filenames\u003c\/p\u003e\n\u003cp\u003e✓ Reusable React Components\u003c\/p\u003e\n\u003cp\u003e✓ Clean TypeScript Implementation\u003c\/p\u003e\n\u003cp\u003e✓ Modern Manifest V3 Architecture\u003c\/p\u003e\n\u003cp\u003e✓ Easy Branding Customisation\u003c\/p\u003e\n\u003cp\u003e✓ Scalable Source-Code Structure\u003c\/p\u003e\n\u003ch2\u003eHow It Works\u003c\/h2\u003e\n\u003col\u003e\n\u003cli\u003eDownload and extract the project files.\u003c\/li\u003e\n\u003cli\u003eInstall the project dependencies.\u003c\/li\u003e\n\u003cli\u003eRun the development environment or generate a production build.\u003c\/li\u003e\n\u003cli\u003eLoad the generated Chrome extension folder into your browser.\u003c\/li\u003e\n\u003cli\u003eOpen the webpage you want to capture.\u003c\/li\u003e\n\u003cli\u003eOpen Trace from the browser toolbar.\u003c\/li\u003e\n\u003cli\u003eChoose Visible Area, Select Region or Full Page.\u003c\/li\u003e\n\u003cli\u003eAdd annotations inside the dedicated editor.\u003c\/li\u003e\n\u003cli\u003eAdjust the annotation colour and stroke size.\u003c\/li\u003e\n\u003cli\u003eDownload the completed screenshot as a PNG file.\u003c\/li\u003e\n\u003cli\u003eChoose Record This Tab to start a WebM screen recording.\u003c\/li\u003e\n\u003cli\u003eOpen Trace again and select Stop \u0026amp; Save Recording.\u003c\/li\u003e\n\u003cli\u003eCustomise the branding, tools, colours, icons and functionality.\u003c\/li\u003e\n\u003cli\u003eBuild and publish the completed extension when ready.\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch2\u003eBrowser Compatibility\u003c\/h2\u003e\n\u003cp\u003eVerified for:\u003c\/p\u003e\n\u003cp\u003e✓ Google Chrome\u003c\/p\u003e\n\u003cp\u003eCompatibility may be possible after testing with:\u003c\/p\u003e\n\u003cp\u003e✓ Microsoft Edge\u003c\/p\u003e\n\u003cp\u003e✓ Brave\u003c\/p\u003e\n\u003cp\u003e✓ Opera\u003c\/p\u003e\n\u003cp\u003eFirefox and Safari compatibility are not included or verified in the uploaded package.\u003c\/p\u003e\n\u003ch2\u003eLicense\u003c\/h2\u003e\n\u003cp\u003eYour purchase includes:\u003c\/p\u003e\n\u003cp\u003e✓ Lifetime access to the purchased source code\u003c\/p\u003e\n\u003cp\u003e✓ Commercial use for personal and client projects\u003c\/p\u003e\n\u003cp\u003e✓ Full customisation rights\u003c\/p\u003e\n\u003cp\u003e✓ Unlimited personal and client projects\u003c\/p\u003e\n\u003cp\u003eYou may not:\u003c\/p\u003e\n\u003cp\u003e✗ Resell the original source code\u003c\/p\u003e\n\u003cp\u003e✗ Redistribute the files\u003c\/p\u003e\n\u003cp\u003e✗ Share the files publicly\u003c\/p\u003e\n\u003cp\u003e✗ Repackage the source code as a competing digital product for resale\u003c\/p\u003e\n\u003ch2\u003eInstant Digital Download\u003c\/h2\u003e\n\u003cp\u003eNo physical product will be shipped.\u003c\/p\u003e\n\u003cp\u003eImmediately after purchase, you’ll receive access to download the complete screenshot and annotation source code, Chrome production build and documentation so you can begin creating your own browser capture tool.\u003c\/p\u003e\n\u003ch2\u003eImportant Note\u003c\/h2\u003e\n\u003cp\u003e\u003cem\u003eTrace captures and processes screenshots locally inside the browser.\u003c\/em\u003e\u003c\/p\u003e\n\u003cp\u003eFull-page capture works by scrolling through the webpage and stitching multiple visible screenshots together. Results may vary on pages containing:\u003c\/p\u003e\n\u003cp\u003e✗ Sticky or Fixed Elements\u003c\/p\u003e\n\u003cp\u003e✗ Infinite Scrolling\u003c\/p\u003e\n\u003cp\u003e✗ Lazy-Loaded Content\u003c\/p\u003e\n\u003cp\u003e✗ Scroll-Based Animations\u003c\/p\u003e\n\u003cp\u003e✗ Embedded Cross-Origin Frames\u003c\/p\u003e\n\u003cp\u003e✗ Extremely Long Pages\u003c\/p\u003e\n\u003cp\u003e\u003cem\u003eThe full-page process is limited to a maximum of 60 captured sections.\u003c\/em\u003e\u003c\/p\u003e\n\u003cp\u003eTab recording:\u003c\/p\u003e\n\u003cp\u003e✓ Records the current browser tab as WebM video\u003c\/p\u003e\n\u003cp\u003e✗ Does Not Record Microphone Audio\u003c\/p\u003e\n\u003cp\u003e✗ Does Not Record Tab Audio\u003c\/p\u003e\n\u003cp\u003e✗ Does Not Record a Webcam\u003c\/p\u003e\n\u003cp\u003e✗ Does Not Export MP4 Video\u003c\/p\u003e\n\u003cp\u003e\u003cem\u003eTrace may not operate on restricted browser pages such as browser settings, extension marketplaces, internal browser URLs and some built-in document viewers.\u003c\/em\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003ePROJETO STACK - Premium software templates and digital products built for modern businesses.\u003c\/strong\u003e\u003c\/p\u003e","brand":"PROJETO STACK","offers":[{"title":"Default Title","offer_id":65440655343965,"sku":null,"price":19.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1089\/3633\/1613\/files\/D37FBCB3-F20C-4411-BABD-043F0956480E.png?v=1786284818","url":"https:\/\/projetostack.com\/products\/trace-screenshot-annotator-screen-recorder","provider":"PROJETO STACK","version":"1.0","type":"link"}