Need help implementing Sentry v8 in Safari Web Extension (Manifest v3)

[edgariscoding]

Hey everyone!

I'm trying to implement Sentry in my Safari Web Extension and running into some issues, particularly with the new v8 changes for browser extensions. I've read through the browser extension documentation (https://docs.sentry.io/platforms/javascript/best-practices/shared-environments/) and understand that we can't use Sentry.init() anymore, but I'm having trouble getting any approach to work.

My Setup

I have a Safari Web Extension (manifest v3) that uses webpack for bundling. The extension has the typical structure with background.js, content.js, and popup.js files. Here's what my webpack config looks like:

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const WebpackObfuscator = require('webpack-obfuscator');

module.exports = {
    mode: 'production',
    entry: {
        content: './content.js',
        background: './background.js',
        popup: './popup.js'
    },
    output: {
        filename: '[name].prod.js',
        path: path.resolve(__dirname, 'build')
    }
    plugins: [
        new WebpackObfuscator({
            rotateStringArray: true,
            stringArray: true,
            stringArrayEncoding: ['base64'],
            stringArrayThreshold: 0.8,
            identifierNamesGenerator: 'hexadecimal',
            splitStrings: true,
            splitStringsChunkLength: 5,
            transformObjectKeys: true,
            unicodeEscapeSequence: false,
            renameGlobals: true,
            selfDefending: true,
            debugProtection: true,
            debugProtectionInterval: 4000
        })
    ],
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin({
            terserOptions: {
                format: { comments: false },
                compress: {
                    drop_console: true,
                    drop_debugger: true,
                    pure_funcs: ['console.log', 'console.debug']
                }
            },
            extractComments: false
        })]
    }};

What I've Tried

1. First, I tried using the npm package:

import {
  BrowserClient,
  defaultStackParser,
  getDefaultIntegrations,
  makeFetchTransport,
  Scope,
} from "@sentry/browser";

But got this error: TypeError: Module name, '@sentry/browser' does not resolve to a valid URL.

2. Then I tried downloading the bundle from the CDN (https://browser.sentry-cdn.com/8.53.0/bundle.tracing.replay.min.js), renaming it to sentry.js, including it directly, and adding it to manifest.json. Then using this instead:

const { BrowserClient, defaultStackParser, makeFetchTransport, Scope } = Sentry;

But got: ReferenceError: Can't find variable: Sentry. I ensured that sentry.js was showing up in the sources tab within web inspector.

I feel like I'm missing something obvious about how to properly import Sentry in a browser extension context. I've researched online and there's lots of guides from people who have done this over the years but they're all using older versions of Sentry and I'm not sure if Safari is the one at fault here. Any guidance would be greatly appreciated!

Some specific questions:

1. What's the recommended way to integrate Sentry in a manifest v3 extension? I've read the instructions on how to initialize it but I'm asking about how to actually install Sentry and get to the point where I can initialize it within background.js.
2. Do I need any special webpack configuration?
3. Are there any Safari-specific considerations I should be aware of?

Thanks in advance for any help! 🙏