Skip to content

Latest commit

 

History

History
75 lines (63 loc) · 19.5 KB

stage.md

File metadata and controls

75 lines (63 loc) · 19.5 KB

游目

← 文档目录 · English

模型借浏览器类的 MCP(如 playwright)上网、测它做的网页时,那个浏览器的画面收在言的右侧一栏,不再是屏幕上另开、挡人的一扇窗。游目上可点、可滚、可打字(输入法照常),标签与浏览器同步:模型新开一页或换到别的页,游目跟过去;点别的签,看那一页。

接法

浏览器不在 MCP 里接,在 设置 → 游目 里配:打开「游目」,选用哪个浏览器(Edge、Chrome,本机都没有的选「自带内核」),「驱动」那行点「安装」。言自己起一个 Playwright 的 MCP 服务,名叫「游目」,不列在 MCP 那一栏里;预设里照样可挑。家当都在存储根的「游目」目录:

  • 依赖/:驱动 @playwright/mcp 装在这里(npm,下载源随「环境」那一栏,国内默认走镜像);「更新」即重装最新的。
  • 浏览器/:登录状态与收藏(--user-data-dir)。
  • 下载/:网页里下载的落在这里(--output-dir)。Playwright 自己起名的过程文件(页面快照、控制台记录、没给名的截图)也只能落这里,放过一天的由言清掉。
  • 工作/:服务的工作目录。执事给了名字的截图、存下的页面落在这里。结果里的文件路径一律写全(filePaths: absolute),执事拿自己的工具找得着。
  • 内核/:选「自带内核」时 Playwright 的那个浏览器装在这里,「浏览器」那行多一个「装内核」。下载源自己挑(server/mirror.js):开装前拿内核本身各取 2 MB 比一比镜像与官方哪个快——镜像对新出的内核常要现去源站拉,几十 KB/s,看着像卡死;下着 90 秒没有一点进展,结束它、换另一个源重来。按钮上报下到几成。驱动随常用包比的结果走。装着时刷新页面或再点,跟着同一趟等,不另起。选了本机没装的 Edge / Chrome,同一行出「去下载」,开官网(装系统浏览器要管理员权限,言不代装)。
  • playwright-*.json:接法(按内容取名,一份接法一个文件),见下。

这些目录不许另选,缺的自会建;「存储」那行点「打开文件夹」即到。本机文件一律许开(--allow-unrestricted-file-access):执事做的网页,自己开 file:// 来看、改了再看,不必经人手。

游目要那个浏览器多开三样:调试口 9288、放行言的页面(与调试口自己——「开发者工具」开的前端由它供出,要连回来)、窗口挪到屏幕外。这三样不必人写:言起 Playwright 的 MCP 时自己补上(server/stage.js 的 prepareBrowser;游目自己的那个先由 builtinConfig 拼成整条)——参数里挂了 --config 的,在那份文件上合并,写了的照人的(端口、窗口位置、别的设定);合并好的写到 游目/playwright-<内容哈希前八位>.json,起服务时参数里的 --config 换成它。接的是别处起好的浏览器(--cdp-endpoint)的不补;无头的不挪窗口。MCP 里另接的 Playwright 也照这样补,别的服务原样起。

  • 调试口言自己读:服务参数里的 --cdp-endpoint,或 --config 那份文件里 launchOptions.args 的 --remote-debugging-port;都没写的按 9288。收藏所在的配置目录同样读参数里的 --user-data-dir(或文件里的 userDataDir)。要换端口,在自己的 --config 文件里写,言照着补别的。
  • 调试口取 9288 而不取常见的 9222 / 9223:那两个常被远程调试的端口转发占着(netsh interface portproxy),占了 IPv4 的,浏览器只能退到 IPv6 上听,游目便找不到它。
  • 窗口在屏幕外,任务栏上也不挂它的按钮:Windows 上桥接另起一个看不见的小进程,按调试口认出这个浏览器,把它的窗口从任务栏上摘掉(server/taskbar.js)。新开一扇窗时按钮可能闪一下,一秒内摘掉。
  • 服务的「给模型的话」里写一句「我说打开浏览器即指这个」(一键接入的已写好),模型便不会去开系统默认的浏览器。
  • 这个浏览器打不开言自己:言的页面能改设置,模型开了就能关审查、改权限。言在接法里写上 network.blockedOrigins,屏蔽桥接的地址,端口随 YAN_PORT;你自己接的 Playwright 也一样。这挡的是开页与跳转,不是安全边界:页面里跑代码(browser_run_code_unsafe)仍能直接发请求,与 node -e 同属静态筛查管不到的那类。
  • 窗口挪到屏幕外而不用无头模式:无头的 Edge 在 UA 里带 HeadlessChrome,有的站点认得出来;屏幕外的窗口与平常无异,画面照出。
  • --remote-allow-origins 只放行言的页面与调试口自己(纸签里「开发者工具」开的是浏览器自带的那套前端,由调试口供出,它要连回来);别的网站连不上这个调试口。换了桥接端口(YAN_PORT)的,补上的跟着换。
  • 多个项目的网页(要构建的)照常起开发服务器,模型在浏览器里开 localhost。

用法

  • 接了浏览器类的 MCP(工具里有 browser_navigate 的),正文右上角便自页顶垂下一幅立轴;指针靠近浮出「游目」两字,点它开游目。收起游目,立轴回来。
  • 浏览器没开、或被关掉了:游目里点「打开浏览器」,言替你调一次那个服务的 browser_navigate,浏览器照它的配置起来(登录状态、收藏都在)。
  • 标签是一行字、丝栏相隔,当前那张底下一笔朱,执事所在那张题后一粒朱;指着才露 ×。末尾「+」新开一页。
  • 一道墨线下是地址:平时只写「域名 › 页题」一句(本机的页写 localhost:端口 与路径、本机文件写文件名),指着浮出整串,点它(或 Ctrl+L)换成输入框可改可复制。右端一枚书签带小画是收藏:这一页收着时它着朱。点开是一张收藏签:头一行是这一页的题,右端一枚书签带——墨色时点它即收,已收着朱、旁边两枚小画改与删。底下的夹是一枚细折角、一只小函、墨色加重的夹名与条数,点题头开合(收起哪些记在本机);同夹的条以一道淡墨竖痕收拢,条前一枚淡墨书签带,点一条在当前页打开。指着一条露两枚小画:那支笔是改(就地展开名与址两栏,Enter 存、Esc 弃),字上一笔划去是删(删一个有东西的夹,先浮一句「连同 n 条,再点删去」)。签底「新夹」「整理…」,后者开浏览器自己的收藏页,拖动排序、批量都在那儿。
  • 模型换到别的页(选签、新开),游目跟过去;你自己点了别的签,模型在原来那页上接着做时,游目不硬把你拽回去。
  • 网页弹的提示框(alert、confirm、prompt、离页挽留)浏览器画在屏幕外的窗上,网页就此停住:游目在画面上另画一张,Enter 确定、Esc 取消。模型那头也收得到,谁先答都行。
  • 网页要你选文件(点了「上传」之类):浏览器的选文件窗口同在屏幕外,游目经桥接径直弹系统的选文件窗,选好的路径递进网页(不拷、不经言的页面读)。执事点出来的不往人眼前弹窗,改浮一张纸签,点「选文件」再弹。
  • 网页里的下拉框:浏览器把选项画成另一扇小窗,也在画面之外。游目贴着那一框浮一张纸签列出选项(分组照网页的,当前选着的着朱,十三项起顶上一栏筛选),点一项或方向键加 Enter 选定,Esc 作罢;网页照常收到 change。
  • 右键:浏览器的菜单同在屏幕外,游目在指针处浮一张纸签,只放几样简单的——链接上「新标签打开链接」(后台开)「复制链接」,图上「新标签看图」,选中的字「复制」「引给执事」(作引文带网址,与圈点同一条路),输入框里「剪切」「复制」「粘贴」(递 Ctrl+X / C / V),空白处「后退」「前进」「重新加载」。网页自带右键菜单的照它的。
  • 中键或 Ctrl 点链接,新页在后台开,游目留在原处;指针移出画面,网页知道它走了(悬停展开的菜单收回去)。
  • 载入中地址栏下一道朱线走着;后退、前进没处可去时淡下去。指针跟着网页变:链接上是手、输入框里是竖线。
  • 执事的动静不占一行:它在网页上点哪儿,那里一圈朱笔、贴「点击」;它输入时那一栏下一道朱线、贴「键入」,一两秒淡去。地址行右端挂着「执事」两字带一粒朱(在动时一明一暗,歇手八秒后收起),指着浮出近几步(「前往 github.com」「点击「登录」」「键入「…」」)。
  • 圈点:栏顶那支笔(或按住 Alt)下笔,拖一圈是圈、划一道不合拢的是线(划在字下、画个箭头都行,读的是线上下那一溜的字,给模型的记起止)、点一下是点,朱笔画在画面上,可画数处;每画一处,引文即落进输入框(哪一页、圈住什么字),画面连朱笔另存一张图作附件。送出即与寻常引文一样带给执事;移除引文,画面上的圈点随之清去。再点那支笔或 Esc 收笔。
  • 浏览器的窗口跟着游目的大小走,网页原大显示;游目窄于 960×600 时窗口不再跟着缩(免得网站换成手机版),画面按比例缩小。
  • 适应页面、搜索用哪家在纸签里(开着游目就能调),记进配置;纸签末行「游目设置…」去配游目自己的浏览器。
  • 适应页面(纸签里的开关,默认开着):执事测页面时常把视口定死(setViewportSize、browser_resize),此后窗口怎么变网页都不跟,画面上下留白。留白处写一行「执事把视口定在 1360×900」;开着「适应页面」、且确是执事亲手定的(它调过上面两样),等它歇手(没有在途的浏览器调用、没有在答的对话)便放开——同一网址新开一页、关掉旧的,铺满游目;关着的,或只是量着像定死、执事并没定过的,那一行挂一个「放开」由你点(新开一页会冲掉网页里挂着的脚本、填了一半的表,不凭猜去动)。
  • 栏顶「调律」那枚小画开一张纸签:查找(Ctrl+F)、缩放、历史、下载、整理收藏、打开本机文件(Ctrl+O,系统的选文件窗选好开 file://,网页旁的样式、脚本照引得到;地址栏里直接填路径也行。浏览器显示不了的——Office 文档、压缩包、csv 等,浏览器会当成下载——当场取消,交给本机程序打开原件,不拷进下载目录;可执行的不开)、复制网址、用系统浏览器打开(经桥接交给系统默认的浏览器)、开发者工具、浏览器设置、游目设置。历史、下载、收藏、设置开的都是浏览器自己的那几页(一张新签),Cookie、密码、网站权限、清除浏览数据都在设置页里,言不另做一套。
  • 查找:地址行换成查找栏,网页里各处淡黄、当前一处着朱并滚到眼前,写着「2 / 7」;Enter 下一处,Shift+Enter 上一处,Esc 收起。
  • 缩放:纸签里「− 100% +」,或键盘在网页里时 Ctrl + / − / 0。放大一档是把窗收窄一档,网页照自己的断点重排、字在游目里大一档;放大时画面会略软。
  • 下载:网页里一开始下载(你点的、执事点的都算),纸签上「下载」后记着新的数目;下载签里列名字、大小、来处、何时,点一条在资源管理器里显出它(只显出、不打开),「全部下载…」开浏览器自己的下载页。
  • 游目收着时,立轴报浏览器的状态:卷成一根轴是未开;展开是开着;轻摆、朱日外一晕是模型在用——调过 browser_* 工具的那一答没收尾之前都算,步与步之间不灭,帮手还在做也算。
  • 拖游目左缘调宽窄,宽度记在本机;栏顶往两角撑开的那枚小画是「阔」,铺满整页,Esc 退回。键盘交给网页时画面四角各一笔取景角。旁注也在右侧,旁注开着时游目暂让。
  • 点画面即把键盘交给那一页:按键(含 Ctrl+C / V)、输入法打的字都递进去;点言的别处即收回。浏览器自己接的几个键游目代接:Ctrl+L / Alt+D / F6 到地址栏,Ctrl+O 开本机文件,F5 / Ctrl+R 重载,Alt+← / → 与鼠标侧键前后。Ctrl+T、Ctrl+W 外头的浏览器拦不住,不接。
  • 地址栏可直接输网址、localhost:端口、本机路径(E:\…\index.html);不像网址的(有空格、没有点)当成要搜的话,交给纸签里选的那家(必应、百度、Google,点一下换一家)。

怎么做的

  • 游目是那个浏览器的另一位看客:页面直连调试口,Page.startScreencast 收画面,Input.* 递点按,标签照 Target.setDiscoverTargets 抄。画面不过桥接;桥接只替页面问出连接的地址(server/stage.js,调试口的 /json 不给跨源读)。
  • 网页的尺寸:playwright 有头时不设视口,网页多大即窗口多大。游目一变大小(停手 250 毫秒后),便以 Browser.setWindowBounds 把屏幕外那扇窗调成游目的大小,窗比网页多出的标签栏、地址栏按现量补上。设了固定视口的浏览器调窗口没用,画面照旧按宽高里较紧的一边缩放;点按都按同一倍数换算回去。宽够时画面一比一:窗按游目的宽高取整往下、视口按 innerWidth 量(带滚动条,与推来的帧同宽),画幅再挪到整的设备像素上——差一两个像素整幅就被重采一回、字边发虚。画面动着时推 JPEG(照片多的页 PNG 一帧近 2 MB、一秒只出十几帧),静下来 400 毫秒截一张 PNG 换上;截图会引来一帧同样的画面,同一画面编出的 JPEG 一字不差,与上一帧相同的不画。
  • 何时去连:开页时、打开游目时,与每次 browser_* 调用之后(浏览器多半是这时起的)。浏览器关了游目清空,不轮询。言自己从不起浏览器,「打开浏览器」也是经那个 MCP 服务起的。
  • 跟页:每次 browser_* 调用之后顺带问一声浏览器前台是哪一页(调试口的 /json/list 按最近活动排,模型选签会把那页请到前台),与上回问到的不同才跟;你点签时游目也把那页请到前台并记下,所以不算模型换页。
  • 浏览器自己画的那几样(提示框、载入中、能否后退)在屏幕外:游目对正看的那一页开 Page.enable,照 javascriptDialogOpening、frameStartedLoading、frameNavigated 等事件自己画;前后走 Page.navigateToHistoryEntry,不经网页里的脚本。选文件开 Page.setInterceptFileChooserDialog,收到 fileChooserOpened 时人刚在游目里点按过(1.5 秒内)就经桥接弹系统的选文件窗(POST /api/work/pick,files: true,与选工作目录同一个对话框),否则浮纸签;选好的真路径以 DOM.setFileInputFiles 交给网页。下拉框(<select>)的小窗不在网页的画面里:网页里那个耳目(见下「模型的动静」)一并拦下人开它的那一下(按下,或 F4、Alt+↓、空格),报来选项与那一框的位置,游目浮纸签;选好了经耳目写回 selectedIndex、补发 input 与 change。网页自己拦了的、跨源框里的不接,照浏览器原样;执事点的不浮(它用 select_option)。
  • 指针:网页里那个耳目听着指针移动,指着的那一件要的 cursor 变了才报一声(链接是手、输入框是竖线),游目照样设到画面上,不再隔一会儿去问。
  • 模型的动静:browser_* 调用的参数照 playwright MCP 的写法写成两字动词的一句(stageActionText),记最近几步。它在网页上哪儿下手,靠网页里一个只给游目听的耳目(src/26-stage/50-ink.js):独立的脚本世界里听真按下与输入,经 Runtime.addBinding 报回那一块的位置;执事正在调浏览器、又不是人刚在画面上按的,便画一笔。
  • 圈点:与划选正文「引用」同一条路,不另起标注。圈点按网页里的位置记(视口坐标加上画面帧里报来的滚动),网页滚动后朱笔跟着走;落笔时问网页那一块看得见的字(点是那一处那一件的字)。引文分两份:界面上一句,给模型的那份另带网址与各处的位置(CSS 像素,与附图同一取景)。附图是此刻的画面叠上朱笔,存成一件寻常附件;再圈一处,引文与图一并换新。点那一问上方的引文回到游目那一页。
  • 只在看得见时收画面:游目收起、被旁注挤开、言的页面到了后台,都停掉 screencast;回来再接上。
  • 收藏:游目只转网页,浏览器自己的收藏栏在画面之外。收藏存在浏览器配置目录的 Default/Bookmarks,目录取自那个服务参数里的 --user-data-dir,由桥接读出(POST /api/stage/bookmarks,与找调试口一样只递那个服务的参数),每回现读。改收藏借浏览器自己的收藏页:那一页里调得到 chrome.bookmarks,增删改浏览器即刻生效,不碰配置文件。那一页开在另起的一个浏览器上下文里(Target.createBrowserContext)——执事(Playwright)不认得它、游目也不列它,收藏是整个配置共用的,照样进主收藏夹;调完即关。刚改完的十秒内信浏览器递回的那棵树(文件过一两秒才落盘)。
  • 适应页面:Playwright 记着定死的视口,换页会再钉回去,游目这头另起连接也清不掉(实测)——所以放开是经那个 MCP 服务的 browser_tabs 先 new 一张空页(成了执事的当前页,标签账对得上),游目随即按 targetId 关掉旧页(Playwright 照关页事件销账),再 browser_navigate 回那个网址。不按执事报的序号关:同址新开要等载完,其间人若先关了旧页,序号就落到新页上,关掉最后一页浏览器随之退出。执事调 browser_resize、或在 browser_run_code_unsafe 里 setViewportSize 时,工具结果后补一句(prompts/mcp.js 的 stagePinned),叫它测完新开一页而不是再设个桌面尺寸「还原」。
  • 缩放:浏览器自己的缩放经调试口调不动(借收藏页里的 chrome.tabs.setZoom 一调就卡住),所以是调窗:窗宽按倍数收窄,画面的最大宽按同一倍数放开。
  • 查找:在网页里跑一小段,用 CSS 的高亮(::highlight,样式经 adoptedStyleSheets 挂上)标出各处,不动网页的 DOM;只找同一段文字里的。
  • 下载:对正看的那一页开着 Page 域,downloadWillBegin / downloadProgress 报来名字与进度;执事经 MCP 下的,结果里「Downloaded file … to …」写着存到哪,补上。记录存在本机(最近三十条)。显出文件走桥接(POST /api/stage/reveal,explorer /select),没记着路径的(你点的下载、之后执事没再动手)按名字在存下载的目录里找,找不着才开整个目录(--output-dir,或服务工作目录下的 .playwright-mcp)。Edge 下载时弹的气泡(edge://downloads-hub)也报成一页,游目不列。
  • 网页改标题浏览器不发通知:游目开着时每一秒半问一次标签列表。
  • 代码:src/26-stage/、styles/56-stage/;测试 test/stage.mjs 另起一个无头浏览器实例充当模型的浏览器(单窗口),言的页面留在测试浏览器里。