Clerk Chrome Extension not working. Manifest V3

[Vaqxin]

Package + Version

• [ x] @clerk/chrome-extension

Dependencies + versions

`{
  "name": "wizevine",
  "version": "0.0.0",
  "author": "no one",
  "description": "",
  "type": "module",
  "license": "MIT",
  "keywords": [
    "chrome-extension",
    "react",
    "vite",
    "create-chrome-ext"
  ],
  "engines": {
    "node": ">=14.18.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "fmt": "prettier --write '**/*.{jsx,js,json,css,scss,md}'"
  },
  "dependencies": {
    "@clerk/chrome-extension": "^0.3.14",
    "@headlessui/react": "^1.7.13",
    "@heroicons/react": "^2.0.16",
    "dotenv": "^16.3.1",
    "flowbite": "^1.6.5",
    "flowbite-react": "^0.4.3",
    "openai": "^3.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@crxjs/vite-plugin": "^1.0.12",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "@vitejs/plugin-react": "^1.3.2",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.21",
    "prettier": "^2.7.1",
    "tailwindcss": "^3.2.7",
    "vite": "^2.9.13"
  }
}
`

## Description

CSP is blocking  clerk chrome extension from loading vital scripts. 

`@clerk_chrome-extension.js?v=1d0ce8ee:18680 Refused to load the script 'https://good-bunny-39.clerk.accounts.dev/npm/@clerk/clerk-js@4/dist/clerk.browser.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.`

[dimkl]

@Vaqxin thank you for reporting this issue. Have you tried this template repo ? https://github.com/clerkinc/clerk-chrome-extension-starter/ Could you also provide the manifest.json you are using?

[Vaqxin]

@dimkl thanks for the reply.

import { defineManifest } from '@crxjs/vite-plugin'

export default defineManifest({
  name: 'wizevine',
  description: '',
  version: '0.0.0',
  manifest_version: 3,
  icons: {
    16: 'img/logo-16.png',
    32: 'img/logo-34.png',
    48: 'img/logo-48.png',
    128: 'img/logo-128.png',
  },
  action: {
    default_popup: 'popup.html',
    default_icon: 'img/logo-48.png',
  },
  options_page: 'options.html',
  background: {
    service_worker: 'src/background/index.js',
    type: 'module',
  },
  content_scripts: [
    {
      //matches: ['http://*/*', 'https://*/*'],
      //matches: ["https://www.amazon.com/*/product-reviews/*"],
      matches: ["https://www.amazon.com/*"],
      js: ['src/content/index.js'],
    },
  ],
  web_accessible_resources: [
    {
      resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
      matches: [],
    },
  ],
  permissions: [
    "tabs",
    "cookies",
    "storage"
  ],
  host_permissions: ["*://good-bunny-39.clerk.accounts.dev/"],
  // content_security_policy: {
  //   "extension_pages": "script-src 'self' https://good-bunny-39.clerk.accounts.dev; object-src 'self'",
  //   "sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';"
  // }
})

Yes, I've checked out that repo. Im not sure what is different in my project

[azamuddin]

Is this the same cause? https://github.com/clerkinc/javascript/issues/1412#issuecomment-1606101488

[SokratisVidros]

@Vaqxin is trying to hot-load ClerkJS on runtime. This is supposed to happen only when Clerk is used in a web app and not in an extension.

Please ensure you are using the latest version of @clerk/chrome-extension package and try again.

[Vaqxin]

@SokratisVidros Im following the docs. Not doing anything different.

"@clerk/chrome-extension": "^0.3.19",

Still getting the error even after updating vite -

`@clerk_chrome-extension.js?v=a0e5625d:18700 Refused to load the script 'https://good-bunny-39.clerk.accounts.dev/npm/@clerk/clerk-js@4/dist/clerk.browser.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.

(anonymous) @ @clerk_chrome-extension.js?v=a0e5625d:18700 2Popup.jsx:59 PASSED TAG TEST @clerk_chrome-extension.js?v=a0e5625d:19719 Uncaught (in promise) Error: Clerk: Failed to load Clerk at @clerk_chrome-extension.js?v=a0e5625d:19719:11 at async _IsomorphicClerk.loadClerkJS (@clerk_chrome-extension.js?v=a0e5625d:20286:11)`

[Vaqxin]

@SokratisVidros this seems to be an issue with Vite and @clerk/chrome-extension

[colinclerk]

Hello - can you provide a minimal reproduction for us?

That load is generally triggered by <ClerkProvider> in web apps, but the <ClerkProvider> inside @clerk/chrome-extension is designed to skip it. At first glance, it's not obvious why Vite would trigger this load but not CRA (as in the starter)

[Vaqxin]

Easiest would be using - https://github.com/guocaoyi/create-chrome-ext - React, Javascript - installing Clerk and importing into popup.jsx

[Vaqxin]

Have you guys tested this in anything other than CRA? I just made a fresh project with webpack5 not vite and Im getting the exact same error @colinclerk @dimkl Thanks!

[devagrawal09]

Hi @Vaqxin, Thank you for reporting the issue. We have narrowed the bug to @clerk/clerk-js v4.45 which is a dependency of @clerk/chrome-extension v0.3.7 onwards. For now you can lock the versions of both these libraries in your package.json and it should work.

    "@clerk/chrome-extension": "0.3.6",
    "@clerk/clerk-js": "4.44.0",

Once this is fixed in the latest version of clerk-js I will let you know and you should be able to upgrade to the latest version of the library then.

[Vaqxin]

@devagrawal09 Thanks for the reply! - Updated my deps to the versions mentioned, unfortunately using those packages still results in the same issues. Looking to launch my AI app in a week and this has been a roadblock for me. Really like what Clerk is building that's why I'm willing to delay. Hopefully a patch on the next release will help.

[nikosdouvlis]

Hello @Vaqxin, I'm looking into this as well but I'm having trouble reproducing the issue after pinning the versions as Dev instructed. Could you please share the output of running npm ls -a | grep -e '@clerk'? Sharing your package-lock file would also be helpful.

Update: I think I've managed to reproduce this consistently, I'll have more details soon.

[Vaqxin]

@nikosdouvlis Looking forward to your updates!

[nikosdouvlis]

Hello @Vaqxin :) Could you try using the following version? You don't need to have clerk/clerk-js listed as a direct dependency anymore, so please remove that and install:

npm i @clerk/chrome-extension@0.3.22-snapshot.6f39cb6

Let me know if this works for you - we'll be running more tests and push out the fix in a stable release this week.

[Vaqxin]

@nikosdouvlis It is indeed now working! Thanks!

[jellohouse]

Not too sure why but i'm now facing the same error with latest version "@clerk/chrome-extension": "0.4.13",

clerk.mjs:98 Refused to load the script 'https://clerk.XXXXXXXX/cloudflare/turnstile/v0/api.js?render=explicit&_clerk_js_version=4.64.2' because it violates the following Content Security Policy directive: "script-src 'self' http://localhost". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

clerk.mjs:98 Refused to load the script 'https://clerk.XXXXXXXX/cloudflare/turnstile/v0/api.js?render=explicit&_clerk_js_version=4.64.2' 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.

But actually it only happens when i use the live publishable key. When i use the test publishable key, there is no error 🤔

[kaminskypavel]

Unfortunately not working for me.

    "@clerk/chrome-extension": "^0.6.0",
    "@clerk/clerk-react": "^4.30.0",

@clerk_clerk-react.js?v=eb21b892:354 Refused to load the script 'https://sacred-sheep-79.clerk.accounts.dev/npm/@clerk/clerk-js@4/dist/clerk.browser.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.

@nikosdouvlis can you please reopen?

[tmilewski]

Hey @kaminskypavel & @jellohouse!

Would you mind confirming the following for me?

• That ClerkProvider is being imported from @clerk/chrome-extension and not @clerk/clerk-react. The provider from @clerk/chrome-extension operates differently to support that environment.
• That your manifest.json includes the domain refusing to load in host_permissions.

Thanks!

[kaminskypavel]

Hey @kaminskypavel & @jellohouse!

Would you mind confirming the following for me?

• That ClerkProvider is being imported from @clerk/chrome-extension and not @clerk/clerk-react. The provider from @clerk/chrome-extension operates differently to support that environment.
• That your manifest.json includes the domain refusing to load in host_permissions.

Thanks!

you're correct! I missed the host_permissions in manifest.json, my bad, thanks for the hint. It now loads, but never authenticates :/

I can also confirm this with the useAuth hook

specs Browser : Brave Version 1.61.104 Chromium: 120.0.6099.115 (Official Build) (64-bit)

what am I missing?