如何从上下文菜单中显示模态弹出窗口？

Question

如何从上下文菜单中显示模态对话框？

我可以在上下文菜单中显示一个新窗口,该窗口在自己的选项卡中打开:

var menuItem = {
    "id": "rateMenu",
    "title": "Rate Item",
    "contexts": ["all"],
}

chrome.contextMenus.create(menuItem);

chrome.contextMenus.onClicked.addListener(function (clickData) {
    open('index.html');
});

我也知道如何在页面本身上使用bootstrap(例如)显示模态对话框:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
})

在这种特殊情况下,我想显示一个模态对话框,除非按下"关闭"按钮,否则无法关闭.

但是,我不知道如何直接从上下文菜单中显示模态弹出窗口.

有谁知道如何实现这一目标？

谢谢!

Answer 1

我做了同样的事情.只是content script用来表现modal.

示例:当用户单击上下文菜单项时,向内容脚本发送消息以让它知道它以便它应该打开一个模态.

background.js:

chrome.contextMenus.onClicked.addListener(function (clickData) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
   chrome.tabs.sendMessage(tabs[0].id, {type: "openModal"});
  });
});

contentscript.js:

 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
            switch (request.type){
                case "openModal":
                    $('#myModal').modal({
                       backdrop: 'static',
                       keyboard: false
                    });
                    break;  
});

确保包括在必要的CSS和JS文件content_scripts中manifest.json

"content_scripts": [
    {
      "matches": ["https://*/*"],
      "css":["bootstrap.min.css"],
      "js":["jquery.min.js","bootstrap.min.js","contentscript.js"],
      "run_at":"document_end"
    }
  ]

注意:使用bootstrap.min.css可能与页面UI冲突,它可能会更改它.要避免这种情况,请将您的模态和所需的js和css文件移动到单独的html文件中(modal.html).然后iframe使用内容脚本将您注入选项卡.

var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL("modal.html");
iframe.frameBorder = 0;
iframe.id = "myFrame";
$(iframe).hide();//necessary otherwise frame will be visible
$(iframe).appendTo("body");

请记住添加modal.html和将在内部使用的所有CSS和JS文件modal.html一样modal.js,bootstrap.min.js,bootstrap.min.css下web_accessible_resources:

web_accessible_resources": ["modal.html","modal.js","bootstrap.min.js","bootstrap.min.css"]

现在您可以隐藏或显示您的iframe使用内容脚本,但是为了显示和隐藏模态,它只能从内部完成iframe.所以,你会需要通过从消息background来iframe以示对contentscript会为工作上面提到的modal.The代码iframe也.

如果您想要隐藏iframe,只需将消息发送iframe至contentscipt使用window.parent.postMessage().

示例:

modal.js:

 window.parent.postMessage({ type: "hideFrame" }, "*");

contentscript.js:

    window.addEventListener("message", function(event) {
         if (event.data.type == "hideFrame") {
              $("#myFrame").hide();
          }
});