Question

我遇到一种情况，我需要通过Chrome扩展程序点击多个ajax请求，并在弹出HTML扩展程序的html中显示成功。

我将在数组中循环url（s）列表并在ajax请求中执行。这很有效，直到我的chrome扩展程序打开。但是，只要我点击外部或更改选项卡，扩展程序就会关闭，脚本会终止。

我的扩展程序中有一个按钮。当我点击它时，我需要在后台点击所有ajax，当我打开扩展时（无论多少次），它必须显示完成了多少请求（基本上是ajax的成功结果）。

有人可以帮我解决。

Answer 1

按照设计，弹出窗口每次失去焦点时都会被销毁（而不是隐藏），这会导致脚本终止。

另一方面，背景页面（在某种程度上，事件页面）被设计为＆＃34;始终存在＆＃34;并进行冗长的处理或永远在线的事件处理。

因此，您需要两个：执行处理的后台页面和显示UI的弹出窗口。

这个想法如下：

后台页面有一个消息监听器，可以：
- 启动AJAX处理
- 按要求返回当前进度
每次进度更改时，后台页面都会发出消息
弹出页面在打开时会从后台请求当前进度
之后，只要它被打开，它就会从后台收听进度消息。

这样的事情：

+--------------+   message: request   +--------------+    time
|  Background  |       progress       |    Popup     |      |
|     page     | <------------------- |    window    |     \|/
|              |   respond: stopped   |              |
|              | -------------------> | (  display ) |
|              |                      | (   start  ) |
|              |                      | (  button  ) |
|              |                      |              |
|              |       message:       |              |
|              |      start AJAX      | (   user   ) |
|  ( starts )  | <------------------- | (  clicks  ) |
|  (  AJAX  )  |                      |              |
|              |                      |              |
      ...                                   ...
|              |                      |              |
|  (  some  )  |       message:       |              |
|  (  AJAX  )  |     progress N/M     | (  update  ) |
|  (  done  )  | -------------------> | ( progress ) |
|              |                      | (   N/M    ) |
|              |                      +--------------+
|              |                        (  popup   )
|  (  some  )  |       message:         (  closes  )
|  (  AJAX  )  |    progress N+1/M    
|  (  done  )  | ------ ???          (nothing listens)
|              |
|              |   message: request   +--------------+
|  Background  |       progress       |    Popup     |
|     page     | <------------------- |    window    |
|              |   respond: N+1/M     |              |
|              | -------------------> | (  display ) |
|              |                      | (  progress) |
|              |                      | (   N+1/M  ) |   
|  (  some  )  |       message:       |              |
|  (  AJAX  )  |    progress N+2/M    | (  update  ) |
|  (  done  )  | -------------------> | ( progress ) |  
|              |                      | (   N+2/M  ) |
      ...                                    ...

后台页面的示例实现：

var done = 0;
var total = 0;
var processing = false;

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  switch (message.type) {
    case "queryProgress":
      sendResponse({
        processing: processing,
        total: total,
        done: done
      });
      break;
    case "startProcessing":     // Assumes the list of AJAX to process
      doAllAJAX(message.list);  //   is passed in the message
      break;
  }
});

function doAllAJAX(list) {
  total = list.length;
  done = 0;
  processing = true;
  /* Initiate AJAX processing here for the list with onAJAXSuccess as a callback */
}

function onAJAXSuccess() {
  done++;
  if (done == total) { processing = false; }
  chrome.runtime.sendMessage({
    type: "progressReport",
    processing: processing,
    total: total,
    done: done
  });
}

AJAX的实现，错误处理和弹出窗口留给读者练习。

在Chrome扩展程序中在后台执行多个ajax请求

1 个答案: