Dropbox Integration

[aaryanvangari]

Web

Screenshots

Test Cases

Screenshots

Android

Screenshots

iPhone 13 Mini (iOS)

Screenshots

[Copilot]

Pull request overview

This pull request adds Dropbox integration as a new sync adapter for the floccus bookmarks sync extension. The implementation follows the established pattern of the existing Google Drive adapter, providing OAuth authentication, file operations (create, upload, download, delete), custom file locking mechanism using Dropbox file properties, and end-to-end encryption support.

Changes:

• Adds a new Dropbox adapter (src/lib/adapters/Dropbox.ts) with OAuth2 authentication, file operations, and locking mechanism using custom file properties/templates
• Adds UI components for Dropbox account setup and configuration (OptionsDropbox.vue)
• Integrates Dropbox option into existing views (NewAccount.vue, AccountOptions.vue, Options.vue, AddBookmarkIntent.vue, Drawer.vue)
• Adds error handling classes specific to Dropbox (DropboxAuthenticationError, DropboxOAuthTokenError, DropboxSearchError, DropboxTemplateError)
• Adds test coverage for both encrypted and non-encrypted Dropbox configurations
• Updates documentation (README, Android metadata) and localization strings
• Adds Dropbox API credentials file and updates build configuration

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 15 comments.

Show a summary per file

File	Description
src/lib/adapters/Dropbox.ts	New Dropbox adapter implementation with OAuth, file operations, encryption, and custom locking mechanism
src/ui/components/OptionsDropbox.vue	New Vue component for Dropbox account configuration options
src/ui/views/NewAccount.vue	Added Dropbox adapter selection and setup flow
src/ui/views/AccountOptions.vue	Integrated OptionsDropbox component for account management
src/ui/views/native/Options.vue	Added OptionsDropbox for native mobile options
src/ui/views/native/AddBookmarkIntent.vue	Added Dropbox icon mapping
src/ui/components/native/Drawer.vue	Added Dropbox icon to navigation drawer
src/lib/Account.ts	Registered Dropbox adapter in adapter factory
src/errors/Error.ts	Renamed GoogleOAuthTokenError and added Dropbox-specific error classes
src/test/test.js	Added test cleanup logic for Dropbox and test accounts
test/selenium-runner.js	Added Dropbox refresh token environment variable handling
.github/workflows/tests.yml	Added Dropbox and Dropbox-encrypted test configurations
dropbox-api.credentials.json	New file with Dropbox OAuth credentials for web, Android, and iOS
android/app/src/main/AndroidManifest.xml	Added Dropbox OAuth redirect URI intent filter
_locales/en/messages.json	Added Dropbox error messages and UI strings
README.md	Updated feature list to mention Dropbox support
fastlane/metadata/android/en-US/full_description.txt	Updated app description to include Dropbox
.github/ISSUE_TEMPLATE/bug_report.yml	Added Dropbox to adapter selection dropdown
gulpfile.js	Added error handling for Dropbox credentials file
manifest.firefox.json	Removed deprecated chrome_style property from browser_action

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[marcelklehr]

Looks really good, apart from the above comments :) I will try setting up my own OAuth client soon and test this.

[aaryanvangari]

Dropbox App Registration

1. Open Dropbox Developer Console

Go to https://www.dropbox.com/developers/apps Login using Dropbox account

2. Create app

Click on button Create app

3. Choose API Type

Select Scoped access

4. Choose App Type

Pick one based on your use case:

• App folder (recommended for most apps)
  • App can access only its own folder
  • Safer, easier review
• Full Dropbox
  • Access entire user Dropbox
  • Requires stronger justification

For Floccus: Use Full Dropbox since we are trying to access root of the Dropbox

5. Name Your App

• Enter a globally unique name
• Example:
  • floccus
  • floccus-sync-client

Click Create app

6. App Dashboard Overview

Once created, you’ll land on the App Settings page, where you’ll find:

• App key (Client ID)
• App secret (Client Secret)
• App status & permissions

Note: Never expose App Secret in front-end code, Keep a note of these details as it needs to be produced in dropbox-api.credentials.json file

7. Set branding

• Set branding details from branding tab for credibility

8. Set Redirect URIs (OAuth)

Scroll to OAuth 2 → Redirect URIs

Add:

• Web:
  • https://mbepccofdnoepgicagpchfmafecckdam.chromiumapp.org/
  • https://76a380c4950986998208e7bb9dbd8fea94c91504.extensions.allizom.org/
  • https://fnaicdffflnofjppbagibeoednhnbjhg.chromiumapp.org/
  • https://gjkddcofhiifldbllobcamllmanombji.chromiumapp.org/
  • https://djejpebekaoommcjfeaiipdikmdjkblg.chromiumapp.org/
• Capacitor / Mobile:
  • org.handmadeideas.floccus://auth

Must exactly match what you use in OAuth code.

Click Add after each URI.

9. Enable Refresh Tokens

Still in OAuth 2 section:

Allow public clients (implicit grant & PKCE) → Allow

10. Set Permissions (Scopes)

Go to Permissions tab.

Common scopes (select only what you need):

Use case	Scope
User info	account_info.read	Already selected
List files	files.metadata.read	Already selected
List files	files.metadata.write	Enable
Read files	files.content.read	Enable
Upload/edit	files.content.write	Enable
Sharing	sharing.read	Enable

Click Submit after changing scopes.

Note: Scope changes invalidate existing tokens.

11. Apply for production (Development vs Production)

• New apps start in Development mode
• Limited users
• No review required

For public release:

• Switch to Production
• Complete Dropbox review (privacy policy required)

[marcelklehr]

Hey @aaryanvangari
So, I've tried to use this with my own dropbox client after registering it like you described. It seems to work, when using it like a normal user, but the tests fail for me for some reason:

... snip
2026-02-27T11:21:34.315Z onSyncComplete
index.js:8 2026-02-27T11:21:34.316Z FETCHING POST https://content.dropboxapi.com/2/files/upload
index.js:505  POST https://content.dropboxapi.com/2/files/upload 409 (Conflict)
index.js:8 2026-02-27T11:21:35.036Z Receiving response for POST https://content.dropboxapi.com/2/files/upload
index.js:8 2026-02-27T11:21:35.037Z Dropbox API error: {"error_summary":"path/conflict/file/...","error":{".tag":"path","reason":{".tag":"conflict","conflict":{".tag":"file"}},"upload_session_id":"..."}}
...snap

[marcelklehr]

I'm on it

[marcelklehr]

opened a new PR myself, so that CI doesn't fail due to security measures.