Question

我正在制作Chrome扩展程序，为此我需要在弹出窗口中添加一些非阻止警报。定期警报暂停javascript代码执行，客户端不希望这样。我尝试使用jQuery的UI对话框但是当我单击“确定”按钮关闭它时，弹出窗口失去焦点并关闭。有关如何在弹出窗口中添加持久性或如何从弹出窗口创建非阻塞警报的任何建议？

更新：问题是content.js是创建警报的人。因此，当我点击它时，弹出窗口失去焦点并关闭。有什么方法可以创建附加到popup.html而不是当前标签中加载的页面的警报吗？

Answer 1

只需在弹出窗口中显示对话框，因为它只能在其严格限制的范围内显示内容（最大750px或800px），并且您无法从外部“附加”某些内容。

从您的内容脚本发送消息并等待侦听器中的响应：

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为按钮：

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扩展程序弹出窗口的非阻止警报

1 个答案: