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

Question

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

我知道如何使用 JavaScript 来显示现有的 HTML 对话框，如，但我不知道如何将其插入 DOM ].我不想使用 JavaScript 的 alert 函数，因为它会打开一个单独的 window。那么有没有一种方法可以在事件触发 chrome 扩展中的 JavaScript 函数时创建并显示 HTML 模态对话框？

Answer 1

您应该能够使用 javascript 作为您链接的答案，以便随时通过内容脚本注入 javascript 打开该对话框。 Google 此处有相关文档：https://developer.chrome.com/extensions/content_scripts

基本上，内容脚本运行位于您指定的任何页面上。所以你可以在所有网页上告诉它运行（通过清单配置）。此内容脚本将添加您的侦听器，然后将您的对话框附加到 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://*）。

只要这个运行在您的内容脚本上，并且您的内容脚本运行在您想要的页面上，您就可以运行任何 listeners/dom 改变你想要这样。

Answer 2

您不需要为 public api 添加权限。如果网站不允许跨源请求，您只需要添加权限。

此外，通过内容脚本使用 Web 侦听器为键盘快捷方式添加侦听器并不是一个好的解决方案，因为它需要权限警告，而且通常效率不高。相反，您应该使用 Chrome 的 commands api with activetab。您的扩展只会在用户点击键盘快捷键时启动，用户可以通过 chrome://extensions.

底部的快捷键 link 自定义快捷键

为此，请将 "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" })
  }
})

此外，您应该使用 appendChild 而不是设置 innerHTML，如下所示：

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()

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

Creating an HTML dialog pop-up in chrome extension

html

javascript

google-chrome

popup

google-chrome-extension