chrome-extension-tools icon indicating copy to clipboard operation
chrome-extension-tools copied to clipboard

jquery in content_scripts load

Open yuxinyu12345 opened this issue 3 years ago • 3 comments

Build tool

Vite

Where do you see the problem?

  • [X] In the browser
  • [ ] In the terminal

Describe the bug

"content_scripts": [ { "js": [ "src/lib/jquery-3.3.1.min", "src/index.js" ], "matches": [ "://.baidu.com/*" ] } ]

The dev environment can use $, but the build dist cannot.

Reproduction

Error in event handler: ReferenceError: $ is not defined at e (chrome-extension://omedgkhbnladahaodjdiojnbmiablmip/assets/index.js.561d4845.js:1:104)

test demo https://github.com/yuxinyu12345/crxjs-demo

Logs

No response

System Info

"dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@crxjs/vite-plugin": "^1.0.14",
    "@vitejs/plugin-vue": "^3.0.3",
    "typescript": "^4.6.4",
    "vite": "^3.0.7",
    "vue-tsc": "^0.39.5"
  }

Severity

blocking an upgrade

yuxinyu12345 avatar Aug 26 '22 01:08 yuxinyu12345

i solved the problem. use not import $ from 'jquery',because i use local files. The solution is as follows:

  1. execute yarn add jquery
  2. vite.config-build-minify: false, close minify

yuxinyu12345 avatar Sep 07 '22 00:09 yuxinyu12345

Vite/CRXJS only support ES modules currently, but support for plain script files like JQuery is on the roadmap.

jacksteamdev avatar Sep 08 '22 16:09 jacksteamdev

Vite/CRXJS only support ES modules currently, but support for plain script files like JQuery is on the roadmap.

Thank you for your reply

yuxinyu12345 avatar Sep 09 '22 01:09 yuxinyu12345