Skip to content
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

Jump to bottom

Theme button disappearing after 1 second #65

Closed
3 tasks done
elouangrimm opened this issue Oct 20, 2024 · 9 comments
Closed
3 tasks done

Theme button disappearing after 1 second #65

elouangrimm opened this issue Oct 20, 2024 · 9 comments

Comments

@elouangrimm
Copy link

Prerequisites

  • I searched for any existing report about this bug to avoid opening a duplicate.
  • This issue contains only one bug.
  • The title of this issue accurately describes the bug.

Bug Description

I installed the extension both from developer mode and from the webstore. This bug happens where I reload the ChatGPT page, the purple theme appears. like normal, and I see the theme button (with the paint roller). It then proceeds to move up 10 pixels or so and then just disappear.

Steps to Reproduce

  1. Install the extension
  2. Open ChatGPT.com
  3. See the purple theme load, then see the paint roller button.
  4. The button disappears.

Expected Behavior

The button should stay there and let me click it.

Actual Behavior

The button disappears and doesn't come back, not letting me change themes.

Web Browser name and version

Chrome 126.0.6478.120

GPThemes version

4.1.1

Does this happen when GPThemes is disabled?

No

Screenshots or Videos

Screen.recording.2024-10-20.2.10.49.PM.webm

Additional Information

Thank you so much! This extension looks great and I would like to use it!
@elouangrimm
Copy link
Author

btw I am reloading the page repeatedly in the clip above.

@itsmartashub
Copy link
Owner

itsmartashub commented Oct 23, 2024 •
edited
Loading

Hey, welcome @elouangrimm 🤗
I notice you have experience with web dev, so I hope you won't mind if I use some tech language.

This issue started occurring a few months ago. Specifically, it seems to have begun when OpenAI switched from Next.js to Remix. Since then, not only does the floating button disappear, but the entire extension functionality, including custom colors, fonts, and widths (I guess that you also have full width prompt message field when the floating button is not rendered) don't work properly during these moments.

This happens to me too, but very rarely and randomly, while I know there are users who experience this constantly. However, when they launched ChatGPT with the extension in a new browser profile or even a different browser, the issue stopped occurring, and everything worked as intended.

What I've noticed when this happens on my end is that the <body> element re-renders twice. It loads initially, and then you see a blink (that's why you see the floating button for a second), and then it renders again. Also, during these moments, you can notice almost 50 <link rel="modulepreload" href="https://cdn.oaistatic.com/assets/[random_chars].js"> tags in the <body> element, which, with my current knowledge, shouldn't happen - the correct practice would be to have link tags in the <head>. Though, to be fair, I'm not a React developer, nor am I familiar with Remix's behavior, so maybe this is normal in these situations...

Also, when the floating button isn't rendered, the following errors can be seen in the console:

Screenshot: console errors about one of <link> resources with href https://cdn.oaistatic.com/assets/bx2z9ivcrsrexei9.js

Screenshot 2024-10-21 143721

What I'm noticing now is that the <link> tags have finally moved to the <head> tag, also that they've removed the <link rel="modulepreload" href="https://cdn.oaistatic.com/assets/bx2z9ivcrsrexei9.js"> which caused errors in console, and the console errors are gone too...

Screenshot: All <link> are now moved from <body> to <head>, and removed the critical link with bx2z9ivcrsrexei9.js

Screenshot 2024-10-23 163318

If you don't mind, could you share your observations?

  • Do you still not have the floating button?
  • Could you inspect and check if you have the aforementioned link modulepreload tags?
  • If yes, are they located in the <head> or directly in the <body>, or even both?
  • If yes, can you see if you also have the above-mentioned console errors related to the <link rel="modulepreload" href="https://cdn.oaistatic.com/assets/bx2z9ivcrsrexei9.js"> tag or this script?
  • Does trying this in another browser profile or browser "fix" the issue?

This will help me finally better understand what's happening, as I currently feel powerless, especially since this occurs randomly and very rarely in my case (even though I have 6 different accounts 😐) which makes debugging quite challenging...

The ways I've tried to solve this, and the ideas I haven't tried yet, all have their pros and cons, so I haven't come up with an excellent solution yet. If you have any suggestions, I would be incredibly grateful!

@elouangrimm
Copy link
Author

Thank you so much for your in-depth answer and for considering the problem. This problem would make sense and that's a very good explanation for what could have happened. I am currently on a road trip and I'll be back in a couple days, then I can check on the problem. I will get back to you! Thanks! 👍😁

@elouangrimm
Copy link
Author

elouangrimm commented Oct 23, 2024 •
edited
Loading

The past few months I have been noticing a reloading of sorts of the web page and that would make sense as an explanation. The ChatGPT page will flash white after partly loading when I'm reloading the page and will basically just reload itself.

@itsmartashub
Copy link
Owner

Well yeah, that's a major issue actually that makes this extension quite pointless in the end.

The past few months I have been noticing a reloading of sorts of the web page and that would make sense as an explanation. The ChatGPT page will flash white after partly loading when I'm reloading the page and will basically just reload itself.

Exactly! I hope they've resolved this by moving all those <link> tags from the <body> to the <head> and by removing that critical bx2z9ivcrsrexei9.js asset, and that everything will now work properly for you as well 🤞

Anyways, I wish you a wonderful and fun vacation. Enjoy your road trip, and no worries! Safe travels!

@elouangrimm
Copy link
Author

Do you still not have the floating button?

No, I have the button now but it is glitching out and not always appearing.

Could you inspect and check if you have the aforementioned link modulepreload tags?

Yeah, I have all the link tags.

If yes, are they located in the or directly in the , or even both?

They are in both, but the specific <link rel="modulepreload" href="https://cdn.oaistatic.com/assets/k7mulp1vrhhdwp94.js"> one is only in the header

If yes, can you see if you also have the above-mentioned console errors related to the tag or this script?

Yes, I also have the console errors and they keep appearing.

Does trying this in another browser profile or browser "fix" the issue?

I cannot test this, because I am using a Chromebook (I am 13, after all) (No really) and Chromebooks can't have multiple browsers or profiles (I mean I could try in the Debian vm if you want)

HERE IS A SCREEN RECORDING WITH ALL OF THE INFO (My computer was being really slow there for some reason so that's normal that it's pretty slow)

Screen.recording.2024-10-27.10.57.51.AM.webm

@elouangrimm
Copy link
Author

elouangrimm commented Oct 27, 2024 •
edited
Loading

@itsmartashub Thanks a lot for helping me out with this issue! I'm back from the trip, so I can try to figure this out more.

@itsmartashub
Copy link
Owner

Well, that’s some nerves - recording at 2 FPS and still not giving up. Respect @elouangrimm 😂 Thank you for the full video! It helped confirm my understanding that when there's an error with one of ChatGPT's assets, the paint roller button also fails to load.

<link rel="modulepreload" href="https://cdn.oaistatic.com/assets/k7mulp1vrhhdwp94.js">

You have mentioned this script, but in the video, based on the console, the problematic one that throws errors seems to be:
<link rel="modulepreload" href="https://cdn.oaistatic.com/assets/k8ycu8uh0lozycmf.js">. But thanks to this video, you've made it clear to me that it doesn't really matter whether the offending <link> is in the <body> or the <head>. The problem is the error it throws

Unfortunately, in any way, I can't currently implement a solution that would perfectly cover all the scenarios I have in mind. The only fine fix would be to rewrite the extension and move the functionality into a so-called popup (toolbar extension icon) so that you could manage customisation whenever you click on the GPThemes toolbar icon, but with my current free time constraints, that's quite a challenge to undertake at the moment :(

@elouangrimm
Copy link
Author

Yeah, thanks so much. Sorry for the low FPS... I installed the extension through the GitHub release, and it fixed the errors and the bug! This is great! Works great! Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@itsmartashub @elouangrimm