Remember Preferences

Goal: persist user choices with LFStore. A dark-mode toggle whose state survives refreshes and even site switches.

main.js

// ==UserScript==
// @name Dark Mode Toggle
// @description Remember the user’s dark mode preference
// @match https://example.com/*
// @require dom
// @require store
// ==/UserScript==

function applyDark(enabled) {
  document.documentElement.style.filter = enabled ? "invert(1) hue-rotate(180deg)" : "";
}

LFDOM.ready(async () => {
  applyDark(await LFStore.get("dark-enabled", false));

  const root = LFDOM.createFloatingRoot({ id: "dark-toggle" });
  root.innerHTML = "<button id='lf-dark-btn'>Dark Mode</button>";
  root.querySelector("#lf-dark-btn").addEventListener("click", async () => {
    const next = !(await LFStore.get("dark-enabled", false));
    await LFStore.set("dark-enabled", next);
    applyDark(next);
    LFDOM.toast(next ? "ON" : "OFF");
  });
});

Key points

• Every LFStore method is async — always await
• Data is isolated per app and shared across sites: the same app reads one dataset on Commerce and 1688; other apps cannot see it
• Data lives in the extension background's IndexedDB, unaffected by page localStorage clearing
• get(key, fallbackValue) returns the fallback when the key does not exist