I am trying to make a Firefox extension that will add a button to take a screenshot of the active tab. When I call 'captureVisibleTab', the call seems to hang - the function never executes the next line. Minimal code to show the problem:

let shotBtn = document.createElement("button");
shotBtn.innerHTML = "Shot";
shotBtn.onclick = function () {
    takeShot();
};
document.body.appendChild(leftBtn);

async function takeShot() {
    leftBtn.innerHTML = "Start"; // This line executes.
    const shot = await browser.tabs.captureVisibleTab();
    leftBtn.innerHTML = "Done";  // This line does not.
}

I see the button text change to "Start", but I do not see it change to "Done".

I've tried some variants: Remove the 'await' and add "shot.then" handling instead, and putting the captureVisibleTab call directly in the onclick method instead of a separate async method. I've added the permission "<all_urls>" in my manifest, but am not certain I have been granted the permission - is there a way to check this?

I'm new to JavaScript and web extensions generally so there may well be some fundamental flaw in my understanding of how this asynchronous function should work. Is it possible some garbage collector is grabbing up the function object before it finishes executing? If so, how can I avoid this in an 'onclick' method?