fix(extension): bound link drafts and stabilize browser QA

Author: waleedlatif1

apps/extension/scripts/test-e2e.ts

@@ -378,6 +378,74 @@ try {
     }
   )
 
+  await check(
+    'Link drafts enforce the saved URL limit after removing private URL parts',
+    async () => {
+      const prefix = 'https://links.controls.test/'
+      const cases = [
+        {
+          name: 'A canonical 2048-character destination remains usable',
+          input: `${prefix}${'a'.repeat(2048 - prefix.length)}`,
+          expected: `${prefix}${'a'.repeat(2048 - prefix.length)}`,
+        },
+        {
+          name: 'A canonical 2049-character destination does not open an unsavable draft',
+          input: `${prefix}${'a'.repeat(2049 - prefix.length)}`,
+          expected: null,
+        },
+        {
+          name: 'URL serialization cannot expand a short Unicode input beyond the saved limit',
+          input: `${prefix}${'é'.repeat(400)}`,
+          expected: null,
+        },
+        {
+          name: 'A removable long private query does not reject a short destination',
+          input: `${prefix}safe?token=${'s'.repeat(3000)}#private-section`,
+          expected: `${prefix}safe`,
+        },
+      ]
+      const failures: string[] = []
+      for (const entry of cases) {
+        await page.bringToFront()
+        const opened = await worker.evaluate(async (linkUrl) => {
+          const before = await chrome.tabs.query({})
+          const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
+          if (!tab) throw new Error('Missing context-menu source tab')
+          const clicked = chrome.contextMenus.onClicked as typeof chrome.contextMenus.onClicked & {
+            dispatch: (info: chrome.contextMenus.OnClickData, tab: chrome.tabs.Tab) => void
+          }
+          clicked.dispatch({ menuItemId: 'create-sim-link', linkUrl, editable: false }, tab)
+          const created = (await chrome.tabs.query({})).filter(
+            (candidate) => !before.some((existing) => existing.id === candidate.id)
+          )
+          const urls = created.map((candidate) => candidate.pendingUrl || candidate.url || '')
+          for (const candidate of created) {
+            if (candidate.id !== undefined) await chrome.tabs.remove(candidate.id)
+          }
+          return urls
+        }, entry.input)
+        if (entry.expected === null) {
+          if (opened.length !== 0) failures.push(`${entry.name}: opened ${opened.length} draft`)
+          continue
+        }
+        if (opened.length !== 1) {
+          failures.push(`${entry.name}: opened ${opened.length} drafts`)
+          continue
+        }
+        const draft = new URL(opened[0])
+        if (
+          draft.origin !== origin ||
+          draft.pathname !== '/extension/create-link' ||
+          draft.search !== '' ||
+          new URLSearchParams(draft.hash.slice(1)).get('url') !== entry.expected
+        )
+          failures.push(`${entry.name}: incorrect private-safe destination handoff`)
+      }
+      assert(failures.length === 0, failures.join('\n'))
+      await page.bringToFront()
+    }
+  )
+
   await check('Capture stays local until the trusted hosted frame is ready', async () => {
     await capture()
     await panel.getByRole('status').filter({ hasText: 'Waiting for Sim' }).waitFor()

apps/sim/lib/api/contracts/sim-links.ts

@@ -1,5 +1,6 @@
 import {
   SIM_LINK_SUGGESTIONS_PATH,
+  SIM_LINK_URL_MAX_LENGTH,
   simLinkSuggestionsSchema,
 } from '@sim/browser-extension-protocol'
 import { z } from 'zod'
@@ -44,7 +45,7 @@ export const listSimLinksQuerySchema = z
   .object({
     search: z.string().max(200).optional(),
     /** Only links whose destination is exactly this URL, such as one shown in a search result. */
-    url: z.string().min(1).max(2048).optional(),
+    url: z.string().min(1).max(SIM_LINK_URL_MAX_LENGTH).optional(),
     cursor: z.string().min(1).max(128).optional(),
     sort: z.enum(SIM_LINK_SORTS).optional(),
     dir: z.enum(SORT_DIRECTIONS).optional(),

apps/sim/lib/sim-links/validation.ts

@@ -1,12 +1,11 @@
-import { SIM_LINK_NAME_MAX_LENGTH } from '@sim/browser-extension-protocol'
+import { SIM_LINK_NAME_MAX_LENGTH, SIM_LINK_URL_MAX_LENGTH } from '@sim/browser-extension-protocol'
 import { z } from 'zod'
 
 const NAME_PATTERN = /^[A-Za-z0-9.:@&~_-]+$/
 const NAME_PUNCTUATION = /[.:@&~_-]/g
 const NAME_DISALLOWED = /[^A-Za-z0-9.:@&~_-]/g
 export const MAX_MANAGED_BOOKMARKS = 100
 export const SIM_LINK_DESCRIPTION_MAX_LENGTH = 500
-const URL_MAX_LENGTH = 2048
 
 /** List orders: alphabetical by name, or most visited first. */
 export const SIM_LINK_SORTS = ['name', 'popular'] as const
@@ -120,7 +119,7 @@ const destinationSchema = z
   .string()
   .trim()
   .min(1, 'Enter a destination URL')
-  .max(URL_MAX_LENGTH, `Use at most ${URL_MAX_LENGTH} characters`)
+  .max(SIM_LINK_URL_MAX_LENGTH, `Use at most ${SIM_LINK_URL_MAX_LENGTH} characters`)
 
 const simLinkUrlSchema = destinationSchema.refine(
   (url) => simLinkOrigin(url) !== null,

apps/sim/scripts/test-browser-extension-e2e.ts

@@ -234,6 +234,7 @@ async function seed() {
       await tx`insert into workspace (id, project_id, name, owner_id, billed_account_user_id) values (${id}, ${alphaId}, ${`Extension QA workspace ${index + 1}`}, ${owner}, ${owner})`
       await tx`insert into permissions (id, user_id, entity_type, entity_id, permission_type) values (${generateId()}, ${owner}, 'workspace', ${id}, 'admin')`
     }
+    await tx`update workspace set created_at = '2020-01-01T00:00:00Z' where id = ${alphaId}`
     await tx`insert into workflow (id, user_id, workspace_id, name, last_synced, created_at, updated_at) values (${workflowId}, ${owner}, ${alphaId}, 'Extension QA workflow', now(), now(), now())`
     await tx`insert into "user" (id, name, email, email_verified, created_at, updated_at) values (${otherUserId}, 'Other extension QA user', ${`extension-other-${otherUserId}@example.test`}, false, now(), now())`
     await tx`insert into project (id, name, owner_id) values (${deniedId}, 'Inaccessible QA project', ${otherUserId})`
@@ -340,8 +341,26 @@ try {
   context.setDefaultNavigationTimeout(120_000)
   let worker = context.serviceWorkers()[0] ?? (await context.waitForEvent('serviceworker'))
   const extensionId = worker.url().split('/')[2]
-  const openPanel = async () => {
+  const setPageViewport = async (page: Page, width: number, height: number) => {
+    await page.setViewportSize({ width, height })
+    const session = await browserContext.newCDPSession(page)
+    try {
+      const { windowId } = await session.send('Browser.getWindowForTarget')
+      // OOPIF hit testing uses the native content bounds, including below the browser toolbar.
+      await session.send('Browser.setContentsSize', { windowId, width, height })
+    } finally {
+      await session.detach()
+    }
+  }
+  const openPage = async () => {
     const page = await browserContext.newPage()
+    const viewport = page.viewportSize()
+    assert(viewport, 'Browser fixture must declare its viewport')
+    await setPageViewport(page, viewport.width, viewport.height)
+    return page
+  }
+  const openPanel = async () => {
+    const page = await openPage()
     await page.route('**/api/settings/voice', (route) =>
       route.fulfill({ json: { sttAvailable: true } })
     )
@@ -393,17 +412,7 @@ try {
   }
   panel = await openPanel()
   let shell = panel
-  const setPanelViewport = async (width: number, height: number) => {
-    await shell.setViewportSize({ width, height })
-    const session = await browserContext.newCDPSession(shell)
-    try {
-      const { windowId } = await session.send('Browser.getWindowForTarget')
-      // OOPIF hit testing uses the native content bounds, including below the browser toolbar.
-      await session.send('Browser.setContentsSize', { windowId, width, height })
-    } finally {
-      await session.detach()
-    }
-  }
+  const setPanelViewport = (width: number, height: number) => setPageViewport(shell, width, height)
   await panel.goto(`chrome-extension://${extensionId}/sidepanel.html`)
   const frame = () => {
     const app = shell.frames().find((candidate) => candidate.url().startsWith(base.origin))
@@ -469,7 +478,7 @@ try {
     await navigate(`${base.origin}/extension/${alphaId}`)
     await expect(frame().getByRole('textbox', { name: 'Message', exact: true })).toBeVisible()
   }
-  let source = await context.newPage()
+  let source = await openPage()
   await source.goto(`${fixtureOrigin}/page?private=QUERY_SECRET#FRAGMENT_SECRET`)
   const observeCaptureReceipts = () =>
     shell.evaluate((origin) => {
@@ -796,7 +805,7 @@ try {
   await checkComposer(
     'The ordinary web composer accepts text selections and rejects links and remote images',
     async () => {
-      const app = await browserContext.newPage()
+      const app = await openPage()
       const remote = new URL('/ordinary-drop-image.png', fixtureOrigin)
       const navigationAttempts: string[] = []
       await browserContext.route(remote.href, (route) => {
@@ -1512,12 +1521,12 @@ try {
     async () => {
       const endpoint = `${base.origin}/api/mothership/chat`
       const received: Record<string, unknown>[] = []
-      const second = await browserContext.newPage()
+      const second = await openPage()
       await second.goto(`${fixtureOrigin}/reference-second?private=DO_NOT_SEND#private`)
       await second.locator('article p').evaluate((el) => {
         el.textContent = 'Second active tab: JADE-231.'
       })
-      const restricted = await browserContext.newPage()
+      const restricted = await openPage()
       await restricted.goto(`http://ungranted.localhost:${fixtureAddress.port}/denied`)
       await browserContext.route(endpoint, (route) => {
         if (route.request().method() !== 'POST') return route.continue()
@@ -1973,7 +1982,7 @@ try {
         return animation
       }
     })
-    source = await browserContext.newPage()
+    source = await openPage()
     await source.goto(`${fixtureOrigin}/page?private=QUERY_SECRET#FRAGMENT_SECRET`)
     await shell.goto(`chrome-extension://${extensionId}/sidepanel.html`)
     await observeCaptureReceipts()
@@ -2254,6 +2263,10 @@ try {
             'A transient workspace-list refetch unmounted the picker'
           )
           assert.equal(await scroller.evaluate((element) => element.scrollTop), scrollTop)
+          await expect(choices.getByRole('link').last()).toHaveAttribute(
+            'href',
+            `/extension/${alphaId}`
+          )
           await screenshot('workspace-picker-refetch-outage')
           await choices.getByRole('link', { name: 'Extension QA alpha', exact: true }).click()
           await expect(frame().getByRole('textbox', { name: 'Message', exact: true })).toBeVisible()

packages/browser-extension-protocol/src/index.ts

@@ -120,6 +120,9 @@ export type ExtensionToAppMessage = z.infer<typeof extensionToAppMessageSchema>
 /** The longest Sim link name; the extension asks about nothing longer. */
 export const SIM_LINK_NAME_MAX_LENGTH = 64
 
+/** Destination limit shared by editable drafts and saved Sim links. */
+export const SIM_LINK_URL_MAX_LENGTH = 2048
+
 /** Where the extension asks for the address-bar suggestions behind its `sim` keyword. */
 export const SIM_LINK_SUGGESTIONS_PATH = '/api/sim-links/suggestions'
 
@@ -143,7 +146,7 @@ export function simLinkDraftDestination(value: string): string | null {
     if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password) return null
     url.search = ''
     url.hash = ''
-    return url.href
+    return url.href.length <= SIM_LINK_URL_MAX_LENGTH ? url.href : null
   } catch {
     return null
   }