在Chrome扩展中创建HTML对话框弹出

我正在使用Chrome扩展，当用户点击键盘快捷键时，会在屏幕中心弹出一个对话框。然后它将使用JavaScript异步加载MediaWiki API的内容。但是我很难理解如何使用JavaScript创建和显示对话框。我不想使用Chrome浏览器html-popup浏览器操作，因为它显示在屏幕的一角。在Chrome扩展中创建HTML对话框弹出

我知道如何使用JavaScript来显示现有的HTML对话框，如this answer explains，但我不知道如何在DOM中插入一个。我不想使用JavaScript的alert函数，因为这会打开一个单独的窗口。那么当事件触发Chrome扩展中的JavaScript函数时，是否有创建和显示HTML模式对话框的方法？

来源

2015-08-20 Jonathan Cox

您的扩展程序是否需要访问站点，不包括注入对话框？ –

我不需要访问用户当前所在的站点，我只想使用'getSelection（）。toString（）'获取当前突出显示的文本。但是，我确实需要向MediaWiki API发出跨域请求。据我了解，我可以在Chrome扩展清单中声明一个许可，以允许跨站点域请求，尽管通常不允许使用JS。是对的吗？ –

您应该可以使用JavaScript链接来打开该对话框，只要通过内容脚本注入JavaScript即可。谷歌有这方面的文档：https://developer.chrome.com/extensions/content_scripts

基本上，一个内容脚本运行在你告诉它的任何页面上。所以你可以告诉它在所有网页上运行（通过清单配置）。这个内容脚本会添加你的监听器，然后将你的对话框追加到body tage（或者身体通常安全的地方）。

的代码看起来是这样的：

$(document).on('keypress', 'body', function(e){ 
    var code = e.keyCode || e.which; 

    if(code = /*whatever, key shortcut listener*/) { 
     document.body.innerHTML += '<dialog>This is a dialog.<br><button>Close</button></dialog>'; 
     var dialog = document.querySelector("dialog") 
     dialog.querySelector("button").addEventListener("click", function() { 
      dialog.close() 
     }) 
     dialog.showModal() 
    } 
});

您可能需要添加安全代码来检查你的身体标记;它在正常页面上，但专业页面可能会出错（如chrome：// *）。

只要这个运行在你的内容脚本上，并且你的内容脚本运行在你想要的页面上，你就可以用这种方式运行你想要的任何监听器/ dom转换器。

来源

2015-08-20 11:02:29 Brian

感谢您的回答。一些后续问题：'$（document）.on（）'函数（'body'）中的第二个参数是做什么的？删除它可以吗？另外，不仅仅是Firefox的兼容性必需的第2行中的“哪个”？ Chrome只能使用keyCode正常工作，对吧？ –

我没有真正关注事件处理程序，从你的问题我假设你有这部分想出来，只是演示如何添加一个对话框到身体，并使用处理程序为例。我在那里的处理程序只是在听身体按键。你必须写任何你想听的具体事件。是的，keyCode应该在Chrome中工作。 – Brian

您不需要添加公共API的权限。如果网站不允许跨源请求，则只需添加权限即可。

此外，通过内容脚本使用Web侦听器为您的键盘快捷方式添加侦听器不是一个好的解决方案，因为它需要权限警告，并且通常效率不高。相反，您应该使用Chrome的commands API与activetab。您的扩展程序仅在用户点击键盘快捷方式时启动，用户可以通过chrome：// extensions底部的快捷方式链接自定义快捷方式。

为此，请将"permissions": [ "activeTab" ]添加到您的清单。当用户点击这些按键

"commands": { "showcontentdialog": { "suggested_key": { "default": "Ctrl+Shift+Y" }, "description": "show content dialog" } }

接下来，设置你的背景页面监听器和inject您的内容脚本：添加您的组合键

chrome.commands.onCommand.addListener(function(command) { 
    if(command.name == "showcontentdialog") { 
    chrome.tabs.executeScript({ file: "main.js" }) 
    } 
})

此外，你应该使用，而不是设置innerHTML的appendChild，像这样：

var dialog = document.createElement("dialog") 
dialog.textContent = "This is a dialog" 
var button = document.createElement("button") 
button.textContent = "Close" 
dialog.appendChild(button) 
button.addEventListener("click", function() { 
    dialog.close() 
}) 
document.body.appendChild(dialog) 
dialog.showModal()

来源

2015-08-21 21:57:20

在Chrome扩展中创建HTML对话框弹出

回答

相关问题