Question

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

我正在使用chrome扩展的Background.js页面注入bootstrap库和Modal弹出代码。因此，只要注入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新标签页上运行时，此弹出窗口显示正常。

有人可以告诉我我做错的步骤或更好的方法吗？

Answer 1

试试这个：

在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"
    }
  ],

在script.js

中

$(document).ready(function(){
  $("#btn").click(function(){ 
    chrome.tabs.executeScript(null, { file: 'js/funcion.js' });    
    window.close();
  });
});

在funcion.js

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

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

使用chrome extension

1 个答案: