在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對話框彈出

回答

相關問題