我正在开发一个 Chrome 扩展程序,当用户点击键盘快捷键时,它会在屏幕中央弹出一个对话框。然后它将使用 JavaScript 从 MediaWiki API 异步加载内容。但是我很难弄清楚如何使用 JavaScript 创建和显示对话框。我不想使用 Chrome html-popup
浏览器操作,因为它出现在屏幕的一 Angular 。
我知道如何使用 JavaScript 显示现有的 HTML 对话框,如 this answer explains ,但我不知道如何将一个插入到 DOM 中。我不想使用 JavaScript 的 alert
函数,因为它会打开一个单独的窗口。那么有没有一种方法可以在事件触发 Chrome 扩展中的 JavaScript 函数时创建和显示 HTML 模式对话框?
最佳答案
您应该能够使用 javascript 作为您链接的答案,以通过内容脚本注入(inject) javascript 来随时打开该对话框。 Google 在此处提供了相关文档:https://developer.chrome.com/extensions/content_scripts
基本上,内容脚本会在您指定的任何页面上运行。所以你可以告诉它在所有网页上运行(通过 list 配置)。此内容脚本将添加您的监听器,然后将您的对话附加到 body 标签(或任何 body 通常是安全的地方)。
代码看起来像这样:
$(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()
}
});
您可能需要添加安全代码来检查您的 body 标签;它在普通页面上,但专业页面可能会出错(例如 chrome://*)。
只要它在您的内容脚本上运行,并且您的内容脚本在您想要的页面上运行,您就可以通过这种方式运行任何您想要的监听器/dom 转换器。
关于javascript - 在 chrome 扩展中创建 HTML 对话框弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32113357/