在 amazon.com 上插入引导弹出窗口答案

【问题标题】：insert bootstrap popover on amazon.com在 amazon.com 上插入引导弹出窗口
【发布时间】：2020-08-17 11:16:23
【问题描述】：

我正在编写一个简单的 chrome 扩展程序，我想使用我的 content.js 脚本在 amazon.com 产品页面上插入一个简单的引导弹出窗口。

我在 content.js 中执行以下操作来为弹出框插入脚本并切换它。我知道这段代码是有效的，因为当我在使用扩展名创建的弹出窗口中运行 html 和 jquery 时，它会创建一个有效的弹出窗口：

$(document).ready(function(){
var title = document.getElementById('productTitle');
 htmlToInsert = '<link rel="stylesheet" type="text/css" href="bootstrap-4.3.1-dist/css/bootstrap.min.css"> <script src="jquery-3.4.1.js"></script> <script src="Popper.js"></script> <script src="bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js"></script><a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>'
title.insertAdjacentHTML('afterend', htmlToInsert);
$('[data-toggle="popover"]').popover();
})

这给了我“未捕获的 TypeError：Bootstrap 的工具提示需要 Popper.js”或“$(popper) 不是函数”。我一直在环顾四周，看到错误可能与页面（亚马逊）命名空间中的多个 jquery 版本有关，并且我应该使用没有冲突版本的 jquery，但这没有用。我也尝试过使用导入的顺序，但这并没有解决它。引用的文件是引导代码的本地副本。谢谢！

【问题讨论】：

好吧 popper.js 是一个库引导程序依赖于显示工具提示和其他一些东西。您是否尝试将其添加到您的代码中？
我想是的---这就是为什么我在 htmlToInsert 变量中有

标签： javascript jquery google-chrome-extension bootstrap-4

【解决方案1】：

当您将脚本注入页面时，src URL 应该与您的扩展路径相关。但以你的方式，它实际上与亚马逊网页路径有关，这就是它不起作用的原因。

在您的manifest.json、content_scripts 部分执行此操作（为简单起见，我缩短了文件名，将它们更改为您的实际文件名）：

"content_scripts":[{
"js":["jquery.js","Popper.js", "bootstrap.js", "content.js"],
"css":["bootstrap.css"]
}]

那么你可以在你的content.js:

$("body").append(`<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>`)

$('[data-toggle="popover"]').popover();

【讨论】：