Web Extension – document.getElementById returning null before execution of async method

I have a chrome/firefox web extension. When clicked, this web extension appends a DIV, which contains several other DIVs and a iFrame in a nested structure, to the inside of the element in a website’s HTML file. It does this through the usage of a content script.

Here is the simplified code of the onMessage listener in the content script:

    browser.runtime.onMessage.addListener((message) => {

    var iFrame = document.createElement("iFrame");
    iFrame.id = "contentFrame";
    iFrame.style.cssText = "width: 100%; height: 100%; border: none;";
    iFrame.src = browser.extension.getURL("inject.html");

    var boxDiv = document.createElement("div");
    boxDiv.style.cssText = "background: white; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 9px 8px; height: 100%; left: calc(100% - 390px); position: fixed; top: 0px; width: 390px; z-index: 1;"

    var zeroDiv = document.createElement("div");
    zeroDiv.style.cssText = "position: fixed; width: 0px; height: 0px; top: 0px; left: 0px; z-index: 2147483647;";

    var outerDiv = document.createElement("div");


    var closeButton1 = document.getElementById("contentFrame").contentWindow.document.getElementById("close-btn");
    console.log("Close Button1 Fetched: " + closeButton1);

    //closeButton.onClick = function () {
    //  console.log("Close button clicked");

    returnSummary(message.summaryLength, message.targetURL).then(summary => {

        var closeButton2 = document.getElementById("contentFrame").contentWindow.document.getElementById("close-btn");
        console.log("Close Button2 Fetched, Setting Listener: " + closeButton2);

        closeButton2.onClick = function() {
            console.log("Close button clicked");

For context – returnSummary is an async function that contains a bunch of fetch requests.

The odd part is as follows:

The first log statement: console.log("Close Button1 Fetched: " + closeButton1); returns null,

but the second log statement: console.log("Close Button2 Fetched, Setting Listener: " + closeButton2); returns [object HTMLButtonElement].

Thus, the document.getElementbyId seems to be working after the async request finishes. Why is this happening, and how can I retrieve the value of the HTML element with the ID close-btn as early as possible? (I want to set an onClick listener on the button).

Another odd problem is that even when I set the onClick method of the object closeButton2, clicking on the “close button” does nothing. But, that’s not the primary issue of this post.

Also here is the HTML inside “inject.html”, (the top is mostly just CSS):



Loading Summary...

When you make changes to a site using the browser’s dev tools, does the elements tab update?

Note: I’m using Chrome’s dev tools.

I created a section under the header using the console.

Under the console’s dev tools I type:

var Europe = document.createElement('section');
// undefined
Europe.setAttribute('id', 'europe')

When I go the elements tab, I’m not seeing the section at all.

If I update the .js file, save it, and then reload the browser, would that cause the element tree to change?

I’m working on some DOM hw and it’s really giving me a hard time.

.js file:


var citizens = ['Anka', 'Wallace', 'Pierre', 'Juan'];

var cuisines = ['French', 'English', 'Spanish', 'Russian'];

var body = document.querySelector('body');

function makeLocation() {