Chrome 扩展，使用 localStorage 保存每个选项卡的 ip、tabid、serverfingerprint

Question

我应该提前提到我是代码/stackoverflow 的新手，所以如果这个问题没有意义，我很抱歉。我很困惑，我正在尝试构建一个 chrome 扩展来保存 ip 地址、url 和服务器指纹。服务器指纹是位于响应标头中的字段。使用我的background.js 和localStorage，我可以保存此信息，然后将其显示在弹出窗口中。这一切都很好，除了我不知道如何在每个选项卡的基础上保存它，又名...如果我打开了 5 个选项卡，我想单击我的扩展程序并让它显示每个选项卡的 url相应的选项卡。例如：单击 tab4 并显示 tab4 的 url，然后单击 tab2 并显示 tab2 的 url。

下面的代码可以工作，只是它不与 tabId 绑定，所以它并不完全理想。任何关于从哪里开始研究的想法将不胜感激！

到目前为止我所做的： 背景.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']);

弹出.js：

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

Answer 1

由于每个选项卡都有唯一的 ID（直到浏览器重新启动），因此您可以使用它来识别选项卡。

您可能只对当前选项卡感兴趣，这使事情变得更简单，因为您不需要 localStorage （它在浏览器重新启动之间保留数据）。只需使用后台页面的命名空间来存储有关所有选项卡的数据：

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

如果您确实需要 localStorage，那么您可以将 tabs 对象转换为 json 字符串并将其存储在那里。

Answer 2

好的，我已经解决了我的问题！好吧，关于 chrome 扩展的那些哈哈，这似乎与 Serg 所说的差不多（谢谢 Serg！！）我写的有点不同。

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