文章/答案/技术大牛

发布

社区首页 >问答首页 >在amazon.com上插入引导弹出

问在amazon.com上插入引导弹出
EN

Stack Overflow用户

提问于 2020-05-03 00:59:10

回答 1查看 111关注 0票数 0

我正在编写一个简单的铬扩展，我想使用我的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();
})

这给了我“Uncaught:引导工具提示需要Popper.js”或者“$(Popper)不是一个函数”。我一直在寻找并看到一些建议，即错误可能与页面名称空间(amazon)中的多个jquery版本有关，并且我不应该使用与jquery冲突的版本，但这是行不通的。我也试着按进口顺序来玩，但这并没有解决问题。引用的文件是引导代码的本地副本。谢谢!

javascript

jquery

google-chrome-extension

bootstrap-4

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-03 02:15:43

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61568348

复制

相似问题

问在amazon.com上插入引导弹出
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在amazon.com上插入引导弹出EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在amazon.com上插入引导弹出
EN