guocaoyi / create-chrome-ext

🍺 Scaffolding your Chrome extension! Boilerplates: react \ vue \ svelte \ solid \ preact \ alpine \ lit \ stencil \ inferno \ vanilla
MIT License
1.42k stars 106 forks source link

Unable to load jquery.js file under content script directory #76

Open Kain-90 opened 3 months ago

Kain-90 commented 3 months ago

Everything is fine during the dev mode, but after run yarn build and reload the extension, the dev console shows the error:

image

I can find jquery.js in the Sources tab, and $ can be successfully called in the dev console

image

manifest.ts content like below

  content_scripts: [
    {
      matches: omit,
      js: [
        'src/contentScript/jquery.js',
        'src/contentScript/index.ts',
      ],
      css: omit,
      run_at: 'document_start',
    },
  ],
sakibul-islam commented 3 months ago

Try importing jQuery directly in your index.ts

Install jQuery

yarn add jquery

index.ts

import $ from "jquery";
Kain-90 commented 3 months ago

Try importing jQuery directly in your index.ts

Install jQuery

yarn add jquery

index.ts

import $ from "jquery";

Thank you for your advice. I haven't tested it yet, because jquery.js is just one example. If otherA.js contains a function A and otherB.js contains a function B, how should I call these methods A and B in index.ts?

sakibul-islam commented 3 months ago

Try importing jQuery directly in your index.ts

Install jQuery

yarn add jquery

index.ts

import $ from "jquery";

Thank you for your advice. I haven't tested it yet, because jquery.js is just one example. If otherA.js contains a function A and otherB.js contains a function B, how should I call these methods A and B in index.ts?

Check Modules documentation: