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;  
});

确保在content_scripts

中的manifest.json下包含必要的css和js文件

"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以及modal.html内使用的所有css和js文件，例如modal.js，bootstrap.min.js，{{1在bootstrap.min.css：

下

web_accessible_resources

现在，您可以使用内容脚本隐藏或显示web_accessible_resources": ["modal.html","modal.js","bootstrap.min.js","bootstrap.min.css"]，但要显示和隐藏模态，只能在iframe内部完成。因此，您需要将消息从iframe传递到background以显示模式。上面提到的contentcript代码也适用于iframe。

如果您想要隐藏iframe，只需使用iframe从iframe向contentscipt发送消息。

实施例：

<强> modal.js ：

window.parent.postMessage()

<强> contentscript.js ：

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

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

1 个答案: