вставить bootstrap поповер на amazon.com

Question

Я пишу простое расширение chrome и хочу использовать свой контент. js скрипт для вставки простого bootstrap всплывающего окна на странице продукта 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 TypeError: Для подсказок Bootstrap требуется Popper. js 'или' $ (popper) не является функцией '. Я осматривался и видел предположения, что ошибка может быть связана с несколькими версиями jquery в пространстве имен страницы (amazon) и что я не должен использовать конфликтную версию jquery, но это не сработало. Я также попытался поиграть с порядком импорта, но это не помогло. Указанные файлы являются локальными копиями кода bootstrap. Спасибо!

Answer 1

когда вы вводите скрипты на страницу, URL-адрес sr c должен быть связан с вашим расширением. но, по-вашему, он на самом деле связан с путем к веб-странице Amazon, поэтому он не работает.

Сделайте это в вашей части 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();