javascript - 捆绑的 Webextension 看不到 JQuery
问题描述
我正在为 Chrome 创建一个 webextension,以下代码会导致错误:
$(function () {
$('[data-toggle="popover"]').popover();
// ...
});
Chrome 抱怨说:
未捕获的类型错误:jquery_1.default(...).popover 不是函数
看起来引导程序根本不可用。我知道脚本的导入顺序很重要:Chrome 扩展“$ is not defined”错误
所以我确保在我的代码之前包含引导程序:
"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。
解决方案
我在使用 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
希望这会有所帮助 - 如果没有,请告诉我
推荐阅读
- azure - 如何将变量传递给 Azure 数据工厂 REST url 的查询
- karate - 空手道 - 预期 JSON 模式中的自定义断言
- jestjs - 如何设置 redux 包装组件的状态?
- python - 内存和 Dask 分布式问题:加载到内存的数据大小是数据大小的数倍,并且不会发生数据溢出
- php - 我如何将此行限制为小数点后 2 位 Magento 1.9
- android - 单击android后退按钮时如何在上一页重新初始化颤振动画?
- java - HTTPS 响应状态码能否在 Spring 集成中的其他类中可用
- javascript - 静音角色在静音用户离开时保存给静音用户
- node.js - Angular9 http.get() 不能正常工作
- c# - 如果字典使用 LINQ,如何打印空值