• On screenshot capture, a new page (extension page - chrome-entension://...) should be opened showing the captured screenshot
• Establish message passing between content script and extension page - to send screenshot image data. This might be useful - https://developer.chrome.com/docs/extensions/reference/extension
• The basic layout of page looks something like this - individual features later

https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/

https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/

• Collapsible toolbox at top right to avoid obstruction of page view
• Should be collapsed or display = none during screenshot capture

Backend

• Choose a disk location to store all images in folder - constant for now, might give user option to choose later
• Chrome extension file system apis - appropriate permissions
• Create folder, Write to folder, Rename folder, List folders
• A utility to handle all these file system interactions
• Links: https://developer.chrome.com/docs/extensions/reference/fileSystem/

UI

• Extension page header contains a 'save to collection' sort of a button, similar to youtube save playlist
• On clicking, opens a modal to either add to existing project or create new one

Also, what could be a cool name for 'projects/folders' in this context? 🤔
Boards? Maybe not... too JIRA-ish 😂

• Use the cursor to select areas, scroll page, click on links while preserving drawings
• Links might only work in same domain

• Add colour palette, thickness adjustment for pen
• Thickness adjustment for eraser
• Clear all button

Select area to add text OR just click anywhere to start typing - either way works

• Colour selection
• Font and size selection good to have

• Save image metadata with screenshots - URL, size, created at etc.
• What is the best way to store such file metadata locally? (hidden files/database?)
• Useful for searching capabilities in UI later