HMR does not work on Content Scripts Change

[hhimanshu]

Describe the bug The HMR does not work when working with Content Scripts. The reload of the page is required to view the changes

To Reproduce Here is the PR that has changes required to setup TailwindCSS in hope to have HMR working on Content Scripts https://github.com/hhimanshu/chrome-ext/pull/6

Expected behavior As a developer, when I make changes to code, or tailwind style in Content Script, the web page should reflect the change immediately without requiring the page reload

Screenshots

https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/assets/6589036/398c73f0-621d-4a2b-941e-f69666a82529

Desktop (please complete the following information):

• OS: Mac
• Browser: Brave Version 1.61.114 Chromium: 120.0.6099.199 (Official Build) (arm64)
• Node Version:

  node -v
  v20.11.1

Additional context When a change is made, there is an activity on the terminal, but the outcome does not have the change.

[github-actions[bot]]

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

[Jonghakseo]

hello. Thanks for the report.

I received the code you provided in the link and ran it and found that HMR works fine.

https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/assets/53500778/ad55cd0a-1a74-4760-9a7a-cd54eb4758d6

After run pnpm dev, Could you reload extension in chrome://extensions/ tab?

[PatrykKuniczak]

That's issue with 'Brave'

This browser can't establish connection:

On the first render work's well, but after fully loaded, immediately i have info about browser can't establish websocket connection and don't refreshing page, work's as you describe.

That's not issue with Twind or other styles issue, only with this connection.

[PatrykKuniczak]

@hhimanshu For now, develop in Google Chrome, maybe @Jonghakseo will fix it in the future

Or if you're able to contribute, you can try to solve it, we can help you, mention us here, if you get stuck