Javascript 在amazon.com上插入引导popover

我正在编写一个简单的chrome扩展，我想使用我的content.js脚本在amazon.com产品页面上插入一个简单的bootstrap popover

我在content.js中执行以下操作，以插入popover的脚本并切换它。我知道这段代码很有用，因为当我在使用扩展名创建的弹出窗口中运行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();
})

$（文档）.ready（函数（）{
var title=document.getElementById（'productTitle'）；
htmlToInsert=''
标题.insertAdjacentHTML（'afterend'，HTMLInsert）；
$（'[data toggle=“popover”]'）。popover（）；
})

这给了我“UncaughtTypeError:Bootstrap的工具提示需要Popper.js”或“$（Popper）不是函数”。我四处查看，看到一些建议，认为这个错误可能与页面名称空间（amazon）中的多个jquery版本有关，我应该使用没有冲突的jquery版本，但这不起作用。我还试着玩弄进口订单，但这并没有解决问题。 引用的文件是引导代码的本地副本。

---

谢谢

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

在您的

manifest.json

，

content\u脚本

部分中执行此操作（为了简单起见，我缩短了文件名，将其更改为您的实际文件名）：

然后您可以在

content.js中执行此操作：

$（“body”）.append（``）
$（'[data toggle=“popover”]'）。popover（）；
well popper.js是一个用于显示工具提示和其他内容的库引导程序。你试过把它添加到你的代码中吗？我想是的——这就是为什么我在htmlToInsert变量中添加了它
"content_scripts":[{
"js":["jquery.js","Popper.js", "bootstrap.js", "content.js"],
"css":["bootstrap.css"]
}]