javascript - chrome 扩展弹出窗口的非阻塞警报

Question

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

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

Answer 1

只需在弹出窗口中显示对话框，因为它只能显示其严格限制范围内的内容(最大 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"
               }
           });
       }
   }