Save with extension storage

Popup variables disappear when the popup closes. Page localStorage belongs to the website origin and is the wrong owner for extension data.

chrome.storage.local stores extension-owned structured data and is available across extension contexts. Use an object whose property name is the page key, then await the write before showing success.

storage.local persists until the extension is removed and currently has a 10 MB quota unless broader storage authority is requested. That is ample for short notes, not permission to accumulate unlimited page data. Storage values are JSON-serializable, operations are asynchronous, and quota failures reject the promise.

form.addEventListener('submit', async event => {
  event.preventDefault()
  const value = new FormData(form).get('note').trim()
  await chrome.storage.local.set({ [key]: value })
  status.textContent = 'Saved'
})

By default, local storage is visible to content scripts too. Page Notes can keep note access in trusted extension contexts and send only the selected note to the active page; setAccessLevel() can restrict an area to trusted contexts when the design requires it. Storage is not encrypted secret storage.

Avoid a read-modify-write race over one giant notes object. Independent page keys let unrelated writes proceed without overwriting each other. Remove the key for an empty note instead of retaining meaningless records, and use storage.onChanged if multiple open extension pages must react.

Save two pages concurrently, close and reopen the popup, delete one note, and simulate a rejected write. Success must appear only after persistence completes, and the other page’s value must remain intact.