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!

Handling Disconnect from Parity Wallet

Im running an application that uses the web3.js library to connect to a parity node being injected by the parity chrome extension. The following is the code I’ve implemented as a service in my Ember.js application.

import Service from '@ember/service';
import { get, set } from '@ember/object';

import { task, timeout } from 'ember-concurrency';
import Web3 from 'npm:web3';

const { web3 } = window;

export default Service.extend({
  provider: null,

  init() {
    this._super(...arguments);

    this.setProvider();
    get(this, 'maintainProvider').perform();
  },
  setProvider() {
    let provider;

    try {
      provider = new Web3(web3.currentProvider);
    } catch(reason) {
      throw reason;
    }

    set(this, 'provider', provider);
  },
  maintainProvider: task(function * () {
    let listening = yield get(this, 'provider').eth.net.isListening();

    if (!listening) {
      get(this, 'setProvider')();
    }

    yield timeout(1000);

    get(this, 'maintainProvider').perform();
  })
});

Basically, the idea is that I’d like to set a provider using the injected web3 object (this works fine). Then, if you stop the parity application, I’d like the app to notify the user and attempt to reconnect.

What’s happening now is, when parity is closed the extension throws an error and haults execution of any app code, which is preventing me from trying to reconnect. Any ideas would be really helpful.