在chrome扩展中创建HTML对话框弹出窗口

Question

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

我知道如何使用JavaScript来显示现有的HTML对话框,正如这个答案所解释的那样,但我不知道如何在DOM中插入一个.我不想使用JavaScript的alert功能,因为这会打开一个单独的窗口.当事件触发chrome扩展中的JavaScript函数时,有没有办法创建和显示HTML模式对话框？

Answer 1

您应该可以使用javascript作为您链接的答案,通过内容脚本注入您的javascript,随时打开该对话框.Google在此处提供了相关文档: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转换器.