捆绑的Webextension没有看到JQuery

时间:2018-10-25 13:39:00

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

我正在为Chrome创建一个网络扩展程序,以下代码会导致错误:

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

Chrome浏览器抱怨:

  

未捕获的TypeError:jquery_1.default(...)。popover不是函数

看来引导程序根本不可用。我知道脚本的导入顺序很重要: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"
        ]
    }
],

这些脚本路径有效。

编辑:

对不起,我弄乱了该错误的文档。 显然,只有在使用打包机(例如包裹)时才会发生。 我仅使用包裹进行了测试,但我相信任何捆绑管理器(例如webpack或browserify)都将发生此问题。

2 个答案:

答案 0 :(得分:2)

我在使用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

希望这会有所帮助-如果不可以,请告诉我

答案 1 :(得分:1)

当使用打包程序(例如包裹)处理依赖项时,jQuery在具有CommonJS模块的环境中执行。

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

解决方案是手动添加它,以下是打字稿代码。在JS中,您不需要强制转换为any

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