Chrome Extension using @sentry/browser or @sentry/react gets rejected

[FedorT22]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/browser

SDK Version

8.47.0

Framework Version

18.3.1

Link to Sentry event

No response

Reproduction Example/SDK Setup

As you kindly asked in the previous issue, #14010 (comment), I created a small repo with a reproduction to build a Chrome Extension for the side panel:
https://github.com/FedorT22/sandbox-chrome-extension

Steps to Reproduce

1. Build the project with @sentry feedbackIntegration function using @sentry/browser or @sentry/react. You can follow README.md file in the project.
2. See in the /dist/sidePanel.js and dist/sidePanel.js.map the piece of code wtih CDN link:

const baseURL = (options && options.cdnBaseUrl) || 'https://browser.sentry-cdn.com';\n\n return new URL(`/${SDK_VERSION}/${bundle}.min.js`, baseURL).toString();\n

3. Submit the extension to the Chrome Webstore
4. Wait for the Chrome Webstore answer

Expected Result

Extension is approved by the reviewers.

Actual Result

Extension is rejected by the reviewers
The given reason:

Violation reference ID: Blue Argon
Technical Requirements - Additional Requirements for Manifest V3:
Violation:
Including remotely hosted code in a Manifest V3 item.
Violating Content:
Code snippet: sidePanel.js: "function $re(e) { const t = an(), n = t && t.getOptions(), r = n && n.cdnBaseUrl || "https://browser.sentry-cdn.com/"; return new URL(/${mc}/${e}.min.js, r).toString() }"

The current work-around:
Clear up @sentry CDN links during the build process with a help of patch-package. See more info in the previous issue.

[mydea]

Hello,

We will look into this, ideally when using the feedbackIntegration from an NPM package like this it should not have references to the lazy loading code!

[sankyutang]

the same issue

[s1gr1d]

@sankyutang We are usually not notified when comments on closed issues are added. Please consider opening a new issue with more details about your setup. Thank you

[james-arn]

I've just experienced this too

[surajrimal07]

Similar experince here, any solution so far? Using Parcel.

[james-arn]

I can't find the link, but I read a hack where someone used vite to remove the url or the remote code (CDN link). I did the same with a webpack plugin. It's a hacky solution though

[surajrimal07]

I fixed it by importing import { captureException } from "@sentry/browser" like this instead of * as sentry.

[austinulfers]

I can't find the link, but I read a hack where someone used vite to remove the url or the remote code (CDN link). I did the same with a webpack plugin. It's a hacky solution though

Can you add context around this solution? I'm looking to implement this in the short-term.

[FedorT22]

I can't find the link, but I read a hack where someone used vite to remove the url or the remote code (CDN link). I did the same with a webpack plugin. It's a hacky solution though

Can you add context around this solution? I'm looking to implement this in the short-term.

@austinulfers you can try this piece of code from my attached sandbox code.
https://github.com/FedorT22/sandbox-chrome-extension/blob/main/infrastructure/vite.side-panel.config.ts#L77

[austinulfers]

I can't find the link, but I read a hack where someone used vite to remove the url or the remote code (CDN link). I did the same with a webpack plugin. It's a hacky solution though

Can you add context around this solution? I'm looking to implement this in the short-term.

@austinulfers you can try this piece of code from my attached sandbox code. https://github.com/FedorT22/sandbox-chrome-extension/blob/main/infrastructure/vite.side-panel.config.ts#L77

Thank you. Was able to port this over to webpack in order to get it approved in the chrome store.

import { Compiler } from 'webpack';

interface ReplaceConfig {
  script: string;
  regexToFind: RegExp;
  replacement: string;
}

class ChromeExtensionV3ViolationPlugin {
  private replaceConfigs: ReplaceConfig[];

  constructor(replaceConfigs: ReplaceConfig[]) {
    this.replaceConfigs = replaceConfigs;
  }

  apply(compiler: Compiler) {
    compiler.hooks.emit.tap('ChromeExtensionV3ViolationPlugin', (compilation) => {
      const files = Object.keys(compilation.assets);
      files.forEach((file) => {
        const asset = compilation.assets[file];
        let content = asset.source().toString();
        this.replaceConfigs.forEach((config) => {
          if (file.includes(config.script) && config.regexToFind.test(content)) {
            content = content.replace(config.regexToFind, config.replacement);
          }
        });
        const { RawSource } = require('webpack-sources');
        compilation.assets[file] = new RawSource(content);
      });
    });
  }
}

export default ChromeExtensionV3ViolationPlugin;

Usage:

new ChromeExtensionV3ViolationPlugin([
  {
    script: 'background',
    regexToFind: /https:\/\/browser\.sentry-cdn\.com/g,
    replacement: ''
  }
])