JohnBra / vite-web-extension

Vite web extension template. Setup with React, Typescript and TailwindCSS
MIT License
534 stars 82 forks source link

Refused to load script #40

Closed huzaifa-bilal-01 closed 1 day ago

huzaifa-bilal-01 commented 2 days ago

Getting this error when ever loading the extension:

"Refused to load the script 'chrome-extension://a5359a9d-e2f9-46a3-a0e5-0911e6083ec5/assets/index.tsx-B39MazF-.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost: http://127.0.0.1:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback."

JohnBra commented 2 days ago

Hi @huzaifa-bilal-01, thanks for opening the issue.

Could you please provide more information on your system and what steps you have already taken to fix the problem?

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior A clear and concise description of what you expected to happen.

Steps/attempts taken to fix Add the steps you have attempted to fix your problem here.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

dtszwai commented 2 days ago

I had the same issue yesterday. After upgrading Chrome, the problem was resolved. My current Chrome version is: Version 130.0.6723.70 (Official Build) (arm64).

huzaifa-bilal-01 commented 1 day ago

I had the same issue yesterday. After upgrading Chrome, the problem was resolved. My current Chrome version is: Version 130.0.6723.70 (Official Build) (arm64).

Chrome is up to date Version 130.0.6723.70 (Official Build) (64-bit)

My chrome is up to date but still getting the same error.

huzaifa-bilal-01 commented 1 day ago

Hi @huzaifa-bilal-01, thanks for opening the issue.

Could you please provide more information on your system and what steps you have already taken to fix the problem?

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior A clear and concise description of what you expected to happen.

Steps/attempts taken to fix Add the steps you have attempted to fix your problem here.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. Windows, Linux, MacOS] including version
  • Browser [e.g. chrome, firefox] including version

Thanks for your response! Below is the information related to the issue I encountered:

BUG: When loading extension, I receive the following error message in the console: image

It seems like the extension is blocked from loading its own script due to the CSP settings.

TO REPRODUCE: Steps to reproduce the issue:

  1. Install the extension locally.
  2. Load the extension in Chrome.
  3. Open the browser console.
  4. Reload the page where the extension is active.
  5. See the CSP error in the console.

EXPECTED BEHAVIOUR: I expect the extension to load its own script (content script) without being blocked by the CSP, allowing it to function correctly.

DESKTOP: OS: Windows 10, Windows 11 Browser: Chrome (Version 130.0.6723.70), Edge (Version 130.0.2849.46), Brave (Version 130.1.71.118)

NOTE: It is working fine on the opera or opera gx browser.

JohnBra commented 1 day ago

@huzaifa-bilal-01 Thanks for bringing this to my attention.

Looks like Chrome updated their CSP with a recent browser update.

Should be fixed within the most recent version of this template repository.

If you want to fix it in your project without creating a new project from this template, you will need to update the package @crxjs/vite-plugin from the current version to @crxjs/vite-plugin@2.0.0-beta.26.

Let me know if this works for you.

huzaifa-bilal-01 commented 1 day ago

@huzaifa-bilal-01 Thanks for bringing this to my attention.

Looks like Chrome updated their CSP with a recent browser update.

Should be fixed within the most recent version of this template repository.

If you want to fix it in your project without creating a new project from this template, you will need to update the package @crxjs/vite-plugin from the current version to @crxjs/vite-plugin@2.0.0-beta.26.

Let me know if this works for you.

Yeps this worked. Thanks 👍

JohnBra commented 1 day ago

Awesome!

Closing.