@symbo.ls/connect 3.2.7

package/static/auth.js

@@ -0,0 +1,373 @@
+// Auth module — manages login/logout and token storage via chrome.storage.local
+;(function () {
+  'use strict'
+
+  const API_BASE = 'https://api.symbols.app'
+  const STORAGE_KEYS = {
+    accessToken: 'symbols_access_token',
+    refreshToken: 'symbols_refresh_token',
+    expiresAt: 'symbols_expires_at',
+    user: 'symbols_user'
+  }
+
+  // ============================================================
+  // Token storage (chrome.storage.local)
+  // ============================================================
+  function getStoredAuth () {
+    return new Promise((resolve) => {
+      chrome.storage.local.get(Object.values(STORAGE_KEYS), (data) => {
+        resolve({
+          accessToken: data[STORAGE_KEYS.accessToken] || null,
+          refreshToken: data[STORAGE_KEYS.refreshToken] || null,
+          expiresAt: data[STORAGE_KEYS.expiresAt] || 0,
+          user: data[STORAGE_KEYS.user] || null
+        })
+      })
+    })
+  }
+
+  function setStoredAuth (tokens, user) {
+    const data = {}
+    if (tokens) {
+      data[STORAGE_KEYS.accessToken] = tokens.accessToken
+      data[STORAGE_KEYS.refreshToken] = tokens.refreshToken
+      data[STORAGE_KEYS.expiresAt] = tokens.accessTokenExp
+        ? (tokens.accessTokenExp.expiresAt || (Date.now() / 1000 + (tokens.accessTokenExp.expiresIn || 3600)))
+        : (Date.now() / 1000 + 3600)
+    }
+    if (user) {
+      data[STORAGE_KEYS.user] = user
+    }
+    return new Promise((resolve) => chrome.storage.local.set(data, resolve))
+  }
+
+  function clearStoredAuth () {
+    return new Promise((resolve) => {
+      chrome.storage.local.remove(Object.values(STORAGE_KEYS), resolve)
+    })
+  }
+
+  // ============================================================
+  // API calls (routed through service worker to bypass CORS)
+  // ============================================================
+  async function apiRequest (path, options) {
+    var url = API_BASE + path
+    var headers = { 'Content-Type': 'application/json' }
+    if (options && options.headers) {
+      Object.assign(headers, options.headers)
+    }
+    var resp = await swFetch(url, {
+      method: (options && options.method) || 'GET',
+      headers: headers,
+      body: (options && options.body) || undefined
+    })
+    if (!resp.ok) {
+      throw new Error((resp.data && resp.data.message) || resp.text || resp.error || ('HTTP ' + resp.status))
+    }
+    return resp.data
+  }
+
+  async function authedRequest (path, options) {
+    const auth = await getStoredAuth()
+    let token = auth.accessToken
+
+    // Refresh if expired (30s buffer)
+    if (token && auth.expiresAt && (Date.now() / 1000) > auth.expiresAt - 30) {
+      try {
+        const refreshed = await refreshTokens(auth.refreshToken)
+        token = refreshed.accessToken
+      } catch (e) {
+        // Refresh failed — clear auth
+        await clearStoredAuth()
+        throw new Error('Session expired — please sign in again')
+      }
+    }
+
+    if (!token) throw new Error('Not signed in')
+
+    return apiRequest(path, {
+      ...options,
+      headers: {
+        ...(options && options.headers),
+        Authorization: 'Bearer ' + token
+      }
+    })
+  }
+
+  // ============================================================
+  // Auth operations
+  // ============================================================
+  async function login (email, password) {
+    const data = await apiRequest('/core/auth/login', {
+      method: 'POST',
+      body: JSON.stringify({ email, password })
+    })
+
+    const tokens = data.tokens || data
+    const user = data.user || null
+    await setStoredAuth(tokens, user)
+    return { tokens, user }
+  }
+
+  async function refreshTokens (refreshToken) {
+    const data = await apiRequest('/core/auth/refresh', {
+      method: 'POST',
+      body: JSON.stringify({ refreshToken })
+    })
+    const tokens = data.tokens || data
+    const auth = await getStoredAuth()
+    await setStoredAuth(tokens, auth.user)
+    return tokens
+  }
+
+  async function getMe () {
+    return authedRequest('/core/auth/me', { method: 'GET' })
+  }
+
+  async function logout () {
+    try {
+      const auth = await getStoredAuth()
+      if (auth.accessToken) {
+        await apiRequest('/core/auth/logout', {
+          method: 'POST',
+          headers: { Authorization: 'Bearer ' + auth.accessToken }
+        }).catch(() => {})
+      }
+    } finally {
+      await clearStoredAuth()
+    }
+  }
+
+  async function isSignedIn () {
+    const auth = await getStoredAuth()
+    if (!auth.accessToken) return false
+    try {
+      await getMe()
+      return true
+    } catch (e) {
+      return false
+    }
+  }
+
+  // ============================================================
+  // Platform API — projects
+  // ============================================================
+  async function listProjects () {
+    return authedRequest('/core/projects', { method: 'GET' })
+  }
+
+  async function getProjectByKey (key) {
+    return authedRequest('/core/projects/key/' + encodeURIComponent(key), { method: 'GET' })
+  }
+
+  async function getProjectData (projectId, branch) {
+    return authedRequest(
+      '/core/projects/' + projectId + '/data?branch=' + (branch || 'main') + '&version=latest',
+      { method: 'GET' }
+    )
+  }
+
+  async function getServiceToken () {
+    try {
+      const res = await fetch(API_BASE + '/service-token')
+      const json = await res.json().catch(() => null)
+      if (json && json.token) return json.token.trim()
+      const txt = await res.text()
+      return (txt || '').replace(/\s+/g, '') || null
+    } catch (e) {
+      return null
+    }
+  }
+
+  async function getAccessToken () {
+    const auth = await getStoredAuth()
+    return auth.accessToken
+  }
+
+  // ============================================================
+  // Browser sign-in (PKCE session flow — same as CLI)
+  // ============================================================
+  const WEBSITE_BASE = 'https://symbols.app'
+
+  function randomVerifier (len) {
+    len = len || 64
+    var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._~'
+    var arr = new Uint8Array(len)
+    crypto.getRandomValues(arr)
+    var out = ''
+    for (var i = 0; i < len; i++) out += chars.charAt(arr[i] % chars.length)
+    return out
+  }
+
+  async function sha256Base64url (input) {
+    var encoder = new TextEncoder()
+    var data = encoder.encode(input)
+    var hash = await crypto.subtle.digest('SHA-256', data)
+    var bytes = new Uint8Array(hash)
+    var binary = ''
+    for (var i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i])
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '')
+  }
+
+  // Proxy fetch through service worker to avoid CORS preflight issues
+  function swFetch (url, options) {
+    return new Promise(function (resolve, reject) {
+      try {
+        chrome.runtime.sendMessage({
+          type: 'api-fetch',
+          url: url,
+          method: (options && options.method) || 'GET',
+          headers: (options && options.headers) || {},
+          body: (options && options.body) || undefined
+        }, function (resp) {
+          if (chrome.runtime.lastError) {
+            reject(new Error(chrome.runtime.lastError.message))
+            return
+          }
+          if (!resp) {
+            reject(new Error('No response from service worker'))
+            return
+          }
+          resolve(resp)
+        })
+      } catch (e) {
+        reject(new Error('sendMessage failed: ' + (e.message || e)))
+      }
+    })
+  }
+
+  // Try swFetch — no fallback to direct fetch (CORS blocks it)
+  async function proxyFetch (url, options) {
+    return swFetch(url, options)
+  }
+
+  async function loginViaBrowser (onStatus) {
+    var sessionId = crypto.randomUUID()
+    var codeVerifier = randomVerifier(64)
+    var codeChallenge = await sha256Base64url(codeVerifier)
+
+    if (onStatus) onStatus('Creating secure session...')
+
+    // Create PKCE session via service worker (avoids CORS)
+    var sessionResp
+    try {
+      sessionResp = await proxyFetch(API_BASE + '/core/auth/session', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          session_id: sessionId,
+          code_challenge: codeChallenge,
+          plugin_info: { version: 'chrome-extension', figma_env: 'chrome' }
+        })
+      })
+    } catch (fetchErr) {
+      chrome.tabs.create({ url: WEBSITE_BASE + '/signin' })
+      throw new Error('Session fetch error: ' + fetchErr.message)
+    }
+
+    if (!sessionResp.ok) {
+      chrome.tabs.create({ url: WEBSITE_BASE + '/signin' })
+      throw new Error('Session failed (HTTP ' + sessionResp.status + '): ' + (sessionResp.text || '').substring(0, 120))
+    }
+
+    // Open signin with session param
+    var signinUrl = WEBSITE_BASE + '/signin?session=' + encodeURIComponent(sessionId)
+    chrome.tabs.create({ url: signinUrl })
+
+    if (onStatus) onStatus('Waiting for sign-in in browser...')
+
+    var startedAt = Date.now()
+    var timeoutMs = 3 * 60 * 1000
+    var pollMs = 1500
+
+    while (true) {
+      if (Date.now() - startedAt > timeoutMs) {
+        throw new Error('Sign-in timed out — please try again')
+      }
+
+      await new Promise(function (r) { setTimeout(r, pollMs) })
+
+      try {
+        var statusResp = await swFetch(
+          API_BASE + '/core/auth/session/status?session=' + encodeURIComponent(sessionId),
+          { method: 'GET' }
+        )
+
+        if (!statusResp.ok) continue
+
+        var statusData = statusResp.data || {}
+        var status = statusData.status || statusData.data?.status || statusData.state || statusData.data?.state
+        if (status === 'ready_for_confirm') break
+        if (status === 'expired' || status === 'revoked' || status === 'invalid') {
+          throw new Error('Session ' + status + ' — please try again')
+        }
+      } catch (pollErr) {
+        if (pollErr.message && pollErr.message.includes('Session')) throw pollErr
+      }
+    }
+
+    if (onStatus) onStatus('Confirming session...')
+
+    var confirmResp = await proxyFetch(API_BASE + '/core/auth/session/confirm', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        session_id: sessionId,
+        code_verifier: codeVerifier
+      })
+    })
+
+    if (!confirmResp.ok) {
+      var confirmData = confirmResp.data || {}
+      throw new Error(confirmData.message || confirmData.error || 'Session confirm failed')
+    }
+
+    var cData = confirmResp.data || {}
+    var token = cData.access_token || cData.data?.access_token ||
+      cData.token || cData.data?.token
+    if (!token) {
+      throw new Error('Sign-in succeeded but no token returned')
+    }
+
+    var tempTokens = { accessToken: token, refreshToken: null, accessTokenExp: null }
+    await setStoredAuth(tempTokens, null)
+
+    try {
+      var user = await getMe()
+      await setStoredAuth(tempTokens, user)
+      return { tokens: tempTokens, user: user }
+    } catch (e) {
+      return { tokens: tempTokens, user: null }
+    }
+  }
+
+  // ============================================================
+  // AI — platform AI endpoint
+  // ============================================================
+  async function aiPrompt (messages, context) {
+    return authedRequest('/core/ai/chat', {
+      method: 'POST',
+      body: JSON.stringify({ messages, context })
+    })
+  }
+
+  // ============================================================
+  // Expose global API
+  // ============================================================
+  window.SymbolsAuth = {
+    login,
+    loginViaBrowser,
+    logout,
+    getMe,
+    isSignedIn,
+    getStoredAuth,
+    getAccessToken,
+    getServiceToken,
+    listProjects,
+    getProjectByKey,
+    getProjectData,
+    authedRequest,
+    aiPrompt,
+    API_BASE
+  }
+})()

package/static/content.css

@@ -0,0 +1,46 @@
+#symbols-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 999999999998;
+  opacity: 0;
+  transition: opacity 350ms cubic-bezier(0.29, 0.67, 0.51, 0.97);
+}
+
+body:not(.symbols-grabber-active) #symbols-overlay {
+  pointer-events: none;
+}
+
+:not(#symbols-overlay) .symbols-grabber-hovered {
+  outline: 3px solid #0085ff !important;
+  outline-offset: 1px !important;
+}
+
+iframe#symbols-frame {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 85vw;
+  height: 85vh;
+  border-radius: 0.618em;
+  transform: translate(-50%, -50%);
+  border: none;
+  box-shadow: #121212f7 0 0 0 1000em;
+  background: #121212f7;
+}
+
+div#close-btn {
+  cursor: pointer;
+  z-index: 9999999999999;
+  position: fixed;
+  top: 5vh;
+  right: 6.4vw;
+  font-size: 1.5rem;
+  line-height: 0.9;
+  width: 1em;
+  height: 1em;
+  color: white;
+  font-family: monospace;
+}

package/static/devtools.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<head><meta charset="UTF-8"></head>
+<body>
+  <script src="devtools.js"></script>
+</body>
+</html>

package/static/devtools.js

@@ -0,0 +1,5 @@
+chrome.devtools.panels.create('Symbols', null, 'panel.html', panel => {
+  panel.onShown.addListener(win => {
+    win.panelShown()
+  })
+})

package/static/manifest.json

@@ -0,0 +1,56 @@
+{
+  "manifest_version": 3,
+  "name": "Symbols Connect",
+  "version": "3.0.0",
+  "description": "symbols.app connect — DOMQL Inspector and element grabber for the Symbols design system",
+  "permissions": ["scripting", "tabs", "activeTab", "storage", "declarativeNetRequest"],
+  "host_permissions": ["<all_urls>"],
+  "icons": {
+    "48": "assets/48x48.png",
+    "144": "assets/144x144.png"
+  },
+  "action": {
+    "default_icon": {
+      "48": "assets/48x48.png",
+      "72": "assets/72x72.png",
+      "144": "assets/144x144.png"
+    },
+    "default_title": "Symbols Connect"
+  },
+  "background": {
+    "service_worker": "service_worker.js"
+  },
+  "devtools_page": "devtools.html",
+  "options_page": "settings.html",
+  "commands": {
+    "toggleGrabber": {
+      "suggested_key": {
+        "default": "Ctrl+E",
+        "mac": "Command+E"
+      },
+      "description": "Toggle grabber mode"
+    }
+  },
+  "content_scripts": [
+    {
+      "matches": ["https://*/*", "http://*/*"],
+      "exclude_globs": ["https://symbols.app/*", "https://platform.symbo.ls/*"],
+      "js": ["content.js"],
+      "run_at": "document_end",
+      "all_frames": true
+    },
+    {
+      "matches": ["https://*/*", "http://*/*"],
+      "css": ["content.css"],
+      "run_at": "document_end",
+      "all_frames": true
+    }
+  ],
+  "web_accessible_resources": [{
+    "resources": ["page-agent.js", "picker.html"],
+    "matches": ["<all_urls>"]
+  }],
+  "externally_connectable": {
+    "matches": ["https://symbols.app/*", "https://platform.symbo.ls/*"]
+  }
+}