Chrome 扩展弹出窗口的非阻塞警报

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

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

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

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

   if (someCondition) {
       chrome.runtime.sendMessage({action: "alert", text: "STOP!"});
   }
   
   chrome.runtime.onMessage.addListener(function(msg) {
       if (msg.action == "alert-response") {
           doSomething(msg.response);
       }
   });
   

2. 所有打开的弹出窗口都会收到该消息，活动的弹出窗口会显示警报 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"
               }
           });
       }
   }