Skip to content

feat(flutter): docs for setting up flutter web for chrome extensions #14474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
buenaflor merged 9 commits into from
Oct 30, 2025
Merged

feat(flutter): docs for setting up flutter web for chrome extensions #14474

Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
584aed8
Add Flutter Chrome Extensions configuration guide for Sentry
cursoragent Jul 26, 2025
1d5ce15
Update chrome-extensions.mdx
buenaflor Jul 28, 2025
c8ec7f8
Update chrome-extensions.mdx
buenaflor Jul 28, 2025
7685893
Merge branch 'master' into cursor/set-up-flutter-web-for-chrome-exten…
buenaflor Jul 31, 2025
b2f9add
Update
buenaflor Jul 31, 2025
4626523
Update
buenaflor Jul 31, 2025
6debc04
Update
buenaflor Jul 31, 2025
113730e
Update chrome-extensions.mdx
buenaflor Jul 31, 2025
3a4a96a
Update chrome-extensions.mdx
buenaflor Jul 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions docs/platforms/dart/guides/flutter/configuration/chrome-extensions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
---
title: Chrome Extensions
description: "Learn how to set up the Sentry Flutter SDK for Chrome Extensions with Flutter Web."
sidebar_order: 500
sdk: sentry.dart.flutter
categories:
- dart
- flutter
---

<Alert level="warning">

Chrome Extensions enforce strict Content Security Policy (CSP) rules that prevent dynamically loaded scripts. The standard Sentry Flutter SDK setup will not work in Chrome Extension environments without the modifications outlined in this guide.

</Alert>

## Overview

Chrome Extensions enforce strict Content Security Policy (CSP) rules that prevent dynamically loaded scripts. Since the Sentry Flutter SDK typically loads the Sentry JavaScript SDK dynamically for web platforms, you need to include the Sentry JavaScript bundle as a static asset instead.

## Required Setup

### 1. Download the Sentry JavaScript Bundle

Instead of loading the Sentry JavaScript SDK dynamically, you need to include it as a static asset:

1. Download the minified Sentry JavaScript bundle from the Sentry CDN. Use the version that is compatible with the Sentry Flutter SDK:
```
https://browser.sentry-cdn.com/9.40.0/bundle.tracing.min.js
```

<Alert level="info">

Replace `9.40.0` with the appropriate version for your project. Check the [Sentry Flutter SDK releases](https://github.com/getsentry/sentry-dart/releases) to find the version of the Sentry Javascript SDK that is used in a specific Sentry Flutter SDK release.

</Alert>

2. Save this file to your Flutter Web project's `web/` directory.

### 2. Include the Script in Your HTML

Add the Sentry JavaScript bundle to your `web/index.html` file:

```html {filename:web/index.html}
<!DOCTYPE html>
<html>
<head>
<!-- Other head elements -->
<script src="bundle.tracing.min.js" type="application/javascript"></script>
</head>
<body>
<!-- Your app content -->
</body>
</html>
```

### 3. Configure Your Flutter Build

Build your Flutter Web app for Chrome Extensions.

Ensure that the `bundle.tracing.min.js` file is included in your `web/` directory before building.

### 4. Upload Source Maps

After building your application, upload the generated source maps to Sentry to enable proper symbolication of stack traces using the [sentry_dart_plugin](/platforms/dart/guides/flutter/debug-symbols/dart-plugin/).