Javascript 使用chrome扩展在任何网站页面上显示引导模式

我正在开发一个chrome扩展，我的要求是在当前选项卡中显示覆盖网站的引导表单。但它的行为是相当有缺陷的。有时它可以工作，但有时它无法点击

我正在使用chrome扩展的Background.js页面注入引导库和模式弹出代码。因此，只要插入modal.js（模态弹出窗口），就会显示弹出窗口

根据用例，我想在用户单击popup.html上的按钮时显示弹出窗口，当用户单击浏览器操作按钮时显示弹出窗口

这是注入库和modal.js的代码

chrome.tabs.insertCSS(null, {
        file: "css/bootstrap.min.css"
        }, function() {
            if (chrome.extension.lastError) {
                chrome.extension.lastError.message;
                alert("We are sorry, but chrome reserved pages (new tab, extensions, etc) and chrome web store are not supported. Please try another page.")
            }

             chrome.tabs.executeScript(null, {
                file: "js/lib/jquery.js"
            });

            chrome.tabs.executeScript(null, {
                file: "js/lib/bootstrap.min.js"
            });

            chrome.tabs.executeScript(null, {
                file: "js/modal.js"
            });
        });

还有一个信息，这个问题只有当我在其他网站上执行时才会出现。当在chrome新标签页上运行时，此弹出窗口显示良好

有谁能告诉我我做错了什么，或者有什么更好的方法吗

试试这个：

在manifest.json中

"permissions": ["tabs", "activeTab", "http://*/*", "https://*/*"],

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["css/bootstrap.min.css", "css/estilo.css"],
      "js": ["js/jquery.min.js", "js/bootstrap.min.js", "js/script.js", "js/funcion.js"],
      "run_at": "document_end"
    }
  ],

在function.js中

$("#modal1").modal("show");

---

modal1是一个附加到页面主体的var中的模态构建

请选择主题中的问题：包含一个复制问题的变量。对于Chrome扩展或Firefox WebExtensions，这几乎总是意味着包括manifest.json和一些背景、内容和/或弹出脚本/HTML。寻求调试帮助的问题（“为什么这段代码没有按我想要的方式工作？”）必须包括：（1）所需的行为，（2）特定的问题或错误，（3）在问题本身中重现它所需的最短代码。另请参阅：，和。谢谢@Makyen的建议。我将编辑这个问题

$("#modal1").modal("show");