Permissions API — check without asking

<div class="pg">
    <h1 class="pg-title">🔍 Read a permission without asking for it</h1>
    <p class="pg-sub">
      Pick a permission name and click <strong>Check state</strong>. It calls
      <code>navigator.permissions.query()</code> — a real call to your real browser.
      Nothing pops up, no matter what it finds. Then compare that to what the
      actual feature does when called directly.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Pick a permission to read</div>
      <div class="name-grid" id="nameGrid"></div>
      <p class="hint">Support for each name varies by browser — that's the point of trying more than one.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Check state (read-only)</div>
      <div class="btn-row">
        <button class="btn primary" id="checkBtn">Check state — <code id="selectedName">geolocation</code></button>
        <button class="btn ghost" id="clearLog">Clear log</button>
        <label class="toggle" style="margin-left:6px">
          <input type="checkbox" id="watchToggle" />
          <span class="switch"></span>
          <span>watch for live changes</span>
        </label>
      </div>

<div class="status" style="margin-top:14px">
        <div class="state-row">
          <span>Current state:</span>
          <span class="state-pill error" id="statePill">not checked</span>
        </div>
      </div>
      <p class="hint" id="stateHint">Click "Check state" — this never triggers a system dialog, whatever the answer is.</p>

<div class="counter-row">
        <span class="counter">Checks made: <b id="checkCount">0</b></span>
        <span class="counter">System prompts triggered by checking: <b id="promptCount">0</b></span>
      </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Now compare: call the real feature</div>
      <p class="hint">
        This button doesn't check anything first — it just asks for the browser's
        current position directly, the way the "obvious fix" in the post does.
        If the state above is <code>prompt</code>, watch what happens.
      </p>
      <div class="btn-row">
        <button class="btn bad" id="realCallBtn">Call getCurrentPosition() directly</button>
      </div>
      <p class="hint" id="realCallResult"></p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.