Install Extension
Chrome Extension installation and initial setup guide
Table of Contents
Install from Chrome Web Store
- Search for QA Note in the Chrome Web Store.
- Click the Add to Chrome button to install.
- The QA Note icon will appear in your browser toolbar.
Login
The Extension supports email/password login and Google OAuth login.
- Click the QA Note icon in the toolbar.
- Click the Login button to open the login popup.
- Log in with your email/password or Google account.
- Once login is complete, the popup will close automatically and the Extension will be connected.
Data Collection Consent
After your first login, a Data Collection Consent screen will be displayed. If you agree, technical metadata collection features like console logs and network requests will be enabled.
During this process, Chrome will request the <all_urls> permission. Granting it allows you to use all QA Note features on every site. Basic screenshot capture works even if you decline.
Select Organization & Project
After logging in, from the Extension popup:
- Select your Organization (if you belong to multiple).
- Select a Project.
- Issues will be submitted to the selected project.
Capture Trigger Methods
The Extension offers three ways to start a capture:
- Popup Button — Click the toolbar icon, then select the capture button
- Keyboard Shortcut —
Cmd+Shift+X(Mac) /Ctrl+Shift+X(Windows) - Context Menu — Right-click on the page and select the QA Note menu
You can also enable a Floating Button or Side Tab that appears on the page from the project settings.
Key Features
- Screenshot Capture — Drag to select an area and capture it. Up to 5 screenshots can be attached.
- Annotation — 10 tools available: arrow, box, circle, text, number marker, pen, highlight, blur, and crop.
- Session Replay — Supports manual recording (up to 60 seconds) and Instant Replay (automatically buffers the last 2 minutes).
- Console Logs — Automatically collects
console.error,console.warn, andconsole.logoutput (last 100 entries). - Network Logs — Records HTTP requests/responses. Sensitive information (auth tokens, cookies, etc.) is automatically masked.
- React Component Tree — For React apps, automatically collects component hierarchy and props/state.
- Performance Metrics — Captures Web Vitals including LCP, FCP, CLS, INP, TTFB, and resource loading times.
- Element Style Inspection — Select specific DOM elements to attach CSS properties and layout information (up to 5 elements).