How to get a javascript (emberjs) rendered HTML source in javascript

Problem: I am working on an extension in javascript which needs to be able to view the source HTML of a page after everything is rendered. The problem is that no matter what method I use, I can only seem to retrieve the pre-rendered source. The website is using emberjs for generating the content of the page.

Example: Site: https://www.playstation.com/en-us/explore/games/ps4-games/?console=ps4

When I right click and view source, I get the page before the content is loaded.When I right click and inspect element, I want to get the source after the content has loaded.

What I've tried:

background.js

var acceptedURLPattern = "playstation.com";

tabUpdatedCallback = function(tabID, changeInfo, tab) {
    if(tab.url.indexOf(acceptedURLPattern) == -1)   return;

    var eventJsonScript = {
        code: "console.log(\"Script Injected\"); window.addEventListener(\"load\", (event) => { " + browserString + ".runtime.sendMessage({ \"html\": document.documentElement.outerHTML });});"
    };


    browser.tabs.executeScript(tabID, eventJsonScript);
}

handleHTMLMessage = function(request, sender, sendResponse) {
    console.log(request);
}

browser.tabs.onUpdated.addListener(tabUpdatedCallback);
browser.runtime.onMessage.addListener(handleHTMLMessage);

The above script is injecting an eventListener onto the page I want to grab the source of after it fires the "load" event which will then send a message back to background.js containing that source.

I've tried changing the documentElement to innerHTML/outerHTML as well as changing the eventListener to document.addEventListener(\"DOMContentLoaded\"), but none of these changes seemed to have any effect.

I've also tried using these: Get javascript rendered html source using phantomjs and get a browser rendered html+javascript but they are using phantomjs to load and execute the page, then return the html. In my solution, I need to be able to grab the already rendered page.

Thanks for the help in advance!