How to install jQuery using extention-cli google chrome extention library

Question

So I tried installing jQuery using the library I mentioned (https://oss.mobilefirst.me/extension-cli/), and got the infamous $ not found error.

After researching this I verified that Webpack is the culprit.

The answer for this is here: How to configure and use jQuery with webpack

However, I can't figure out how to implement this answer with this library.

The library appears to be using NPX to virtualize the nodejs enviroment and only from there can I run xt-build which somehow uses webpack behind the scenes to compile the sources accordingly.

I know jQuery works just fine if I manually add it in, so it's definitely messing it up because of the webpack part of xt-build.

How can I modify webpack so I can still say npm run start (which in turn calls npx xt-build) and give the needed provider plugin fix so jQuery can work?

My package.json file with relevant code is below:

"scripts": {
        "start": "xt-build -e dev -w",
        "start:firefox": "xt-build -e dev -p firefox -w",
        "build": "xt-build -e prod",
        "build:firefox": "xt-build -e prod -p firefox",
        "clean": "xt-clean",
        "docs": "xt-docs",
        "test": "xt-test",
        "coverage": "nyc --reporter=lcov npm run test",
        "sync": "xt-sync"
    },
    "babel": {
        "presets": [
            "@babel/preset-env"
        ]
    },
    "eslintIgnore": [
        "test/**/*"
    ],
    "devDependencies": {
        "extension-cli": "latest"
    },
    "xtdocs": {
        "source": {
            "include": [
                "README.md",
                "src"
            ]
        }
    },
    "xtbuild": {
        "js_bundles": [
            {
                "name": "background",
                "src": "./src/background/**/*.js"
            },
            {
                "name": "main",
                "src": [
                    "./src/content/main.js"
                ]
            },
            {
                "name": "injectors",
                "src": [
                    "./src/injectors/start.js"
                ]
            },
            {
                "name": "lib/jquery.min",
                "src": "./node_modules/jquery/dist/jquery.min.js"
            }
        ]
    },

Info on xtbuild here: https://oss.mobilefirst.me/extension-cli/03-xt-build/

More info about how it uses webpack here: https://oss.mobilefirst.me/extension-cli/03-xt-build-scripts/

Interesting Note:

There is a competitor library here: https://github.com/dutiyesh/chrome-extension-cli

And if you look at the file structure they give you access to the webpack.config.js file! Maybe I just need to switch to a different library?

Answer 1

Okay, I found a solution. Luckily the developer gave an option to copy files as is. I changed my xt-build config to this:

"xtbuild": {
        "js_bundles": [
            {
                "name": "background",
                "src": "./src/background/**/*.js"
            },
            {
                "name": "main",
                "src": [
                    "./src/content/main.js"
                ]
            },
            {
                "name": "injectors",
                "src": [
                    "./src/injectors/start.js"
                ]
            }
        ],
        "copyAsIs": [ "./node_modules/jquery/dist/jquery.min.js"]
    },

Note the copyAsIs command. Now unfortunatly I could not tell it I wanted it in a 'lib' folder, but I'll take what I can get. It will just drop this right into the root folder of the dist.