popup.js

var tabId = 0;
var spofEditMode = false;
try {
var tabId = document.URL.match(/tab=([0-9]+)/)[1].toString();
} catch (err) {
}

function AttachButtons() {
  var buttons = document.querySelectorAll("button.enable");
  for (var i = 0, length = buttons.length; i < length; i++) {
      buttons[i].addEventListener('click', spofEnable);
  }
  buttons = document.querySelectorAll("button.disable");
  for (var i = 0, length = buttons.length; i < length; i++) {
      buttons[i].addEventListener('click', spofDisable);
  }
  buttons = document.querySelectorAll("button.reset");
  for (var i = 0, length = buttons.length; i < length; i++) {
      buttons[i].addEventListener('click', spofReset);
  }
  buttons = document.querySelectorAll("button.edit");
  for (var i = 0, length = buttons.length; i < length; i++) {
      buttons[i].addEventListener('click', spofEdit);
  }
  buttons = document.querySelectorAll("button.return");
  for (var i = 0, length = buttons.length; i < length; i++) {
      buttons[i].addEventListener('click', spofReturn);
  }
  var buttons = document.querySelectorAll("button.remove");
  for (var i = 0, length = buttons.length; i < length; i++) {
      buttons[i].addEventListener('click', spofRemoveWhitelist);
  }
  var buttons = document.querySelectorAll("button.add");
  for (var i = 0, length = buttons.length; i < length; i++) {
      buttons[i].addEventListener('click', spofAddWhitelist);
  }

  document.querySelector( '[data-analyze]' ).addEventListener(
    'click',
    analyze
  );
}

function onWhitelist(host, whitelist) {
  var found = false;
  if (whitelist != undefined && whitelist.length) {
    for (i= 0; i < whitelist.length && !found; i++) {
      if (host == whitelist[i]) {
        found = true;
      }
    }
  }
  return found;
}

// function spofUpdate() {
//   if (spofEditMode) {
//     chrome.extension.sendRequest({msg: 'getLists', tab: tabId}, function(response) {
//       var html = '';
//       if (response['isActive']) {
//         html += '<h1>Resource blocking is currently Active <button class="disable">Disable</button><button class="reset">Reset</button><button class="return">Return</button></h1>';
//       } else {
//         html += '<h1>Resource blocking is currently Disabled <button class="enable">Enable</button><button class="reset">Reset</button><button class="return">Return</button></h1>';
//         html += '<span class="note">(For best results, exit Chrome and start a new instance before enabling resource blocking)</span>';
//       }
//       html += '<hr><h1>Detected Third-Party Domains:</h1>';
//       if (response['block'] != undefined) {
//         var hosts = response['block'];
//         hosts.sort(function(a,b){
//           var tldRegex = /[-\w]+\.(?:[-\w]+\.xn--[-\w]+|[-\w]{3,}|[-\w]+\.[-\w]{2})$/i;
//           var aTLD = a.match(tldRegex).toString();
//           var bTLD = b.match(tldRegex).toString();
//           return aTLD.localeCompare(bTLD);
//         });
//         for (var i = 0; i < hosts.length; i++) {
//           var host = hosts[i];
//           if (onWhitelist(host, response['whitelist'])) {
//             html += '<li class="whitelist"><span class="host">' + host + '</span> - whitelisted <button host="' + host + '" class="remove">Remove</button>';
//           } else {
//             html += '<li><span class="host">' + host + '</span> - <button host="' + host + '" class="add">Whitelist</button>';
//           }
//         }
//       } else {
//         html += '<ul class="domains">No third-party domains detected.  Try browsing around for a while first to build a list.';
//       }
//       html += '</ul>';
//       document.getElementById('content').innerHTML = html;
//       AttachButtons();
//     });
//   } else {
//     chrome.extension.sendRequest({msg: 'getSPOF', tab: tabId}, function(response) {
//       var html = '';
//       if (response['isActive']) {
//         html += '<h1>Resource blocking is currently Active <button class="disable">Disable</button><button class="reset">Reset</button><button class="edit">Edit</button></h1>';
//       } else {
//         html += '<h1>Resource blocking is currently Disabled <button class="enable">Enable</button><button class="reset">Reset</button><button class="edit">Edit</button></h1>';
//         html += '<span class="note">(For best results, exit Chrome and start a new instance before enabling resource blocking)</span>';
//       }
//       if (response['spof'] != undefined && response['spof'].scripts.length && response['url'] != undefined) {
//         spofHosts = '';
//         for (var i = 0; i < response['spof'].scripts.length; i++) {
//           if (spofHosts.length) {
//             spofHosts += ',';
//           }
//           spofHosts += response['spof'].scripts[i].host;
//         }
//         html += '<br><a target="_blank" href="http://www.webpagetest.org/?video=1&fvonly=1&runs=3'
//                 + '&url=' + encodeURIComponent(response['url'])
//                 + '&spof='+ encodeURIComponent(spofHosts)
//                 + '">Generate SPOF Comparison Video</a>';
//       }
//       if (response['isActive']) {
//         html += '<hr><h1>Blocked:</h1>';
//         if (response['blocked'] != undefined) {
//           html += '<ul class="hosts">';
//           for (host in response['blocked']) {
//             html += '<li><span class="host">' + host + '</span> - <button host="' + host + '" class="add">Whitelist</button>';
//             html += '<ul class="scripts">';
//             for (var i = 0; i < response['blocked'][host].length; i++) {
//               html += '<li class="blocked">' + response['blocked'][host][i].replace(/>/g, '&gt;').replace(/</g, '&lt;') + '</li>';
//             }
//             html += '</ul></li>'
//           }
//           html += '</ul>';
//         } else {
//           html += 'No Requests were blocked';
//         }
//       }
//       html += '<hr><h1>Possible Frontend SPOF from:</h1>';
//       if (response['spof'] != undefined) {
//         html += '<ul class="hosts">';
//         for (var i = 0; i < response['spof'].scripts.length; i++) {
//           var host = response['spof'].scripts[i].host;
//           if (response['spof'].scripts[i].whitelist) {
//             html += '<li class="whitelist"><span class="host">' + host + '</span> - whitelisted <button host="' + host + '" class="remove">Remove</button>';
//           } else {
//             html += '<li><span class="host">' + host + '</span> - <button host="' + host + '" class="add">Whitelist</button>';
//           }
//           html += '<ul class="scripts">';
//           for (var j = 0; j < response['spof'].scripts[i].scripts.length; j++) {
//             var blockedContent = response['spof'].scripts[i].scripts[j].blockedContent.toFixed(0);
//             var group = Math.floor(blockedContent / 10);
//             var script = response['spof'].scripts[i].scripts[j].script.replace(/>/g, '&gt;').replace(/</g, '&lt;');
//             html += '<li class="pos' + group + '"> (<b>' + blockedContent + '</b>%) - ' + script + '</li>';
//           }
//           html += '</ul></li>'
//         }
//         html += '</ul>';
//       } else {
//         html += 'No Third-Party blocking scripts detected.';
//       }
//       document.getElementById('content').innerHTML = html;
//       AttachButtons();
//     });
//   }
// }

// function spofEdit() {
//   spofEditMode = true;
// 	spofUpdate();
// }
//
// function spofReturn() {
//   spofEditMode = false;
// 	spofUpdate();
// }
//
// function spofDisable() {
// 	chrome.extension.sendRequest({'msg': 'disable'}, function(response) {});
// 	spofUpdate();
// }
//
// function spofEnable() {
// 	chrome.extension.sendRequest({'msg': 'enable'}, function(response) {});
// 	spofUpdate();
// }
//
// function spofReset() {
// 	chrome.extension.sendRequest({'msg': 'reset'}, function(response) {});
// 	spofUpdate();
// }
//
// function spofRemoveWhitelist(e) {
// 	chrome.extension.sendRequest({'msg': 'wl_remove', 'host': e.target.getAttribute('host')}, function(response) {});
// 	spofUpdate();
// }
//
// function spofAddWhitelist(e) {
// 	chrome.extension.sendRequest({'msg': 'wl_add', 'host': e.target.getAttribute('host')}, function(response) {});
// 	spofUpdate();
// }

// spofUpdate();
//

function analyze( event ) {
  chrome.extension.sendRequest(
    {
      msg : 'bouncer_analyze',
      tab : tabId
    } );
}

thirdPartyUpdate();

function thirdPartyUpdate() {
  chrome.extension.sendRequest(
    {
      msg : 'bouncer_get',
      tab : tabId
    },
    function( response ) {
      let hostsEl        = document.getElementById( 'partyList' );
      let hostsCardEl    = document.getElementById( 'hostCard' );
      let hostsDetailsEl = document.getElementById( 'hostDetails' );
      let backToListBtn  = document.getElementById( 'backToListBtn' );

      let thirdPartyHosts  = Object.keys( response.thirdParties );

      let listHtml = thirdPartyHosts.reduce( ( html, host )  => {
        var requestBadge = response.thirdParties[ host ].total > 1 ?
                           'requests' : 'request';

        html += `
          <a href="#!" class="collection-item" data-host="${ host }">${ host } <span class="badge">${ response.thirdParties[ host ].total } ${ requestBadge }</span></a>
        `;

        return html;
      }, '' );

      hostsEl.innerHTML = listHtml;

      backToListBtn.addEventListener( 'click', function() {
        hostsCardEl.classList.toggle( 'is-detailCardOpen' );
        hostsEl.classList.toggle( 'is-hostListClose' );
      } );

      hostsEl.addEventListener(
        'click',
        function( e ) {
          if ( e.target && e.target.nodeName === 'A' ) {
            var hostDetails = response.thirdParties[ e.target.dataset.host ];

            var hostDetailsHtml = Object.keys( hostDetails ).reduce( ( listHtml, key ) => {
              if ( key !== 'total' && hostDetails[ key ].length ) {
                listHtml += `
                <div style="padding : 1em 0;">
                  <strong>${ key.toUpperCase() }</strong>
                  <ul>
                    ${ hostDetails[ key ].map(
                      request => `<li><a href="${ request.url }" class="overflow-ellipsis" target="_blank">${ request.url }</a></li>`
                    ).join( '' ) }
                  </ul>
                </div>
                `;
              }

              return listHtml;
            }, '' );

            hostsDetailsEl.innerHTML = hostDetailsHtml;

            hostsEl.classList.toggle( 'is-hostListClose' );
            hostsCardEl.classList.toggle( 'is-detailCardOpen' );
          }
        }
      );
    }
  );
}

function getHostDetails() {

}