Chrome extension, using localStorage to save ip, tabid, serverfingerprint per tab

I should mention up front I'm new to code/stackoverflow so my apologies if this question doesn't makes sense. I'm beyond stumped, I'm trying to build a chrome extension that saves the ip address, url and a server finger print. The serverfingerprint is a field that lives within the response headers. Using my background.js and localStorage I can save this information开发者_如何学Python and then display it in my pop up window. This is all fine and dandy except I can't figure out how to save it on a per tab basis, aka... if I have 5 tabs open, I'd like to click my extension and have it display the url for each corresponding tab. example: click tab4 and shows tab4's url, then click tab2 and it shows the url of tab2.

the below code works except for it doesn't tie to the tabId so it's not exactly ideal. Any ideas of where to start researching would be very appreciated!

what i've done thus far: background.js:

chrome.experimental.webRequest.onCompleted.addListener(function (details)
{
    var headers = details.responseHeaders;
    localStorage['ip'] = details.ip;
    localStorage['url'] = details.url;

    for (var i = 0, length = headers.length; i < length; i++) 
    {
        var header = headers[i];
        if (header.name == 'X-Server-Fingerprint') 
        {
            localStorage['XServerFingerprint'] = header.value.toString();
            break;
        }
    }
 },{'urls': ['http://www.someurl.com/*']},['responseHeaders']);

popup.js:

document.getElementById('url').innerText = localStorage['url'];
document.getElementById('ip').innerText = localStorage['ip'];
document.getElementById('XServerFingerPrint').innerText = localStorage['XServerFingerPrint'];

As each tab has unique id (until browser restart), you can use it to identify tabs.

You are probably interested only in current tabs, which makes things simpler as you don't need localStorage for this (which persists data between browser restarts). Just use background page's namespace to store data about all tabs:

// background.js
var tabs = {}; //all tab data 
chrome.experimental.webRequest.onCompleted.addListener(function (details)
{
    var tabInfo = {};
    tabInfo["ip"] = ...;
    tabInfo["url"] = ...;
    tabInfo["XServerFingerprint"] = ...;

    tabs[details.tabId] = tabInfo;
}

// popup.js
chrome.tabs.getSelected(null, function(tab){ 
    var tabInfo = chrome.extension.getBackgroundPage().tabs[tab.id]; // get from bg page

    document.getElementById('url').innerText = tabInfo['url'];
    document.getElementById('ip').innerText = tabInfo['ip'];
    document.getElementById('XServerFingerPrint').innerText = tabInfo['XServerFingerPrint'];
});

If you do need localStorage then you can convert tabs object to json string and store it there.

Ok, so I've sorted out my issues! Well the ones concerning chrome extensions haha, which appears to be pretty much exactly what Serg is saying (thx Serg!!) I wrote it a bit different tho.

// background.js

chrome.experimental.webRequest.onCompleted.addListener(function (details)
{
  var headers = details.responseHeaders;
  var tabId = details.tabId;
  var ip  = details.ip;
  var url = details.url;

  for (var i = 0, length = headers.length; i < length; i++) {
    var header = headers[i];
           //custom field in response headers from my site
    if (header.name == 'X-Server-Fingerprint') {
      var XServerFingerprint = header.value.toString();
      var data = {
                ip: ip,
                url: url,
                fingerprint: XServerFingerprint
      }
      //store it
      localStorage[tabId] = JSON.stringify(data);
            break;
    }
  }
},{'urls': ['http://www.corbisimages.com/*']},['responseHeaders']);
}

// and then on my popup.js

chrome.tabs.getSelected(null, function(tab) {
    var parseData = JSON.parse(localStorage[tab.id]);
    document.getElementById('XServerFingerprint').innerText = parseData.fingerprint;
    document.getElementById('url').innerText = parseData.url;
    document.getElementById('ip').innerText = parseData.ip;
});