popup.js

;(() => {
	const STORAGE_KEY = 'enabled'
	const DEFAULT_ENABLED = true

	const toggle = document.getElementById('enabled-toggle')
	const statusText = document.getElementById('status-text')

	function render(enabled) {
		toggle.checked = enabled
		statusText.textContent = enabled
			? 'Auto-focus is currently ON.'
			: 'Auto-focus is currently OFF.'
	}

	async function loadEnabledState() {
		try {
			const result = await browser.storage.local.get(STORAGE_KEY)
			const value = result[STORAGE_KEY]
			return typeof value === 'boolean' ? value : DEFAULT_ENABLED
		} catch {
			return DEFAULT_ENABLED
		}
	}

	async function saveEnabledState(enabled) {
		await browser.storage.local.set({ [STORAGE_KEY]: enabled })
	}

	browser.storage.onChanged.addListener((changes, areaName) => {
		if (areaName !== 'local' || !changes[STORAGE_KEY]) return
		const nextValue = changes[STORAGE_KEY].newValue
		if (typeof nextValue !== 'boolean') return
		render(nextValue)
	})

	toggle.addEventListener('change', () => {
		void saveEnabledState(toggle.checked)
	})

	void (async () => {
		const enabled = await loadEnabledState()
		render(enabled)
	})()
})()