Popup and storage
Build the popup interface
Create a small accessible form whose markup and scripts are packaged with the extension instead of loaded remotely.
8 minute lesson
The popup is an extension page. It can use HTML, CSS, modules, and extension APIs, but it disappears when focus moves away.
Add a label, textarea, save button, status region, and a separate module script. Manifest V3 packages executable code locally; do not load scripts from a CDN or use inline JavaScript.
Treat closing as normal, not exceptional. The popup can vanish while an asynchronous storage operation is running, so save immediately from the submit event and make the write itself authoritative. Do not keep the only copy of a draft or success state in popup variables.
<form id="note-form">
<label for="note">Note for this page</label>
<textarea id="note" name="note"></textarea>
<button>Save note</button>
<p id="status" role="status"></p>
</form>
<script type="module" src="popup.js"></script>Extension pages have a restrictive content security policy. Keeping scripts in packaged files also makes the store-reviewed code match what users execute. Avoid inline event attributes such as onclick; attach listeners from the module and render dynamic text through DOM properties.
Style a readable 320-pixel popup and test it entirely by keyboard. Open it, type without saving, click outside, and reopen it. Decide deliberately whether the draft is discarded, persisted, or restored, then make the interface communicate that behavior.
Lesson completed