Persistent React Error #418 and CSP issues on chatgpt.com

[masterzoidberg]

Describe the bug
When using the MCP SuperAssistant extension (version v0.1.2-alpha) on chatgpt.com, a "Minified React error #418" frequently appears in the browser console. This error seems to correlate with the extension's sidebar UI behaving inconsistently: sometimes it loads and functions correctly, while other times it is unresponsive, parts of its UI are missing/broken, or it fails to load its main UI elements properly. The error typically appears early, during the content script's initialization/hydration phase.

Additionally, there are Content Security Policy (CSP) errors related to loading Font Awesome (v4.7.0) from its CDN (use.fontawesome.com) and its associated fonts. These are blocked by chatgpt.com's CSP.

To Reproduce
Steps to reproduce the behavior:

1. Install the MCP SuperAssistant extension (version v0.1.2-alpha, loaded as an unpacked extension, e.g., from the release tag: https://github.com/srbhptl39/MCP-SuperAssistant/releases/tag/v0.1.2-alpha).
2. Navigate to https://chatgpt.com/.
3. Open the developer console.
4. Observe the console for the errors and monitor the behavior of the extension's sidebar. The React #418 error and sidebar issues may not occur on every single load but are frequent.

Expected behavior
The MCP SuperAssistant sidebar should consistently load and function correctly on chatgpt.com without any React #418 errors or CSP errors that break its core functionality (like missing icons).

Screenshots
(If you have screenshots of the broken UI or the console errors, you can add them here. For example: "See attached screenshot console_errors_chatgpt.png")

Console Errors (from original unmodified extension on chatgpt.com):

Denying load of chrome-extension://[YOUR_EXTENSION_ID_HERE]/assets/images/icon-65.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.Refused to load the stylesheet 'https://use.fontawesome.com/releases/v4.7.0/css/font-awesome-css.min.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' blob: chatgpt.com/ces https://.chatgpt.com ...". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.Refused to load the font 'https://use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff2' because it violates the following Content Security Policy directive: "font-src 'self' data: https://.oaistatic.com ...".(Similar errors for .woff and .ttf may also appear)Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.(The stack trace for React error #418 sometimes appears to originate from scripts loaded by the host page itself, e.g., msupklk377u8vx8o.js on chatgpt.com).(Note: Please replace [YOUR_EXTENSION_ID_HERE] with your actual extension ID when posting. The icon-65.png error might be resolved if manifest tweaks are already applied to the build being tested, but it was present in the original.)

Desktop (please complete the following information):

• OS: Microsoft Windows 11 Professional (x64)
• OS Version: Build 22635.5305
• Browser: Google Chrome
• Browser Version: 136.0.7103.93 (Official Build) (64-bit)
• (Also observed similar issues in Brave Browser and Vivaldi)
• Node Version: N/A (Browser extension)
• Other Necessary Packages Version: N/A (Browser extension)

Additional context

• The extension (version v0.1.2-alpha) was tested
• The React #418 error and the Font Awesome CSP errors are the primary issues observed specifically on chatgpt.com.
• Initial debugging attempts to modify the extension's manifest.json to make local assets web_accessible_resources (like icon-65.png) have been successful in resolving direct loading errors for those specific local assets.
• The external Font Awesome CSS (v4.7.0 from use.fontawesome.com) continues to be blocked by chatgpt.com's own Content Security Policy.
• Analysis of the compiled content script (content/index.iife.js) indicates the extension's sidebar UI is rendered into a Shadow DOM.
• The React Error #418 seems to be the most critical as it directly impacts the extension's usability and reliability.

Thank you for looking into this!

[github-actions]

Thank you for your contribution. We will check and reply to you as soon as possible.

[srbhptl39]

These errors are not super assistance related, in my experience i am seeing those errors regardless of the extension on and off.