WayinVideo: A Chrome extension that summarises YouTube and Bilibili videos, with clickable timestamps and chat about what's on screen.

The host page renders late and changes video without reloading, so mounting is retried, not awaited: each attempt checks for its own element id first, and on every URL change (tabs.onUpdated) the worker tells the tab to mount again. Ant Design runs under a wayin class prefix to avoid CSS clashes.

The content script owns the UI and the video; the service worker owns the network, tabs and screenshots. Between them is only JSON messages.

A content script’s fetch runs as youtube.com and hits CORS; the worker doesn’t. The catch: sendMessage carries only JSON, so screenshots cross as base64 and become a Blob in the worker.

{
  "start": "250000",
  "end":   "380000",
  "desc":  "A timestamp is a seek",
  "events": [
    { "timestamp": "262000", "desc": "Highlights arrive in milliseconds" },
    { "timestamp": "302000", "desc": "The round trip through the worker" }
  ]
}

No player API, so one line seeks on both sites. The slider clamps with min/max, since a range can arrive reversed.

An extension has no redirect page on the API’s domain, so the worker opens Google sign-in in a popup and watches its URL.

1url = startGoogleSignIn() in the service worker2windows.create({ url, type: 'popup' })34tabs.onUpdated((tabId, change, tab) =>5if isVideoSite(tab.url): lastVideoTab = tabId remembered on every load6if isSignInComplete(change.url):7session = readSession(change.url)8storage.sync.set({ session })9tabs.sendMessage(lastVideoTab, 'login-success')10windows.remove(tab.windowId)11)

The session lives in chrome.storage.sync; when it expires, every panel returns to sign-in.

The camera button asks the worker for captureVisibleTab, opens a crop tool, and attaches the selection to the next question.

The image uploads first, then text and image go as one turn. Enter is ignored between compositionstart and compositionend, where a Chinese IME uses it to confirm characters.