为什么chrome.webRequest.OnBeforeRequest在chrome.webNavigation.onBeforeNavigate之前启动？

Question

我正在尝试了解逻辑。我认为，onBeforeNavigate在我们听到任何请求之前，事件应该完成。但是我发现一个onBeforeRequest事件首先触发。这里的示例代码将演示我的意思。

test.js

function Test(url) {
  chrome.tabs.create({ url: "" }, function (tab) {
    chrome.webNavigation.onBeforeNavigate.addListener(function (details) {
      console.log("chrome.webNavigation.onBeforeNavigate hit on " + details.timeStamp);
    });

    chrome.webRequest.onBeforeRequest.addListener(function (details) {
      console.log("chrome.webRequest.onBeforeRequest hit on " + details.timeStamp);
    }, {
      tabId: tab.id,
      urls: ["<all_urls>"]
    });

    chrome.tabs.update(tab.id, {
      url: url
    });
  });
}
Test("http://www.steam.com");    // Simple url with only two requests

产生的控制台消息：

chrome.webRequest.onBeforeRequest hit on 1437083141916.896
chrome.webNavigation.onBeforeNavigate hit on 1437083141916.906
chrome.webRequest.onBeforeRequest hit on 1437083141940.385

manifest.json

{
  "background": {
    "persistent": true,
    "scripts": [
      "test.js"
    ]
  },
  "manifest_version": 2,
  "name": "Test",
  "permissions": [
    "<all_urls>",
    "webNavigation",
    "webRequest"
  ],
  "version": "1.0"
}

以下是这三个details事件按事件触发的顺序的视图：

// first chrome.webRequest.onBeforeRequest
{
  "frameId" : 0,
  "method" : "GET",
  "parentFrameId" : -1,
  "requestId" : "72285",
  "tabId" : 1312,
  "timeStamp" : 1437083141916.896,
  "type" : "main_frame",
  "url" : "http://www.steam.com/"
},

// chrome.webNavigation.onBeforeNavigate
{
  "frameId" : 0,
  "parentFrameId" : -1,
  "processId" : 3567,
  "tabId" : 1312,
  "timeStamp" : 1437083141916.906,
  "url" : "http://www.steam.com/"
},

// second chrome.webRequest.onBeforeRequest
{
  "frameId" : 0,
  "method" : "GET",
  "parentFrameId" : -1,
  "requestId" : "72286",
  "tabId" : 1312,
  "timeStamp" : 1437083141940.385,
  "type" : "image",
  "url" : "http://www.steam.com/images/pipebackwhite.gif"
}

Answer 1

如果您考虑何时触发每个事件，这应该是有道理的。

在甚至向服务器发出请求之前，都会触发OnBeforeRequest：

Fires when a request is about to occur. This event is sent before any TCP
connection is made and can be used to cancel or redirect requests.

另一方面，在页面导航到下一页之前会触发onBeforeNavigate：

Fired when a navigation is about to occur.

如果您考虑浏览器的工作方式，它将向服务器发出请求，并且如果它是典型的GET，则浏览器会基于标题导航到该请求的新页面。但是，这是在实际请求上发生的，并且在完全没有任何内容触发服务器之前，正在运行OnBeforeRequest。

因此，您发出了一个请求，api说：

• 发出请求后，在执行任何操作之前，我应该触发OnBeforeRequest
• 好的，我处理了这个请求，这使我导航/重定向，在此之前，我应该做OnBeforeNavigate