Расширение Chrome, использующее localStorage для сохранения ip, tabid, serverfingerprint для каждой вкладки

Question

Я должен упомянуть заранее, что я новичок в code / stackoverflow, поэтому мои извинения, если этот вопрос не имеет смысла.Я зашла в тупик, я пытаюсь создать расширение Chrome, которое сохраняет IP-адрес, URL и отпечаток пальца сервера.Отпечаток сервера - это поле, которое находится в заголовках ответа.Используя мои background.js и localStorage, я могу сохранить эту информацию и затем отобразить ее во всплывающем окне.Это все хорошо и прекрасно, за исключением того, что я не могу понять, как сохранить его для каждой вкладки, ака ... если у меня открыто 5 вкладок, я бы хотел щелкнуть свое расширение и отобразить URL для каждого из них.соответствующая вкладка.пример: нажмите tab4 и отобразите URL tab4, затем нажмите tab2 и отобразите URL tab2.

приведенный ниже код работает, за исключением того, что он не привязан к tabId, поэтому он не совсем идеален.Любые идеи о том, с чего начать исследование, будут очень благодарны!

что я сделал до сих пор: 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'];

Answer 1

Поскольку каждая вкладка имеет уникальный идентификатор (до перезапуска браузера), вы можете использовать ее для идентификации вкладок.

Вероятно, вас интересуют только текущие вкладки, что упрощает задачу, поскольку для этого вам не нужно localStorage (при этом данные сохраняются между перезапусками браузера). Просто используйте пространство имен фоновой страницы для хранения данных обо всех вкладках:

//background
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
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'];
});

Если вам нужен localStorage, вы можете преобразовать объект tabs в строку json и сохранить его там.

Answer 2

Хорошо, так что я разобрался со своими проблемами! Ну, те, что касаются расширений Chrome, ха-ха, который, кажется, в точности соответствует тому, что говорит Серг (спасибо Серг !!). Я написал это немного иначе.

background.htm

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;
});