Chrome浏览器扩展程序弹出窗口的非阻止警报

问题描述：

我正在做一个chrome扩展程序，为此，我需要在弹出窗口中添加一些非阻塞警报.常规警报会暂停javascript代码执行，而客户端则不希望这样做.我尝试使用jQuery的UI对话框，但是当我单击确定"按钮将其关闭时，弹出窗口将失去焦点并关闭.关于如何在弹出窗口中添加持久性或如何从弹出窗口创建非阻塞警报的任何建议?

I'm making a chrome extension and for it I need to add in some non blocking alerts to the pop up window. Regular alerts pause the javascript code execution and the client does not want that. I tried using jQuery's UI Dialog box but when I click the "OK" button to close it, the popup window loses focus and closes as well. Any advice on how to either add persistence to the popup window or on how to create a non blocking alert from the popup?

更新:问题在于content.js是创建警报的代码.因此，当我单击它时，弹出窗口会失去焦点并关闭.有什么方法可以创建一个警报，该警报附加到popup.html而不是当前选项卡中加载的页面上?

UPDATE: The problem is that content.js is the one creating the alert. So when i click it the popup loses focus and closes. Is there any way that I can create an alert attached to popup.html instead of to the page loaded in the current tab?

答

在弹出窗口中仅显示对话框，因为该对话框只能在其严格限制的范围内显示内容(最大750px或800px)，并且您不能附加"外面有东西.

Simply display the dialog in the popup window because it can only display content inside its rigidly limited bounds (maximum 750px or 800px) and you can't "attach" something from outside.

从您的内容脚本发送一条消息，然后等待侦听器中的响应:

Send a message from your content script and wait for the reponse in a listener:

if (someCondition) {
    chrome.runtime.sendMessage({action: "alert", text: "STOP!"});
}

chrome.runtime.onMessage.addListener(function(msg) {
    if (msg.action == "alert-response") {
        doSomething(msg.response);
    }
});

所有打开的弹出窗口都会收到该消息，活动的弹出窗口会显示一个警报UI，当单击其任何按钮时，会将响应消息发送给内容脚本，并带有按钮的ID:

All open popups receive the message, the active one shows an alert UI and when any of its buttons are clicked a response message is sent to the content script with an id of the button:

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.action == "alert") {
        // if several popups are visible in different windows only one should respond
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            if (tabs[0].id == sender.tab.id) {
                showAlert(msg.text);
            }
        });
    }
});

function showAlert(text) {
    // show the nonblocking dialog
    ................................
    btnOK.addEventListener("click", buttonClick);
    btnCancel.addEventListener("click", buttonClick);
    function buttonClick(event) {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
                action: "alert-response",
                response: event.target.id // id of the clicked button: "ok", "cancel"
            }
        });
    }
}

Chrome浏览器扩展程序弹出窗口的非阻止警报

相关推荐