Manually serialize and deserialize the canvas capture to/from JSON and

extensions/background.js

@@ -20,6 +20,7 @@ function listenForMessage(callback) {
 var tabInfo = {}
 var resultTab = null;
 var currentCapture = null;
+var currentCaptureChunks = [];
 var currentFrameId = null;
 var currentTabId = null;
 
@@ -113,13 +114,21 @@ listenForMessage(function(request, sender, sendResponse) {
             popup.captureComplete(request.errorString);
         }
     }
-    else if (request.capture) {
+    else if (request.captureChunk) {
+        currentCaptureChunks.push(request.captureChunk);
+    }
+    else if (request.captureDone) {
+        // Concatenate the current capture chunks and reset the array.
+        var allChunks = currentCaptureChunks;
+        currentCaptureChunks = [];
+        var fullJSON = "".concat.apply("", allChunks);
+        var capture = JSON.parse(fullJSON);
         // If a capture has been received,
         var tabWindows = browser.extension.getViews({type: "tab"});
         // Open the result view if not open (need to check if length == 1 that the function exists for Edge),
         window.browser.tabs.create({ url: "result.html", active: true }, function(tab) {
             resultTab = tab;
-            currentCapture = request.capture;
+            currentCapture = capture;
             currentFrameId = frameId;
             currentTabId = sender.tab.id;
         });
@@ -134,4 +143,4 @@ listenForMessage(function(request, sender, sendResponse) {
 
     // Return the frameid for reference.
     sendResponse({ frameId: frameId });
-});
+});

extensions/contentScript.js

@@ -236,7 +236,27 @@ if (sessionStorage.getItem(spectorLoadedKey)) {
     });
 
     document.addEventListener('SpectorOnCaptureEvent', function (e) {
-        sendMessage({ capture: e.detail.capture });
+        // The browser imposes limits on the size of the serialized JSON
+        // associated with these messages. To avoid running into these limits,
+        // and not have to introspect too deeply into the ICapture structure, we
+        // manually serialize to JSON and chop up the resulting string.
+        //
+        // Note for future reference: the object that comes in via
+        // e.detail.capture is actually immutable, because of the way it's
+        // serialized from the main world to the content script. If the goal
+        // were to stub out certain fields and send them separately,
+        // Object.assign would have to be used to create a new top-level object.
+        var serialized = JSON.stringify(e.detail.capture);
+        var len = serialized.length;
+        var ii = 0;
+        var step = 32 * 1024 * 1024; // 32 MB
+        while (ii < len) {
+            var nextIndex = Math.min(ii + step, len);
+            var substr = serialized.substring(ii, nextIndex);
+            sendMessage({ captureChunk: substr });
+            ii = nextIndex;
+        }
+        sendMessage({ captureDone: true });
     }, false);
 
     document.addEventListener('SpectorOnErrorEvent', function (e) {
@@ -415,4 +435,4 @@ listenForMessage(function (message) {
             document.dispatchEvent(myEvent);
         }
     }
-});
+});