feat: chrome extension #1519
Open
feat: chrome extension #1519
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add settings panel with device memory toggle to web recorder interface - Support callbackUrl parameter in login form for post-auth redirects - Move AuthContextProvider to record layout for better auth state management - Improve permission request handling with fallback for denied devices - Show sign-in prompt when user is not authenticated on recorder page - Add settings button to recorder header with animated panel transition
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
apps/chrome-extension/README.md
Outdated
Comment on lines
86
to
94
| ## Permissions | ||
|
|
||
| The extension requires the following permissions: | ||
|
|
||
| - **`storage`**: Store authentication tokens and user preferences | ||
| - **`tabs`**: Access tab information for tab recording | ||
| - **`activeTab`**: Capture current tab content | ||
| - **`scripting`**: Inject content script for recording indicator | ||
| - **`offscreen`**: Create offscreen document for media capture |
Contributor
There was a problem hiding this comment.
logic: README lists permissions that aren't declared in manifest.json. The manifest only requests tabs, but this lists storage, activeTab, scripting, and offscreen. Either add these permissions to the manifest or update the README to match what's actually implemented.
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/chrome-extension/README.md
Line: 86:94
Comment:
**logic:** README lists permissions that aren't declared in `manifest.json`. The manifest only requests `tabs`, but this lists `storage`, `activeTab`, `scripting`, and `offscreen`. Either add these permissions to the manifest or update the README to match what's actually implemented.
How can I resolve this? If you propose a fix, please make it concise.
apps/chrome-extension/README.md
Outdated
Comment on lines
5
to
27
| ## Features | ||
|
|
||
| - **Multiple Recording Modes** | ||
| - Screen recording (entire screen or specific window) | ||
| - Tab recording (current browser tab) | ||
| - Camera recording (webcam only) | ||
|
|
||
| - **Recording Controls** | ||
| - Start/stop recording | ||
| - Pause/resume during recording | ||
| - Real-time recording timer | ||
| - On-page recording indicator | ||
|
|
||
| - **Audio Options** | ||
| - Optional microphone audio | ||
| - System audio capture (for tab recording) | ||
| - High-quality audio encoding | ||
|
|
||
| - **Seamless Integration** | ||
| - Automatic upload to Cap | ||
| - Direct link to recorded video | ||
| - Progress tracking during upload | ||
| - Multipart upload for large files |
Contributor
There was a problem hiding this comment.
logic: README claims the extension provides recording controls, audio options, and upload functionality. The actual extension code only opens a tab to /record - all these features are implemented in the web app, not the extension. Update the README to clarify that the extension is a launcher for the web-based recorder.
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/chrome-extension/README.md
Line: 5:27
Comment:
**logic:** README claims the extension provides recording controls, audio options, and upload functionality. The actual extension code only opens a tab to `/record` - all these features are implemented in the web app, not the extension. Update the README to clarify that the extension is a launcher for the web-based recorder.
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
173
to
183
| useEffect(() => { | ||
| console.log('Recording state:', { | ||
| canStartRecording, | ||
| isBrowserSupported, | ||
| supportCheckCompleted, | ||
| supportsDisplayRecording, | ||
| recordingMode, | ||
| organisationId, | ||
| unsupportedReason | ||
| }); | ||
| }, [canStartRecording, isBrowserSupported, supportCheckCompleted, supportsDisplayRecording, recordingMode, organisationId, unsupportedReason]); |
Contributor
There was a problem hiding this comment.
style: Remove debug console.log before merging to production.
Suggested change
| useEffect(() => { | |
| console.log('Recording state:', { | |
| canStartRecording, | |
| isBrowserSupported, | |
| supportCheckCompleted, | |
| supportsDisplayRecording, | |
| recordingMode, | |
| organisationId, | |
| unsupportedReason | |
| }); | |
| }, [canStartRecording, isBrowserSupported, supportCheckCompleted, supportsDisplayRecording, recordingMode, organisationId, unsupportedReason]); | |
| useEffect(() => { | |
| console.log('Recording state:', { | |
| canStartRecording, | |
| isBrowserSupported, | |
| supportCheckCompleted, | |
| supportsDisplayRecording, | |
| recordingMode, | |
| organisationId, | |
| unsupportedReason | |
| }); | |
| }, [canStartRecording, isBrowserSupported, supportCheckCompleted, supportsDisplayRecording, recordingMode, organisationId, unsupportedReason]); |
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/app/(org)/record/RecorderPageContent.tsx
Line: 173:183
Comment:
**style:** Remove debug `console.log` before merging to production.
```suggestion
useEffect(() => {
console.log('Recording state:', {
canStartRecording,
isBrowserSupported,
supportCheckCompleted,
supportsDisplayRecording,
recordingMode,
organisationId,
unsupportedReason
});
}, [canStartRecording, isBrowserSupported, supportCheckCompleted, supportsDisplayRecording, recordingMode, organisationId, unsupportedReason]);
```
<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
197
to
201
| const handleStopClick = () => { | ||
| stopRecording().catch((err: unknown) => { | ||
|
|
||
| }); | ||
| }; |
Contributor
There was a problem hiding this comment.
style: Empty catch block silently swallows errors. Handle errors properly or at least log them.
Suggested change
| const handleStopClick = () => { | |
| stopRecording().catch((err: unknown) => { | |
| }); | |
| }; | |
| const handleStopClick = () => { | |
| stopRecording().catch((err: unknown) => { | |
| console.error('Failed to stop recording:', err); | |
| }); | |
| }; |
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/app/(org)/record/RecorderPageContent.tsx
Line: 197:201
Comment:
**style:** Empty catch block silently swallows errors. Handle errors properly or at least log them.
```suggestion
const handleStopClick = () => {
stopRecording().catch((err: unknown) => {
console.error('Failed to stop recording:', err);
});
};
```
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
389
to
393
| : () => { | ||
| startRecording().catch((err: unknown) => { | ||
|
|
||
| }); | ||
| } |
Contributor
There was a problem hiding this comment.
style: Empty catch block silently swallows errors. Handle errors properly or at least log them.
Suggested change
| : () => { | |
| startRecording().catch((err: unknown) => { | |
| }); | |
| } | |
| : () => { | |
| startRecording().catch((err: unknown) => { | |
| console.error('Failed to start recording:', err); | |
| }); | |
| } |
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/app/(org)/record/RecorderPageContent.tsx
Line: 389:393
Comment:
**style:** Empty catch block silently swallows errors. Handle errors properly or at least log them.
```suggestion
: () => {
startRecording().catch((err: unknown) => {
console.error('Failed to start recording:', err);
});
}
```
How can I resolve this? If you propose a fix, please make it concise.…ogging - Simplify Chrome extension README to reflect launcher-only functionality - Remove detailed feature descriptions for recording modes and controls - Update permissions list to only include required tabs permission - Fix organisationId nullish coalescing to use undefined instead of null - Remove verbose recording state debug logging from RecorderPageContent - Add error logging to start/stop recording handlers for better debugging
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds a new tab-based web recorder flow. When users click the Chrome extension icon, it opens (or focuses) a dedicated recorder tab and redirects to /record, where the app can safely request camera and microphone permissions and start recording.
Why this approach
Chrome extensions can’t directly request camera/microphone access — permissions must come from a real web page.
The reason I created a new page instead of using the existing web-browser recording modal is to make it feel like a native browser extension experience. Opening it in a new page allows it to appear like an extension popup in the top-right corner, so it feels like you’re interacting with the extension itself rather than just another web modal.
What’s included
Opens or reuses a dedicated recorder tab from the extension
Full recording UI at /record with:
Recording mode selection (fullscreen, window, tab, camera-only)
Device selection & settings panel
In-progress controls (pause / resume / restart)
Persists selected devices via localStorage
Polished UI with smooth transitions and animated icons
https://cap.link/etvvdnprradt3x8
fixes #1502
fixes CAP-592
Future work
Explored an in-page iframe overlay recorder, but it introduces significant complexity (cross-origin permissions, iframe restrictions, state sync). The current tab-based approach is simpler and more robust for V1.