javascript - 在 amazon.com 上插入 bootstrap popover

Question

我正在编写一个简单的 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();
})

这给了我“未捕获的类型错误:Bootstrap 的工具提示需要 Popper.js”或“$(popper) 不是函数”。我一直在环顾四周，看到一些建议，该错误可能与页面(亚马逊) namespace 中的多个版本的 jquery 有关，并且我应该使用无冲突版本的 jquery，但这不起作用。我也尝试过调整导入的顺序，但这并没有解决问题。 引用的文件是 Bootstrap 代码的本地副本。 谢谢!

Answer 1

当您将脚本注入(inject)页面时，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();