我试图创建一个Chrome扩展，我有一个按钮出现在谷歌的搜索结果页面上，并在按钮上悬停，一个模态出现。
我可以让模态开始出现（背景变暗），但在实际模态框显示之前出现JavaScript错误。
错误为：
未捕获的类型错误：非法调用

return Element.prototype.querySelector.call(element, selector);

任何帮助都是非常感谢的。提前感谢！

清单.json

{
    "manifest_version": 3,
    "name": "Button Modal",
    "description": "Button Modal",
    "version": "0.0.1",
    "icons": {
        "16": "./icons/icon-16x16.png",
        "36": "./icons/icon-36x36.png",
        "48": "./icons/icon-48x48.png",
        "120": "./icons/icon-120x120.png"
    },
    "content_scripts": [
        {
            "matches": ["https://*.google.com/*", "https://google.com/*"],
            "js": ["js/jquery-3.6.1.min.js", "js/bootstrap.bundle.js", "content-script.js"],
            "css": ["css/bootstrap.css", "css/content.css"],
            "run_at": "document_end"
        }
    ],
    "action": {
        "default_popup": "popup.html",
        "default_title": "Popup title"
    },
    "permissions": [
        "tabs",
        "storage"
    ]
}

内容脚本.js

$(document).ready(function(){
    $(".btn-sm").hover(function(){
        $("#exampleModalToggle").modal("show");
    });
});

//add modal after opening body tag
$("body").after("<div id='exampleModalToggle' className='modal fade'><div className='modal-dialog'><div className='modal-content'><div className='modal-header'><h5 className='modal-title'>Modal Title</h5><button type='button' className='close' data-dismiss='modal'>&times;</button></div><div className='modal-body'><p>This is a simple Bootstrap modal. Click the 'Cancel button', 'cross icon' or 'dark gray area' to close or hide the modal.</p></div></div></div></div>");

$("#result-stats nobr").after(" <button type='button' class='btn btn-warning btn-sm'>BUTTON</button>");