Plugin settings pages (settingsPages)

{
  "id": "top.qomicex.weather",
  "name": "Weather",
  "version": "1.0.0",
  "layers": ["l2"],
  "entry": { "frontend": "dist/index.html" },
  "contributes": {
    "settingsPages": ["dist/settings.html"]
  }
}

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; padding: 16px; font-family: inherit; color: var(--foreground); background: transparent; }
    .row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
    .hint { color: var(--muted-foreground); font-size: 12px; }
    input[type="text"] {
      background: var(--background); color: var(--foreground);
      border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px;
    }
  </style>
</head>
<body>
  <div class="row">
    <div>
      <div>City</div>
      <div class="hint">The city shown by the weather widget</div>
    </div>
    <input id="city" type="text" placeholder="Beijing" />
  </div>
  <div class="row">
    <div>
      <div>Auto refresh</div>
      <div class="hint">Refresh the weather data every 10 minutes</div>
    </div>
    <input id="autoRefresh" type="checkbox" />
  </div>

  <script>
    const api = window.__PLUGIN_API__
    // init: read the existing settings
    api.call('getSettings').then((s) => {
      document.getElementById('city').value = s.city ?? ''
      document.getElementById('autoRefresh').checked = s.autoRefresh === true
    })
    // save on change (setSettings merges by key, so there is no need to write the whole file)
    document.getElementById('city').addEventListener('change', (e) =>
      api.call('setSettings', 'city', e.target.value))
    document.getElementById('autoRefresh').addEventListener('change', (e) =>
      api.call('setSettings', 'autoRefresh', e.target.checked))
  </script>
</body>
</html>

await __PLUGIN_API__.call('openPluginSettings')

// or focus another plugin's settings tab
await __PLUGIN_API__.call('openPluginSettings', 'top.qomicex.weather')