@flrande/bak-extension 0.1.0

package/src/limitations.ts

@@ -0,0 +1,38 @@
+import type { Locator } from '@flrande/bak-protocol';
+
+export interface UnsupportedLocator {
+  reason: 'shadow-dom' | 'iframe';
+  hint: string;
+}
+
+const SHADOW_SELECTOR_PATTERN = /(>>>|::part|::slotted|\bshadowroot\b)/i;
+const FRAME_SELECTOR_PATTERN = /(^|[\s>+~,(])(?:iframe|frame)(?=[$.#:[\s>+~,(]|$)/i;
+
+export function unsupportedLocator(locator?: Locator): UnsupportedLocator | null {
+  if (!locator?.css) {
+    return null;
+  }
+
+  const css = locator.css;
+  if (SHADOW_SELECTOR_PATTERN.test(css)) {
+    return {
+      reason: 'shadow-dom',
+      hint: 'shadow-dom selectors are not supported in v1'
+    };
+  }
+
+  if (FRAME_SELECTOR_PATTERN.test(css)) {
+    return {
+      reason: 'iframe',
+      hint: 'iframe selectors are not supported in v1'
+    };
+  }
+
+  return null;
+}
+
+export function unsupportedLocatorHint(locator?: Locator): string | null {
+  return unsupportedLocator(locator)?.hint ?? null;
+}
+
+

package/src/popup.ts

@@ -0,0 +1,65 @@
+const statusEl = document.getElementById('status') as HTMLDivElement;
+const tokenInput = document.getElementById('token') as HTMLInputElement;
+const portInput = document.getElementById('port') as HTMLInputElement;
+const debugRichTextInput = document.getElementById('debugRichText') as HTMLInputElement;
+const saveBtn = document.getElementById('save') as HTMLButtonElement;
+const disconnectBtn = document.getElementById('disconnect') as HTMLButtonElement;
+
+function setStatus(text: string, bad = false): void {
+  statusEl.textContent = text;
+  statusEl.style.color = bad ? '#dc2626' : '#0f172a';
+}
+
+async function refreshState(): Promise<void> {
+  const state = (await chrome.runtime.sendMessage({ type: 'bak.getState' })) as {
+    ok: boolean;
+    connected: boolean;
+    hasToken: boolean;
+    port: number;
+    debugRichText: boolean;
+    lastError: string | null;
+  };
+
+  if (state.ok) {
+    portInput.value = String(state.port);
+    debugRichTextInput.checked = Boolean(state.debugRichText);
+    if (state.connected) {
+      setStatus('Connected to bak CLI');
+    } else if (state.lastError) {
+      setStatus(`Disconnected: ${state.lastError}`, true);
+    } else {
+      setStatus('Disconnected');
+    }
+  }
+}
+
+saveBtn.addEventListener('click', async () => {
+  const token = tokenInput.value.trim();
+  const port = Number.parseInt(portInput.value.trim(), 10);
+
+  if (!token) {
+    setStatus('Pair token is required', true);
+    return;
+  }
+
+  if (!Number.isInteger(port) || port <= 0) {
+    setStatus('Port is invalid', true);
+    return;
+  }
+
+  await chrome.runtime.sendMessage({
+    type: 'bak.updateConfig',
+    token,
+    port,
+    debugRichText: debugRichTextInput.checked
+  });
+
+  await refreshState();
+});
+
+disconnectBtn.addEventListener('click', async () => {
+  await chrome.runtime.sendMessage({ type: 'bak.disconnect' });
+  await refreshState();
+});
+
+void refreshState();

package/src/privacy.ts

@@ -0,0 +1,135 @@
+export interface RedactTextOptions {
+  debugRichText?: boolean;
+}
+
+export interface NameCandidates {
+  tag: string;
+  role?: string | null;
+  inputType?: string | null;
+  ariaLabel?: string | null;
+  labelledByText?: string | null;
+  labelText?: string | null;
+  placeholder?: string | null;
+  text?: string | null;
+  nameAttr?: string | null;
+}
+
+const MAX_SAFE_TEXT_LENGTH = 120;
+const MAX_DEBUG_TEXT_LENGTH = 320;
+
+const EMAIL_PATTERN = /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b/gi;
+const LONG_DIGIT_PATTERN = /(?:\d[ -]?){13,19}/g;
+const OTP_PATTERN = /^\d{4,8}$/;
+const SECRET_QUERY_PARAM_PATTERN = /(token|secret|password|passwd|otp|code|session|auth)=/i;
+const HIGH_ENTROPY_TOKEN_PATTERN = /^(?=.*\d)(?=.*[a-zA-Z])[A-Za-z0-9~!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?`]{16,}$/;
+
+const INPUT_TEXT_ENTRY_TYPES = new Set([
+  'text',
+  'search',
+  'email',
+  'password',
+  'tel',
+  'url',
+  'number',
+  'date',
+  'datetime-local',
+  'month',
+  'week',
+  'time'
+]);
+
+function normalize(raw: string): string {
+  const cleaned = [...raw]
+    .map((char) => {
+      const code = char.charCodeAt(0);
+      return code < 32 || code === 127 ? ' ' : char;
+    })
+    .join('');
+  return cleaned.replace(/\s+/g, ' ').trim();
+}
+
+function clamp(text: string, options: RedactTextOptions): string {
+  const max = options.debugRichText ? MAX_DEBUG_TEXT_LENGTH : MAX_SAFE_TEXT_LENGTH;
+  return text.length <= max ? text : `${text.slice(0, max - 3)}...`;
+}
+
+function redactByPattern(text: string): string {
+  let output = text;
+
+  if (SECRET_QUERY_PARAM_PATTERN.test(output)) {
+    return '[REDACTED:query-secret]';
+  }
+
+  output = output.replace(EMAIL_PATTERN, '[REDACTED:email]');
+  output = output.replace(LONG_DIGIT_PATTERN, '[REDACTED:number]');
+
+  if (OTP_PATTERN.test(output)) {
+    return '[REDACTED:otp]';
+  }
+
+  if (HIGH_ENTROPY_TOKEN_PATTERN.test(output) && !output.includes(' ')) {
+    return '[REDACTED:secret]';
+  }
+
+  return output;
+}
+
+export function redactElementText(raw: string | null | undefined, options: RedactTextOptions = {}): string {
+  if (!raw) {
+    return '';
+  }
+
+  const normalized = normalize(raw);
+  if (!normalized) {
+    return '';
+  }
+
+  const redacted = redactByPattern(normalized);
+  return clamp(redacted, options);
+}
+
+function isTextEntryField(candidates: NameCandidates): boolean {
+  const tag = candidates.tag.toLowerCase();
+  const role = (candidates.role ?? '').toLowerCase();
+  const inputType = (candidates.inputType ?? '').toLowerCase();
+
+  if (role === 'textbox') {
+    return true;
+  }
+
+  if (tag === 'textarea') {
+    return true;
+  }
+
+  if (tag === 'input') {
+    return INPUT_TEXT_ENTRY_TYPES.has(inputType) || inputType === '';
+  }
+
+  return false;
+}
+
+export function inferSafeName(candidates: NameCandidates, options: RedactTextOptions = {}): string {
+  const allowDebugText = Boolean(options.debugRichText);
+  const fromAria = redactElementText(candidates.ariaLabel, options);
+  const fromLabelledBy = redactElementText(candidates.labelledByText, options);
+  const fromLabel = redactElementText(candidates.labelText, options);
+  const fromPlaceholder = redactElementText(candidates.placeholder, options);
+  const fromNameAttr = redactElementText(candidates.nameAttr, options);
+  const fromText = redactElementText(candidates.text, options);
+
+  const ordered = [fromAria, fromLabelledBy, fromLabel, fromPlaceholder];
+
+  if (!isTextEntryField(candidates) || allowDebugText) {
+    ordered.push(fromText);
+  }
+
+  ordered.push(fromNameAttr);
+
+  for (const value of ordered) {
+    if (value) {
+      return value;
+    }
+  }
+
+  return candidates.tag.toLowerCase();
+}

package/src/reconnect.ts

@@ -0,0 +1,25 @@
+const DEFAULT_BASE_DELAY_MS = 1_500;
+const DEFAULT_MAX_DELAY_MS = 15_000;
+
+export interface ReconnectBackoffOptions {
+  baseDelayMs?: number;
+  maxDelayMs?: number;
+}
+
+function clampNonNegative(value: number): number {
+  if (!Number.isFinite(value) || value < 0) {
+    return 0;
+  }
+  return Math.floor(value);
+}
+
+export function computeReconnectDelayMs(
+  attempt: number,
+  options: ReconnectBackoffOptions = {}
+): number {
+  const baseDelayMs = Math.max(100, clampNonNegative(options.baseDelayMs ?? DEFAULT_BASE_DELAY_MS));
+  const maxDelayMs = Math.max(baseDelayMs, clampNonNegative(options.maxDelayMs ?? DEFAULT_MAX_DELAY_MS));
+  const normalizedAttempt = Number.isFinite(attempt) ? Math.floor(attempt) : 0;
+  const safeAttempt = Math.max(0, Math.min(10, normalizedAttempt));
+  return Math.min(maxDelayMs, baseDelayMs * 2 ** safeAttempt);
+}

package/src/url-policy.ts

@@ -0,0 +1,12 @@
+export function isSupportedAutomationUrl(url?: string): boolean {
+  if (typeof url !== 'string' || !url) {
+    return false;
+  }
+
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "lib": ["ES2022", "DOM"],
+    "types": ["chrome"]
+  },
+  "include": ["src/**/*.ts"]
+}