Fix for Chrome 63

background.js

@@ -1,15 +1,28 @@
-var cpu_history = {'overall': []};
+var cpu_history = {
+  'overall': []
+};
 var icon_draw_context;
 var done_init = false;
 
 function init() {
-  if (done_init) { return; }
+  if (done_init) {
+    return;
+  }
   done_init = true;
-  chrome.processes.onUpdatedWithMemory.addListener(receiveProcessInfo);
+  // TODO only get memusage every x seconds
+  // This takes a lot of CPU, so disabled
+  // chrome.processes.onUpdatedWithMemory.addListener(receiveProcessInfo);
+
+  // This always needs to be here, otherwise the CPU doesn't get
+  // updated in the withMemory callback
+  chrome.processes.onUpdated.addListener(receiveProcessInfo);
+
   icon_draw_context = document.getElementById('canvas').getContext('2d');
   icon_draw_context.fillStyle = '#f6f6f6';
   icon_draw_context.fillRect(0, 0, 19, 19);
-  chrome.browserAction.setIcon({imageData: icon_draw_context.getImageData(0, 0, 19, 19)});
+  chrome.browserAction.setIcon({
+    imageData: icon_draw_context.getImageData(0, 0, 19, 19)
+  });
 }
 
 function receiveProcessInfo(processes) {
@@ -34,10 +47,16 @@ function receiveProcessInfo(processes) {
     cpu_history['overall'].pop();
   }
   draw_cpu_graph(cpu_history['overall'], icon_draw_context, 19, 19, 8, 1, 0);
-  chrome.browserAction.setIcon({ imageData: icon_draw_context.getImageData(0, 0, 19, 19) });
+  chrome.browserAction.setIcon({
+    imageData: icon_draw_context.getImageData(0, 0, 19, 19)
+  });
   padding = totalCPU < 10 ? ' ' : '';
-  chrome.browserAction.setBadgeText({text: padding + Math.floor(totalCPU).toString() + '%' + padding});
-  chrome.browserAction.setBadgeBackgroundColor({color:get_color_for_cpu(totalCPU)});
+  chrome.browserAction.setBadgeText({
+    text: padding + Math.floor(totalCPU).toString() + '%' + padding
+  });
+  chrome.browserAction.setBadgeBackgroundColor({
+    color: get_color_for_cpu(totalCPU)
+  });
 }
 
 function draw_cpu_graph(data, context, width, height, height_offset, col_width, gap_width) {
@@ -49,7 +68,7 @@ function draw_cpu_graph(data, context, width, height, height_offset, col_width,
     context.strokeStyle = get_color_for_cpu(data[i]);
     context.beginPath();
     context.moveTo(x, height);
-    context.lineTo(x, height - height_offset - (Math.min(data[i], 100)*(height - height_offset)/100));
+    context.lineTo(x, height - height_offset - (Math.min(data[i], 100) * (height - height_offset) / 100));
     context.stroke();
   }
 }

popup.js

@@ -10,15 +10,15 @@ function init() {
   cpu_graph_draw_context = document.getElementById('cpu_graph').getContext('2d');
   var tbody = document.getElementById("process_list_body");
   var msg = document.getElementById('paused_msg');
-  tbody.addEventListener('mouseover', function() {
+  tbody.addEventListener('mouseover', function () {
     freeze_table = true;
     msg.style.display = 'block';
   });
-  tbody.addEventListener('mouseout', function() {
+  tbody.addEventListener('mouseout', function () {
     freeze_table = false;
     msg.style.display = 'none';
   });
-  document.getElementById('sort').addEventListener('change', function() {
+  document.getElementById('sort').addEventListener('change', function () {
     sort = this.value;
   });
 }
@@ -32,8 +32,8 @@ function receiveProcessInfo(processes) {
     for (pid in processes) {
       processes_array[pid] = processes[pid];
     }
-    processes_array.sort(function(a, b) {
-      if (sort == 'cpu') return (Math.floor(b.cpu) - 1/b.osProcessId) - (Math.floor(a.cpu) - 1/a.osProcessId);
+    processes_array.sort(function (a, b) {
+      if (sort == 'cpu') return (Math.floor(b.cpu) - 1 / b.osProcessId) - (Math.floor(a.cpu) - 1 / a.osProcessId);
       else return Math.floor(b.privateMemory) - Math.floor(a.privateMemory);
     });
     for (pid in processes_array) {
@@ -65,11 +65,15 @@ function getTabInfo(tab) {
 function displayProcessInfo(process) {
   var row_html = '';
   var memory = (process.privateMemory / 1024 / 1024).toFixed(0) + " Mb";
-  var tab = process.tabs
-  if (tab.length) {
-    chrome.tabs.get(tab[0], getTabInfo);
+  var tab = process.tasks[0];
+  var tabId = tab.tabId;
+  if (tabId) {
+    chrome.tabs.get(tabId, getTabInfo);
     process.type = 'Tab';
   } else {
+    if (tab.title) {
+      process.type = tab.title
+    }
     if (process.type == 'renderer') {
       process.type = 'Background page';
     }
@@ -81,10 +85,10 @@ function displayProcessInfo(process) {
   if (process.id == current_graph) {
     row_class += ' selected';
   }
-  row_html += '<tr class="' + row_class + '" data-tabid="' + (tab.length ? tab[0] : '') + '" data-pid="' + process.id + '">' +
+  row_html += '<tr class="' + row_class + '" data-tabid="' + (tab.tabId || '') + '" data-pid="' + process.id + '">' +
     '<td class="cpu">' + Math.floor(process.cpu) + '%</td>' +
     '<td class="memory">' + memory + '</td>' +
-    '<td class="process"><img width="16" height="16" id="tabIcon' + tab + '" style="visibility: hidden;">' + ucfirst(process.type) + '<span id="tabTitle' + tab + '"></span></td>' +
+    '<td class="process"><img width="16" height="16" id="tabIcon' + tab.tabId + '" style="visibility: hidden;">' + ucfirst(process.type) + '<span id="tabTitle' + tab.tabId + '"></span></td>' +
     '<td class="actions">';
   if (process.type == 'Tab') {
     row_html += '<button class="reload">Reload</button><button class="close">Close</button>';
@@ -126,7 +130,7 @@ function select_process(e) {
 }
 
 function terminate(e) {
-  chrome.processes.terminate(+this.parentNode.parentNode.dataset.pid, function(result) {
+  chrome.processes.terminate(+this.parentNode.parentNode.dataset.pid, function (result) {
     if (!result) {
       alert('Sorry, this process could not be terminated.');
     }
@@ -145,7 +149,7 @@ function close_tab(e) {
 }
 
 function ucfirst(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
+  return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
 document.addEventListener('DOMContentLoaded', init);