Bundled Webextension doesn't see JQuery

Question

I'm creating a webextension for Chrome, the following code leads to an error:

$(function () {
  $('[data-toggle="popover"]').popover();
  // ...
});

Chrome complains that:

Uncaught TypeError: jquery_1.default(...).popover is not a function

It looks like bootstrap is simply not available. I know that the import order for scripts is important: Chrome extension "$ is not defined" error

So I made sure that bootstrap is included before my code:

"content_scripts": [
    {
        "js": [
            "assets/jquery/dist/jquery.min.js",
            "assets/popper.js/dist/popper.min.js",
            "assets/bootstrap/dist/js/bootstrap.min.js",
            "content/index.js"
        ],
        "css": [
            "assets/css/extra.css",
            "assets/bootstrap/dist/css/bootstrap.min.css"
        ]
    }
],

These script paths are valid.

EDIT:

I'm sorry, I messed up the documentation of this bug. Apparently, it only happens when I use a bundler, such as parcel. I only tested with parcel, but I believe that this problem would occur with any bundling manager, such as webpack or browserify.

Answer 1

I had the same problems using Bootstrap 4, it worked fine on Bootstrap v.3.3.7, but I could not get it working, eventually however I did. This is what I did:

CDN order:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

example function:

$(function () {
    $('[data-toggle="popover"]').popover()
})

example HTML:

<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Bottom</a>

It might be worth making sure that you have all of the latest versions of Bootstrap/jQuery/Popper etc, and place them in the same order as above:

bootstrap.css
jquery-3.3.1-slim.min.js
popper.js
bootstrap.min.js

Hope this helps - let me know if it doesn't

Answer 2

When processing the dependencies with a bundler, such as parcel, jQuery is executed in an environment with CommonJS modules.

In such a setup, jQuery doesn't add itself to the global window object. However, bootstrap expects the $ function and jQuery on window .

The solution is to add it manually, the following is typescript code. In JS you don't need the cast to any

import $ from "jquery";
(<any>window).jQuery=$;
(<any>window).$=$;
import "bootstrap";