捆绑的 Webextension 看不到 JQuery答案

【问题标题】：Bundled Webextension doesn't see JQuery捆绑的 Webextension 看不到 JQuery
【发布时间】：2019-03-30 03:38:00
【问题描述】：

我正在为 Chrome 创建 web 扩展，以下代码导致错误：

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

Chrome 抱怨说：

未捕获的类型错误：jquery_1.default(...).popover 不是函数

看来 bootstrap 根本不可用。我知道脚本的导入顺序很重要：Chrome extension "$ is not defined" error

所以我确保在我的代码之前包含引导程序：

"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"
        ]
    }
],

这些脚本路径是有效的。

编辑：

对不起，我弄乱了这个错误的文档。显然，只有当我使用打包工具（例如包裹）时才会发生这种情况。我只用 parcel 进行了测试，但我相信任何捆绑管理器都会出现这个问题，例如 webpack 或 browserify。

【问题讨论】：

文档说“Popovers 需要工具提示插件作为依赖项”。

标签： javascript webpack google-chrome-extension browserify parceljs

【解决方案1】：

我在使用 Bootstrap 4 时遇到了同样的问题，它在 Bootstrap v.3.3.7 上运行良好，但我无法让它工作，但最终我做到了。这就是我所做的：

CDN 订单：

<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>

示例函数：

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

示例 HTML：

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

可能值得确保您拥有所有最新版本的 Bootstrap/jQuery/Popper 等，并按照与上述相同的顺序放置它们：

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

希望这有帮助 - 如果没有，请告诉我

【讨论】：

【解决方案2】：

当使用打包器（例如 parcel）处理依赖项时，jQuery 在具有 CommonJS 模块的环境中执行。

在这样的设置中，jQuery 不会将自己添加到全局 window 对象中。但是，引导程序需要 $ 函数和 jQuery 上的 window。

解决办法是手动添加，下面是typescript代码。在 JS 中，您不需要转换为 any

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

【讨论】：