How to delay fetch() until website has finished loading dynamic content

I’m using the following javascript code to download the source of a webpage in the form of a html file. This code is currently run whenever the user clicks my extension’s button:

let URL = 'https://smmry.com/https://www.cnn.com/2018/04/01/politics/ronald-kessler-jake-tapper-interview/index.html#&SM_LENGTH=7'
    fetch(URL)
        .then((resp) => resp.text())
        .then(responseText => {
           download("website_source.html", responseText)
        })

function download(filename, text) {

    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
}

Here’s the source of the webpage: https://smmry.com/https://www.cnn.com/2018/04/01/politics/ronald-kessler-jake-tapper-interview/index.html#&SM_LENGTH=7

However, as you can see if you visit the webpage, sometimes the webpage takes a small amount of time (up to a few seconds) to summarize the article. It’s less noticeable on this article – but usually a pink loading bar will move up and down in the pink box until the summary is created and displayed on the website.

I believe my code is downloading the source of the website before it finishes summarizing the article, thus the HTML file my program downloads does not contain the summary of the article.

How can I make sure the fetch() request only downloads the content of the website once the website https://smmry.com has finished summarizing the article https://www.cnn.com/2018/04/01/politics/ronald-kessler-jake-tapper-interview/index.html.

Chrome Extension click event handlers in popup capturing wrong target

In my extension, I’m trying to make a bunch of buttons. Each of the numbers is a button, so all cells in the table except the header “Save” and “Load”.

enter image description here
So my goal is 20 buttons, 1-9 (& 0) on the left that do a save action & 10 more that load. I made click handlers for each button and am generating the table dynamically.
Here’s a section of the relevant code in my script linked from my popup html page

$(document).ready(populateGroupButtons)

function populateGroupButtons(){
    const groups=[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]     //group 0 is at the end
    let table=$('#groupButtons')
    groups.forEach((group)=>{
            table.append(
            ''+
                ''+
                    group+
                ''+
                ''+
                    group+
                ''+
            ''
        )
    })

    $(document).ready(registerClickHandlers)
}

function registerClickHandlers(){
    let table = $('#groupButtons')
    for(let group=0; group<=9; group++){
        $('#save'+group).click((e)=>{
            console.log($('#save'+group))
        });
        $('#load'+group).click((e)=>{
            console.log($('#load'+group))
        })
    }
}

Popup html page




    
    


    

Popup

Save Load

Open console to see output

I have it working if I view popup.html in a new tab and it also works here isolated as a jsfiddle
The problem is when I use it as a chrome extension, the table cell I click, isn’t the correct target of the event handler

  • Right now I’m just loggin the target to console to see what’s happening (I want to make the buttons actually do things later)
  • When I click the 1 in the Save column, it logs #save2
  • When I click the 2 in the save column, it logs #save3
  • When I click the which contains the word “Save”, it logs, #save1
  • Row 9 & 0 don’t respond when clicked so appear to have no event handlers

Basically, everything is shifted up 1 row and I don’t know why
It’s working fine as pure JavaScript and on the fiddle, but somehow the target is wrong

Here’s a zip folder of the entire extension