Question

I have wrote chome extension, that processing all requests in the browser:

manifest.json:

{
  "name": "MyExtension",
  "version": "0.1",
  "description": "All requests are under control!",
   "permissions": [
        "tabs",
        "webRequest",
        "http://*/*"
  ],
  "background": {
    "scripts": ["background.js"]
  },

  "manifest_version": 2
}

background.js:

chrome.webRequest.onCompleted.addListener(
  function(details) {
  console.log(details);
  console.log(chrome.tabs.getCurrent());

  },
   {urls: ["http://*/*"],
   types: ["image"]});

But now, I want to know, which page (tab?) has created this request?

for example:

Request 1 - generated by google.com page,
Request 2 - generated by stackoverflow.com.

How can I solve this task?

Answer 1

The following code will fetch tab\page details Who has generated Web Request.

onCompleted Listener has a tabId property which identifies tab, and you can retrieve all details of the tab.

chrome.webRequest.onCompleted.addListener(

function (details) {
    chrome.tabs.get(details.tabId, function (tab) {
        console.log("This  " + JSON.stringify(details) + " Web request is from this " + tab.id + " tab and its details are" + JSON.stringify(tab));
    });
}, {
    urls: ["http://*/*"],
    types: ["image"]
});

Sample Output

This  {"frameId":0,"fromCache":true,"ip":"74.125.236.63","method":"GET","parentFrameId":-1,"requestId":"563","statusCode":200,"statusLine":"HTTP/1.1 200 OK","tabId":64,"timeStamp":1359389270317.956,"type":"image","url":"http://www.google.co.in/images/srpr/logo3w.png"} Web request is from this 64 tab and its details are{"active":true,"highlighted":true,"id":64,"incognito":false,"index":4,"pinned":false,"selected":true,"status":"loading","title":"Google","url":"http://www.google.co.in/","windowId":1}