Skip to content

feat(ui): add session-based screenshot panel with thumbnails#87

Open
MadhuTiwari-345 wants to merge 10 commits intoHarshYadav152:mainfrom
MadhuTiwari-345:feature/screenshot-panel
Open

feat(ui): add session-based screenshot panel with thumbnails#87
MadhuTiwari-345 wants to merge 10 commits intoHarshYadav152:mainfrom
MadhuTiwari-345:feature/screenshot-panel

Conversation

@MadhuTiwari-345
Copy link

Description

This PR adds a session-based screenshot panel that enhances how users manage and access screenshots during a single browsing session.

It introduces a lightweight, collapsible UI panel that displays thumbnails of all screenshots captured in the current session. Each thumbnail allows users to quickly preview or download the screenshot without leaving the extension workflow.

Type of Change

  • New feature

What this PR does

  • Adds a collapsible panel listing screenshots captured in the current session
  • Stores screenshots in session-scoped memory (no persistent storage or backend dependency)
  • Displays thumbnail previews for quick visual identification
  • Enables click-to-download functionality for each screenshot
  • Ensures the panel is responsive, lightweight, and unobtrusive
  • Includes unit tests and E2E tests to validate session storage and UI behavior

Why this change is needed

  • Quick Access: Users can instantly view recently captured screenshots without navigating file directories
  • Avoid Redundancy: Prevents re-capturing the same screen multiple times
  • Improved Workflow: Especially useful for developers, designers, and QA testers who capture screenshots frequently
  • Better UX: Keeps screenshots accessible while remaining session-scoped and clutter-free

Implementation Details

  • Screenshots are stored as Blob objects in session-scoped memory
  • Thumbnails are rendered dynamically as screenshots are captured
  • Uses browser-native APIs for preview and download functionality
  • Integrates seamlessly with the existing screenshot capture flow without affecting performance

Testing

  • Manual testing completed
  • Unit tests added and passing
  • E2E tests added and passing
  • Tested on Chrome and Firefox builds

Checklist

  • Code follows project style guidelines
  • Self-review completed
  • Tests added/updated
  • No unnecessary files committed
  • Changelog updated

Related Issue

Closes #27

Screenshot 2026-01-07 185702 Screenshot 2026-01-07 185724 Screenshot 2026-01-07 185626

Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Thank you @MadhuTiwari-345 for your first PR to SS-Capture!

We really appreciate your contribution 🙌

What happens next:

  • 🔍 Maintainers will review your PR
  • 🧪 Automated checks will run
  • ✨ Feedback may be shared if needed

Please confirm your PR includes:

  • ✔️ Clear summary of changes
  • ✔️ Linked issue (e.g., Fixes #123)
  • ✔️ Steps to test
  • ✔️ Screenshots (for UI changes)

📘 Contribution Standards:
👉 https://github.com/HarshYadav152/ss-capture/blob/main/CONTRIBUTING.md


💬 Stay Connected with Our Community

🎯 Discord (Official Communication)
For formal discussions, code reviews, and project updates:
👉 https://discord.gg/eMTePUK3gJ

💚 WhatsApp (Friendly Community)
For informal chats, quick help, and building friendships with contributors:
👉 https://chat.whatsapp.com/I8GYXd3mHlDCC2iXhNGeqV

🌟 Our Philosophy: We value both professional collaboration (Discord) and personal connections (WhatsApp). Join both to get the complete SS-Capture community experience!


Thanks for helping improve SS-Capture 🚀
Let's build something amazing together! 💪

Copy link
Owner

@HarshYadav152 HarshYadav152 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Remove .gitignore from the root.
  2. Do not modified CHANGELOG.md file as it is auto modified by auto/changelog auto PR.
  3. Your recent commits break the previous functionality.
    • Also theme switching mode not working.
    • There are some issues in src/js/content.js .
    • Recheck your manifest.json at the src/.
  4. Keep you session related css, js files at inside a one folder inside src/css/ a session-history directory or whatever you prefered.
  5. And remove workflow you have been added ci.yml.

test your changes with all previous features/functionality.

and one most important thing keep your branch is up to date with upstream main.

@HarshYadav152 HarshYadav152 added the ECWoC26 Required for evaluation for ECWoC26 label Jan 9, 2026
@MadhuTiwari-345 MadhuTiwari-345 force-pushed the feature/screenshot-panel branch from 5771b86 to cf60742 Compare January 10, 2026 12:52
Copy link
Owner

@HarshYadav152 HarshYadav152 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. remove ss-capture/.github/workflows/ci.yml
  2. do not modified CHANGELOG.md

and there are some error in manifest file so extension will stuck in loading phase and never reaches captured ss.

@MadhuTiwari-345
Copy link
Author

Hi @HarshYadav152 ,
Thanks for the clarification 🙏

I’ve, Removed ss-capture/.github/workflows/ci.yml,
Reverted all CHANGELOG.md changes
Fixed manifest.json issues that caused the extension to get stuck in loading
The extension now loads correctly and reaches screenshot capture.
Kindly review again when convenient. Thanks!

@HarshYadav152
Copy link
Owner

@MadhuTiwari-345 Still have same problem it has been stuck while capturing screen shot and never reaches the end.

@HarshYadav152
Copy link
Owner

@MadhuTiwari-345 Complete it ASAP.

@MadhuTiwari-345
Copy link
Author

MadhuTiwari-345 commented Jan 14, 2026 via email

@HarshYadav152
Copy link
Owner

Sorry for the inconvenience I'm working on it right now By the evening it might be done. I'm sorry again

On Wed, Jan 14, 2026, 3:52 PM Harsh Yadav @.> wrote: HarshYadav152 left a comment (HarshYadav152/ss-capture#87) <#87 (comment)> @MadhuTiwari-345 https://github.com/MadhuTiwari-345 Complete it ASAP. — Reply to this email directly, view it on GitHub <#87 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/BONO2UF4TE4JG7WHFOWXRSL4GYKFNAVCNFSM6AAAAACQ6KL3UKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTONBYHAZDOOJVGU . You are receiving this because you were mentioned.Message ID: @.>

Be active nd responsive on your every PR.

@MadhuTiwari-345
Copy link
Author

Hi @HarshYadav152 I'm sorry, I'm still working on it. It has a lot of bugs
I'm fixing it please give me a little more time
Screenshot 2026-01-14 225551

Screenshot 2026-01-14 182346 s Screenshot 2026-01-14 180200 Screenshot 2026-01-14 175923

@HarshYadav152
Copy link
Owner

@MadhuTiwari-345 Alright take your time but stay responsive and active.

Copy link
Owner

@HarshYadav152 HarshYadav152 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the progress?
Also keep your branch with upstream main.

@MadhuTiwari-345
Copy link
Author

MadhuTiwari-345 commented Jan 17, 2026 via email

Copy link
Author

@MadhuTiwari-345 MadhuTiwari-345 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @HarshYadav152 Please check it out I have tested the extension it is working well It is capturing the image and we can save the screenshot by the option save screenshot & copy the image by copy the image option

Copy link
Owner

@HarshYadav152 HarshYadav152 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Current changes did something bad with opened tab
image
  1. When capturing ss it will give an error Failed to fetch html2canvas script: Failed to fetch

fix these and keep your branch updated with main

@MadhuTiwari-345
Copy link
Author

MadhuTiwari-345 commented Jan 20, 2026 via email

@HarshYadav152
Copy link
Owner

Is that done ?

@MadhuTiwari-345
Copy link
Author

MadhuTiwari-345 commented Jan 21, 2026 via email

@HarshYadav152
Copy link
Owner

hi its not done yet..actually I have an exam on 24 Jan can you give me 2
days?..Actually that day I didn't commit html2canvas script thats why the
error might be happening

On Wed, Jan 21, 2026, 7:28 PM Harsh Yadav @.***> wrote:

HarshYadav152 left a comment (#87)
#87 (comment)

Is that done ?


Reply to this email directly, view it on GitHub
#87 (comment),
or unsubscribe
https://github.com/notifications/unsubscribe-auth/BONO2UGLULCP2WJRO3JLLM34H6AZRAVCNFSM6AAAAACQ6KL3UKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTONZYGI3TINJQGI
.
You are receiving this because you were mentioned.Message ID:
@.***>

Alright.
But be responsive

@HarshYadav152
Copy link
Owner

hi its not done yet..actually I have an exam on 24 Jan can you give me 2
days?..Actually that day I didn't commit html2canvas script thats why the
error might be happening

On Wed, Jan 21, 2026, 7:28 PM Harsh Yadav @.***> wrote:

HarshYadav152 left a comment (#87)
#87 (comment)

Is that done ?


Reply to this email directly, view it on GitHub
#87 (comment),
or unsubscribe
https://github.com/notifications/unsubscribe-auth/BONO2UGLULCP2WJRO3JLLM34H6AZRAVCNFSM6AAAAACQ6KL3UKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTONZYGI3TINJQGI
.
You are receiving this because you were mentioned.Message ID:
@.***>

Alright.
But be responsive

@MadhuTiwari-345
Copy link
Author

MadhuTiwari-345 commented Jan 21, 2026 via email

@MadhuTiwari-345
Copy link
Author

Hi @HarshYadav152, Please Check it out
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ECWoC26 Required for evaluation for ECWoC26

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

Comments