binect-chrome/RECENT_CHANGES.md

Recent Changes - BinectChrome

Summary

Three new features have been implemented:

1. ✅ Password visibility toggle with eye icon
2. ✅ Default badge on extension icon
3. ✅ Enhanced API error logging for debugging

1. Password Visibility Toggle

Location: Login form in popup

What it does:

• Adds an eye icon button next to the password field
• Click to toggle between showing and hiding password
• Icon changes: 👁️ (show) ↔ 🚫👁️ (hide)

Files changed:

• src/popup/popup.html - Added password wrapper and eye icon SVGs
• src/popup/popup.css - Styled the toggle button
• src/popup/popup.ts - Added toggle functionality

How to use:

1. Open the extension popup
2. Enter username
3. Start typing password
4. Click the eye icon to reveal/hide password

2. Default Badge on Extension Icon

What it does:

• Extension icon now always shows a blue dot (•) badge
• Badge changes to "1" when PDF is detected
• Badge resets to dot (•) after PDF is sent or cleared
• Makes extension more visible in the toolbar

Files changed:

• src/background/service-worker.ts - Added initializeBadge() function

Badge states:

• • (blue dot) - Extension active, no PDF detected
• 1 (blue) - PDF detected and ready to send
• Returns to • after sending or clearing

Visual:

• Before: No badge (extension hard to notice)
• Now: Blue dot always visible (easy to spot in toolbar)

3. Enhanced API Error Logging

What it does:

• Detailed console logging for all Binect API calls
• Shows request details (URL, username, payload)
• Logs response status and headers
• Captures and displays error responses
• Better error messages for common issues

Files changed:

• src/utils/binect-api.ts - Added console logging throughout

Console output example (authentication):

[Binect API] Authenticating with Binect API...
[Binect API] URL: https://api.binect.de/auth/login
[Binect API] Username: testuser
[Binect API] Response status: 200
[Binect API] Response content-type: application/json
[Binect API] Authentication successful!
[Binect API] Response data: {token: "...", expiresAt: "..."}

Console output example (error):

[Binect API] Authenticating with Binect API...
[Binect API] URL: https://api.binect.de/auth/login
[Binect API] Username: wronguser
[Binect API] Response status: 401
[Binect API] Error response body: {"error": "Invalid credentials"}
[Binect API] Authentication error: BinectAPIError: Invalid credentials

Error improvements:

• Network errors now show: "Cannot reach Binect API at https://api.binect.de. Please check your internet connection."
• Auth errors show: "Invalid credentials" (401)
• Upload errors show specific issue (file format, size limit, etc.)

How to Test

1. Reload Extension

# Extension is already built
# Just reload at chrome://extensions/

2. Test Password Toggle

1. Click extension icon
2. If not logged in, you'll see the login form
3. Type in the password field
4. Click the eye icon - password should become visible
5. Click again - password should hide

3. Test Default Badge

1. Look at your Chrome toolbar
2. Find the BinectChrome icon
3. Should see a small blue dot (•) badge
4. Download or view a PDF
5. Badge should change to "1"

4. Test API Error Logging

1. Right-click popup → "Inspect" (opens DevTools)
2. Go to Console tab
3. Try to sign in (with wrong or correct credentials)
4. Watch for [Binect API] log messages
5. All API calls are now logged with details

Debugging Binect API Login Issues

With the new logging, you can now:

1. See the exact error from Binect:

   • Open popup DevTools (right-click → Inspect)
   • Try to sign in
   • Check console for [Binect API] Error response body:
   • This shows what the Binect API actually returned

2. Verify the request is correct:

   • Console shows the URL being called
   • Shows the username being sent
   • Confirms request format

3. Check network connectivity:

   • If you see "Cannot reach Binect API", it's a network issue
   • If you see status codes (401, 400, etc.), the API is reachable but rejecting the request

Common login issues:

Console Log	Problem	Solution
"Cannot reach Binect API"	Network issue	Check internet connection
"Response status: 401" + "Invalid credentials"	Wrong username/password	Verify credentials
"Response status: 404"	API endpoint changed	Check API_BASE_URL in code
"Response status: 500"	Server error	Check Binect API status
"TypeError: Failed to fetch"	CORS or network	Check browser permissions

Testing Checklist

• Extension icon shows blue dot badge
• Password field has eye icon
• Clicking eye icon toggles password visibility
• Console shows [Binect API] logs when signing in
• Error messages are clear and helpful
• Badge updates when PDF detected
• Badge resets after sending PDF

Next Steps for API Debugging

1. Try to sign in with your Binect credentials
2. Open popup DevTools (right-click popup → Inspect)
3. Check the Console tab for [Binect API] messages
4. Share the console output if login fails

The detailed logs will show exactly what's happening with the API request and response, making it much easier to diagnose the login problem.

Files Modified

src/popup/popup.html          - Added password toggle UI
src/popup/popup.css           - Styled password toggle
src/popup/popup.ts            - Added toggle functionality
src/background/service-worker.ts - Added default badge
src/utils/binect-api.ts       - Enhanced error logging

Build Info

• Build completed successfully
• Extension size: ~17KB (popup.js: 10.4KB, background.js: 4.18KB)
• All assets compiled and minified
• Ready for testing!