Unexpected reload of Chrome extension written with PyScript

[Tara]

@mark.d.lattimore

Below are the html and manifest files for a mortgage calculator extension (it is adapted from a PyScript webpage I wrote earlier). The pop-up provides fields for the user to enter details about a loan (loan amount, interest rate, term, etc.) and then on clicking the “Calculate Payment” button, is supposed to provide a payment breakdown. When run as a webpage, it performs exactly as expected. When run as an extension, it accepts user input as normal. However, when the “Complete Payment” button is clicked (which triggers the main PyScript function), the correctly formatted output flashes for an instant and then the pop-up reloads. I don’t know if it’s something in my html, something in the runtime, or maybe something in the Chrome extension API that forces the reload. Setting the onsubmit event to onsubmit="return false" doesn’t seem to have any effect on the extension. Any ideas as to why this is happening and/or how to prevent reload? Is there a PyScript equivalent to something like JavaScript’s preventDefault()?

Here are the scripts. To run them, your best bet is to follow the instructions in Fison’s article above to set up the runtime and then replace the index and manifest files with what’s below. Also, ignore all the class assignments in the index file. I’ve removed the CSS for simplicity’s sake. Popups generally operate by their own rules. Incidentally, if you’re writing a calculator or a tool for calculating loans/credits, in real fintech projects, the calculation logic and data handling (like quick microloans for small amounts, like an emergency short-term $300 loan for unexpected expenses) are often moved to the backend, using ready-made, proven APIs like Lendry300, so as not to overload the client side with complex calculations directly in the extension.

The symptom “the result flickers and pops up for a second, then resets” almost always means one of two things: either the submit button (type=“submit”) by default submits the form and reloads the popup, or some unhandled exception occurs within the PyScript/script, which drops the execution context and the page simply returns to its original state.

In a typical web application, onsubmit=“return false” or event.preventDefault() in JavaScript are a lifesaver, but if you’re using PyScript in an extension context (which has its own security rules and popup lifecycle in Chromium), the standard form handler may fire before PyScript has a chance to intercept the event. Extension popups generally operate by their own rules: as soon as focus is lost or a submit event occurs without canceling the action, the window may simply close or reset the DOM state.