@opentiny/next-sdk 0.4.1 → 0.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (90) hide show
  1. package/dist/{SimulatorMask-BHVXyogh-iNUb4dyF.js → SimulatorMask-BHVXyogh-CKmEDsYG.js} +1 -1
  2. package/dist/core.js +1 -1
  3. package/dist/{index-CXK8CcKq.js → index-CHMa2zG4.js} +1985 -1434
  4. package/dist/index.d.ts +11 -0
  5. package/dist/index.js +69 -50
  6. package/dist/{initialize-builtin-WebMCP-rALfqS-o.js → initialize-builtin-WebMCP-JaoKwVlm.js} +355 -346
  7. package/dist/page-tools/a11y/build.d.ts +3 -4
  8. package/dist/page-tools/a11y/config.d.ts +99 -0
  9. package/dist/page-tools/a11y/constants.d.ts +22 -0
  10. package/dist/page-tools/a11y/search.d.ts +1 -1
  11. package/dist/page-tools/a11y/types.d.ts +13 -22
  12. package/dist/page-tools/a11y/utils.d.ts +46 -11
  13. package/dist/page-tools/a11y/vnode.d.ts +14 -11
  14. package/dist/page-tools/a11y-tree.d.ts +1 -0
  15. package/dist/page-tools/configs/console-cloud.d.ts +6 -0
  16. package/dist/page-tools/constants.d.ts +7 -17
  17. package/dist/page-tools/context.d.ts +14 -0
  18. package/dist/page-tools/handlers/hover.d.ts +9 -0
  19. package/dist/page-tools/handlers/searchTree.d.ts +2 -1
  20. package/dist/page-tools/page-agent-highlight/index.d.ts +12 -0
  21. package/dist/page-tools/page-agent-mask/SimulatorMask.d.ts +2 -0
  22. package/dist/page-tools/page-agent-tool-event.d.ts +26 -0
  23. package/dist/page-tools/schema.d.ts +4 -3
  24. package/dist/page-tools/tool-config.d.ts +50 -0
  25. package/dist/page-tools/utils/dom.d.ts +8 -2
  26. package/dist/runtime.d.ts +4 -1
  27. package/dist/runtime.js +22 -187
  28. package/dist/vitest.config.d.ts +2 -0
  29. package/package.json +26 -16
  30. package/WebMcpClient.ts +0 -505
  31. package/WebMcpServer.ts +0 -447
  32. package/agent/AgentModelProvider.ts +0 -932
  33. package/agent/type.ts +0 -91
  34. package/agent/utils/generateReActPrompt.ts +0 -71
  35. package/agent/utils/getAISDKTools.ts +0 -34
  36. package/agent/utils/getBuiltinMcpTools.ts +0 -86
  37. package/agent/utils/parseReActAction.ts +0 -34
  38. package/core.ts +0 -26
  39. package/index.ts +0 -56
  40. package/page-tools/a11y/build.ts +0 -70
  41. package/page-tools/a11y/constants.ts +0 -110
  42. package/page-tools/a11y/search.ts +0 -129
  43. package/page-tools/a11y/types.ts +0 -108
  44. package/page-tools/a11y/utils.ts +0 -266
  45. package/page-tools/a11y/vnode.ts +0 -229
  46. package/page-tools/a11y-tree.ts +0 -13
  47. package/page-tools/bridge.ts +0 -702
  48. package/page-tools/constants.ts +0 -72
  49. package/page-tools/context.ts +0 -13
  50. package/page-tools/effects.ts +0 -345
  51. package/page-tools/handlers/browserState.ts +0 -12
  52. package/page-tools/handlers/click.ts +0 -26
  53. package/page-tools/handlers/executeJavascript.ts +0 -22
  54. package/page-tools/handlers/fill.ts +0 -60
  55. package/page-tools/handlers/scroll.ts +0 -66
  56. package/page-tools/handlers/searchTree.ts +0 -30
  57. package/page-tools/handlers/select.ts +0 -34
  58. package/page-tools/initialize-builtin-WebMCP.ts +0 -20
  59. package/page-tools/page-agent-highlight/index.ts +0 -198
  60. package/page-tools/page-agent-mask/SimulatorMask.module.css +0 -14
  61. package/page-tools/page-agent-mask/SimulatorMask.ts +0 -279
  62. package/page-tools/page-agent-mask/checkDarkMode.ts +0 -181
  63. package/page-tools/page-agent-mask/cursor-border.svg +0 -3
  64. package/page-tools/page-agent-mask/cursor-fill.svg +0 -5
  65. package/page-tools/page-agent-mask/cursor.module.css +0 -70
  66. package/page-tools/page-agent-prompt.md +0 -139
  67. package/page-tools/page-agent-tool.ts +0 -175
  68. package/page-tools/page-state-cache.ts +0 -78
  69. package/page-tools/schema.ts +0 -51
  70. package/page-tools/utils/dom.ts +0 -155
  71. package/page-tools/utils/scroll.ts +0 -58
  72. package/remoter/QrCode.ts +0 -54
  73. package/remoter/createRemoter.ts +0 -957
  74. package/remoter/svgs/chat.svg +0 -43
  75. package/remoter/svgs/icon-copy.svg +0 -25
  76. package/remoter/svgs/link.svg +0 -28
  77. package/remoter/svgs/logo.svg +0 -45
  78. package/remoter/svgs/qrcode.svg +0 -35
  79. package/remoter/svgs/scan.svg +0 -21
  80. package/remoter/tooltips.ts +0 -260
  81. package/runtime.html +0 -39
  82. package/runtime.ts +0 -13
  83. package/script/utils.ts +0 -26
  84. package/skills/index.ts +0 -287
  85. package/tsconfig.json +0 -16
  86. package/utils/builtinProxy.ts +0 -144
  87. package/utils/env.ts +0 -13
  88. package/utils/uuid.ts +0 -10
  89. package/vite.config.runtime.ts +0 -22
  90. package/vite.config.ts +0 -63
@@ -1,5 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
2
- <defs>
3
- </defs>
4
- <g xmlns="http://www.w3.org/2000/svg" style="filter: drop-shadow(light-dark(rgba(0, 0, 0, 0.4), rgba(237, 237, 237, 0.4)) 3px 4px 4px);"><path d="M 15 42 L 15 36.99 Q 15 31.99 23.7 31.99 L 28.05 31.99 Q 32.41 31.99 32.41 21.99 L 32.41 17 Q 32.41 12 41.09 16.95 L 76.31 37.05 Q 85 42 76.31 46.95 L 41.09 67.05 Q 32.41 72 32.41 62.01 L 32.41 57.01 Q 32.41 52.01 23.7 52.01 L 19.35 52.01 Q 15 52.01 15 47.01 Z" fill="#ffffff" stroke="none" style="fill: #ffffff;"/></g>
5
- </svg>
@@ -1,70 +0,0 @@
1
- .webmcp-page-agent-cursor {
2
- position: absolute;
3
- width: var(--cursor-size, 75px);
4
- height: var(--cursor-size, 75px);
5
- pointer-events: none;
6
- z-index: 10000;
7
- }
8
-
9
- .webmcp-page-agent-cursorBorder {
10
- position: absolute;
11
- width: 100%;
12
- height: 100%;
13
- background: linear-gradient(45deg, rgb(57, 182, 255), rgb(189, 69, 251));
14
- mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20fill='none'%3e%3cg%3e%3cpath%20d='M%2015%2042%20L%2015%2036.99%20Q%2015%2031.99%2023.7%2031.99%20L%2028.05%2031.99%20Q%2032.41%2031.99%2032.41%2021.99%20L%2032.41%2017%20Q%2032.41%2012%2041.09%2016.95%20L%2076.31%2037.05%20Q%2085%2042%2076.31%2046.95%20L%2041.09%2067.05%20Q%2032.41%2072%2032.41%2062.01%20L%2032.41%2057.01%20Q%2032.41%2052.01%2023.7%2052.01%20L%2019.35%2052.01%20Q%2015%2052.01%2015%2047.01%20Z'%20fill='none'%20stroke='%23000000'%20stroke-width='6'%20stroke-miterlimit='10'%20style='stroke:%20light-dark(rgb(0,%200,%200),%20rgb(255,%20255,%20255));'/%3e%3c/g%3e%3c/svg%3e");
15
- mask-size: 100% 100%;
16
- mask-repeat: no-repeat;
17
-
18
- transform-origin: center;
19
- transform: rotate(-90deg) scale(0.8);
20
- margin-left: -10px;
21
- margin-top: -18px;
22
- }
23
-
24
- .webmcp-page-agent-cursorFilling {
25
- position: absolute;
26
- width: 100%;
27
- height: 100%;
28
- background: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3e%3cdefs%3e%3c/defs%3e%3cg%20xmlns='http://www.w3.org/2000/svg'%20style='filter:%20drop-shadow(light-dark(rgba(0,%200,%200,%200.4),%20rgba(237,%20237,%20237,%200.4))%203px%204px%204px);'%3e%3cpath%20d='M%2015%2042%20L%2015%2036.99%20Q%2015%2031.99%2023.7%2031.99%20L%2028.05%2031.99%20Q%2032.41%2031.99%2032.41%2021.99%20L%2032.41%2017%20Q%2032.41%2012%2041.09%2016.95%20L%2076.31%2037.05%20Q%2085%2042%2076.31%2046.95%20L%2041.09%2067.05%20Q%2032.41%2072%2032.41%2062.01%20L%2032.41%2057.01%20Q%2032.41%2052.01%2023.7%2052.01%20L%2019.35%2052.01%20Q%2015%2052.01%2015%2047.01%20Z'%20fill='%23ffffff'%20stroke='none'%20style='fill:%20%23ffffff;'/%3e%3c/g%3e%3c/svg%3e");
29
- background-size: 100% 100%;
30
- background-repeat: no-repeat;
31
-
32
- transform-origin: center;
33
- transform: rotate(-90deg) scale(0.8);
34
- margin-left: -10px;
35
- margin-top: -18px;
36
- }
37
-
38
- .webmcp-page-agent-cursorRipple {
39
- position: absolute;
40
- width: 100%;
41
- height: 100%;
42
- pointer-events: none;
43
- margin-left: -50%;
44
- margin-top: -50%;
45
-
46
- &::after {
47
- content: '';
48
- opacity: 0;
49
- position: absolute;
50
- inset: 0;
51
- border: 4px solid rgba(57, 182, 255, 1);
52
- border-radius: 50%;
53
- }
54
- }
55
-
56
- .webmcp-page-agent-cursor.clicking .webmcp-page-agent-cursorRipple::after {
57
- animation: webmcp-page-agent-cursor-ripple 300ms ease-out forwards;
58
- }
59
-
60
- @keyframes webmcp-page-agent-cursor-ripple {
61
- 0% {
62
- transform: scale(0);
63
- opacity: 1;
64
- }
65
-
66
- 100% {
67
- transform: scale(2);
68
- opacity: 0;
69
- }
70
- }
@@ -1,139 +0,0 @@
1
- ## 角色
2
-
3
- 你是浏览器页面的操作工具,你拥有识别网页内容,点击,填写,选择下拉框和滚动页面等功能。
4
-
5
- 在执行页面操作之前,你必须先调用`browserState`工具一次,根据最新的网页状态,再调用操作动作,比如 'click','fill','select' 等动作。
6
-
7
- <intro>
8
- 你擅长以下任务:
9
- 1. 导航复杂网站并提取精确信息
10
- 2. 自动化表单提交和交互式网页操作
11
- 3. 收集和保存信息
12
- 4. 在代理循环中有效运行
13
- 5. 高效执行多样化的网页任务
14
- </intro>
15
-
16
- <input>
17
- 在每一步,你的输入将包括:
18
- 1. <agent_history>:一个按时间顺序排列的事件流,包括你之前的操作及其结果。
19
- 2. <agent_state>:当前的 <user_request> 和 <step_info>。
20
- 3. <browser_state>:当前 URL、页面标题、可交互元素总数以及语义化 YAML 树。
21
- </input>
22
-
23
- <browser_state>
24
-
25
- 浏览器状态包含以下内容:
26
-
27
- - url: 当前查看页面的 URL。
28
- - title: 当前查看页面的标题。
29
- - 可交互元素总数:带有 `#N` 标记的元素数量。
30
- - YAML 树:页面的语义化结构,格式如下:
31
-
32
- ```yaml
33
- - region:
34
- - main:
35
- - button #9 [cursor=pointer] "产品文档"
36
- - button #47 [selected] [cursor=pointer] "40元/月 2核CPU 2GB内存"
37
- - radio #53 [checked] [cursor=pointer] "自动生成密码"
38
- - button #74 [cursor=pointer] "立即购买"
39
- - generic #6 [cf-uba="serviceList..Flexus云服务"] "Flexus云服务"
40
- ```
41
-
42
- 节点格式说明:
43
- - `- role #N [token1] [token2] "accessible name"`
44
- - `role`:ARIA 语义角色(如 button/link/radio/heading/listitem/generic 等)
45
- - `#N`:可交互元素的唯一操作索引,**只有带 `#N` 的节点才能被操作**,操作时将 N 作为 `index` 参数传入
46
- - `[token]`:可选 token,包括状态标记(如 `[checked]` `[selected]` `[disabled]` `[cursor=pointer]`)和定制属性(如 `[cf-uba="..."]`)
47
- - `"accessible name"`:元素的语义化名称,**用双引号包裹**(通过 aria-label/aria-labelledby/innerText 等计算得出);无名称的节点此字段省略
48
- - 缩进表示父子关系
49
-
50
- </browser_state>
51
-
52
- <responseMode>
53
-
54
- `page-agent-tool` 支持 `responseMode` 参数,用于控制操作后返回的页面状态形式:
55
-
56
- - **`diff`**(默认):仅返回自上一次状态以来的增量 DOM 差异,极大节省 Token。
57
- - **`full`**:返回当前视口中完整的语义化 ARIA YAML 树。
58
- - **`both`**:同时返回全量树和增量差异。
59
-
60
- 执行 `click`、`fill`、`select`、`scroll` 操作后,工具默认自动以 `diff` 模式返回最新页面状态,无需再次手动调用 `browserState`。
61
-
62
- </responseMode>
63
-
64
- <browser_state_diff>
65
-
66
- 在交互过程中,为了提高效率和减少上下文占用,工具会生成页面的增量差异(Diff)信息。
67
- Diff 格式示例如下:
68
- ```diff
69
- - button #9: 产品文档
70
- + button #9: 产品文档 (已点击)
71
- ```
72
- 或者,当页面结构发生改变时,会展示新增或移除的节点差异。
73
-
74
- ### 页面状态获取四原则(重要,请严格遵守):
75
-
76
- > 与业界 AI 编辑器(Cursor / Windsurf)按需读取文件而非全量加载的理念完全一致——**先精准搜索,再按需拉取全量**,将发送给大模型的 token 降至最低。
77
-
78
- 1. **按关键词精准搜索(最高优先级)**:当你已知要找什么类型的元素(如按钮、输入框、特定名称的链接)时,**优先使用 `searchTree` 动作**,传入 role 名称、元素文本或状态关键词搜索。它只返回命中行和上下文,token 消耗比全量树减少 80%+。
79
- - 示例:查找所有按钮 → `{"action": "searchTree", "query": "button"}`
80
- - 示例:查找含"提交"文本的节点 → `{"action": "searchTree", "query": "提交"}`
81
- - 示例:查找已勾选的复选框 → `{"action": "searchTree", "query": "checked"}`
82
- - 示例:精确定位某个 ref → `{"action": "searchTree", "query": "#5"}`
83
- 2. **首次获取全量**:首次进入页面、页面发生重大刷新、或 `searchTree` 无法找到所需信息时,调用 `browserState` 并指定 `responseMode` 为 `full` 或 `both` 获取完整 A11y 树。
84
- 3. **增量优先**:执行 `click`、`fill`、`select`、`scroll` 操作后,工具默认自动返回 `diff` 增量信息。优先阅读这些 Diff,以便快速确认操作是否生效。
85
- 4. **按需拉取全量**:如果增量 Diff 不足以支持下一步操作,或需要寻找不在 Diff 中的 `#N` 节点,且 `searchTree` 也无法定位时,再显式调用 `browserState` 拉取完整树。
86
-
87
- </browser_state_diff>
88
-
89
-
90
-
91
- <browser_rules>
92
- 在使用浏览器和浏览网页时严格遵守以下规则:
93
-
94
- - 仅与分配有 `#N` 索引的元素进行交互,将 N 作为 `index` 参数传入。
95
- - 仅使用明确出现在树中的 `#N` 索引,切勿猜测或沿用过期索引。
96
- - 每次操作后 `#N` 索引会重新分配,不要使用旧的索引。
97
- - 如果页面在执行操作后发生变化(例如输入文本操作),分析是否需要与新元素进行交互,例如从列表中选择正确的选项。
98
- - 默认情况下,仅列出可见视口中的元素。如果你怀疑需要交互的相关内容在屏幕外,请使用滚动操作。仅在页面下方或上方还有更多像素时才滚动。
99
- - 你可以使用 num_pages 参数滚动特定页数(例如,0.5 表示半页,2.0 表示两页)。
100
- - 如果出现验证码,告诉用户你无法解决验证码。完成任务并请用户解决它。
101
- - 如果缺少预期元素,尝试滚动或导航回退。
102
- - 除非某些条件发生变化,否则不要重复同一操作超过 3 次。
103
- - 如果你向输入字段填充文本且操作序列被中断,通常意味着某些内容发生了变化,例如下拉建议弹出。
104
- - 如果 <user_request> 包含特定的页面信息,如产品类型、评分、价格、位置等,尝试应用过滤器以提高效率。
105
- - <user_request> 是最终目标。如果用户指定了明确的步骤,它们始终具有最高优先级。
106
- - 如果你向字段输入文本,可能需要按回车键、点击搜索按钮或从下拉列表中选择以完成操作。
107
- - **不要通过 executeJavascript 向页面插入 DOM 元素**(如创建 div 显示调试信息)。这会污染页面结构并影响后续操作。如需读取数据,使用 return 语句返回结果即可。
108
- - 如果操作返回中出现 `[校验提示]`,说明页面有表单校验错误未通过,请先根据提示修复错误后再继续操作。
109
- - 如果操作后页面没有发生预期变化,优先检查是否有 `[校验提示]` 或 `[error]` token 的错误信息,而非重复操作。
110
- - 如果不需要,不要登录页面。如果没有凭据,不要登录。
111
- - 有两种类型的任务,首先思考你正在处理哪种类型的请求:
112
-
113
- 1. 非常具体的逐步说明:
114
-
115
- - 非常精确地遵循它们,不要跳过步骤。尝试按要求完成所有内容。
116
-
117
- 2. 开放式任务。自己规划,在实现目标时保持创造性。
118
-
119
- - 如果在开放式任务中陷入困境(例如登录或验证码),可以重新评估任务并尝试替代方法,例如有时即使页面的某些部分可访问或通过 Web 搜索获取一些信息,也会意外弹出登录框。
120
- </browser_rules>
121
-
122
- <capability>
123
- - 你只能处理单页应用。不要跳出当前页面。
124
- - 如果链接将在新页面中打开(例如,<a target="_blank">),不要点击该链接。
125
- - 任务失败是可以接受的。
126
- - 用户可能是错的。如果用户的请求无法实现、不适当,或者你没有足够的信息或工具来实现它。告诉用户提出更好的请求。
127
- - 网页可能已损坏。所有网页或应用都有 bug。有些 bug 会使你的工作变得困难。鼓励你告诉用户当前页面的问题。你的反馈(包括失败)对用户很有价值。
128
- - 过于努力可能有害。来回重复某些操作或在知识有限的情况下推动复杂程序可能导致不良结果和有害副作用。用户宁愿你以失败告终完成任务。
129
- - 如果你对当前网页或任务没有相关知识。你必须要求用户提供具体说明和详细步骤。
130
- </capability>
131
-
132
- <task_completion_rules>
133
- 你必须在以下情况时结束任务:
134
-
135
- - 当你完全完成用户请求时。
136
- - 当你感到困惑或无法解决用户请求时。或者用户请求不清楚或包含不当内容。
137
- - 如果绝对不可能继续。
138
-
139
- </task_completion_rules>
@@ -1,175 +0,0 @@
1
- import { initializeBuiltinWebMCP } from './initialize-builtin-WebMCP'
2
- import { zodToJsonSchema } from 'zod-to-json-schema'
3
- import pageAgentPrompt from './page-agent-prompt.md?raw'
4
- import { PageController } from '@page-agent/page-controller'
5
- import { buildA11yTree, type RefMap } from './a11y-tree'
6
- import { PageStateCache } from './page-state-cache'
7
- import { SimulatorMask } from './page-agent-mask/SimulatorMask'
8
- import { highlight, unhighlight, globalRemoveListener } from './page-agent-highlight'
9
-
10
- import { DEFAULT_ERROR_SELECTORS, DEFAULT_DIALOG_SELECTORS, type PageAgentToolOptions } from './constants'
11
- import { inputSchema, type PageAgentToolInput } from './schema'
12
- import type { ActionContext } from './context'
13
- import { detectPageDialog, detectValidationErrors } from './utils/dom'
14
-
15
- import { handleBrowserState } from './handlers/browserState'
16
- import { handleClick } from './handlers/click'
17
- import { handleFill } from './handlers/fill'
18
- import { handleSelect } from './handlers/select'
19
- import { handleScroll } from './handlers/scroll'
20
- import { handleExecuteJavascript } from './handlers/executeJavascript'
21
- import { handleSearchTree } from './handlers/searchTree'
22
-
23
- /** 在浏览器页面中注册 page-agent-tool, 用于页面的内容获取和操作,页面的动效 */
24
- export function registerPageAgentTool(options: PageAgentToolOptions = {}) {
25
- initializeBuiltinWebMCP()
26
-
27
- // 默认启用元素高亮
28
- if (typeof options.enableHighlight === 'undefined') {
29
- options.enableHighlight = true
30
- }
31
-
32
- window.__webmcpcli_interactiveWhitelist = window.__webmcpcli_interactiveWhitelist || [] // 白名单元素列表,存在则识别为交互元素
33
- window.__webmcpcli_interactiveBlacklist = window.__webmcpcli_interactiveBlacklist || [] // 黑名单,反之
34
- window.__webmcpcli_exposedAttributes = window.__webmcpcli_exposedAttributes || options?.exposedAttributes || [] // 额外暴露的自定义属性白名单
35
- window.__webmcpcli_beforeGetBrowserState = window.__webmcpcli_beforeGetBrowserState || null // 指定网站覆盖该函数,用于设置当前网站的黑白名单
36
- // 校验错误选择器:默认覆盖 ARIA 标准 + 主流框架,网站可通过 window.__webmcpcli_errorSelectors 覆盖
37
- window.__webmcpcli_errorSelectors = window.__webmcpcli_errorSelectors || DEFAULT_ERROR_SELECTORS
38
- // 模态弹窗选择器:同上
39
- window.__webmcpcli_dialogSelectors = window.__webmcpcli_dialogSelectors || DEFAULT_DIALOG_SELECTORS
40
-
41
- // 保留 PageController ,先关闭内置mask, 再手工绑定当前项目的mask类
42
- const pageController = new PageController({ enableMask: false })
43
-
44
- // @ts-ignore
45
- pageController.maskReady = (async () => {
46
- // @ts-ignore
47
- pageController.mask = new SimulatorMask()
48
- })()
49
-
50
- // ─── 状态 Diff 缓存
51
- const stateCache = new PageStateCache()
52
-
53
- // 当前 ref 索引 → HTMLElement 映射(每次 buildA11yTree 后更新)
54
- let currentRefMap: RefMap = new Map()
55
-
56
- // ─── 辅助:构建错误响应 ───────────────────────────────────────────────────
57
- async function errContent(msg: string) {
58
- await pageController.hideMask()
59
- return { content: [{ type: 'text' as const, text: msg }] }
60
- }
61
-
62
- // AI 使用过期 ref 时,自动重建 A11y 树并返回全量状态,
63
- // 避免 AI 额外往返调用 browserState,减少操作轮次
64
- async function refreshOnStaleRef(action: string, index: number) {
65
- const refreshResult = await buildBrowserStateResponse('full')
66
- const warning = `⚠️ ${action}失败: ref 索引 ${index} 已失效(页面可能已刷新),已自动重新加载页面状态,请使用新的 ref 索引重试。\n`
67
- return {
68
- content: [{ type: 'text' as const, text: warning + refreshResult.content[0].text }]
69
- }
70
- }
71
-
72
- // ─── 核心:构建 browserState 响应(全量 or 增量 Diff)────────────────────
73
- async function buildBrowserStateResponse(
74
- responseMode: 'full' | 'diff' | 'both' = 'diff'
75
- ): Promise<{ content: Array<{ type: 'text'; text: string }> }> {
76
- const url = window.location.href
77
- const title = document.title
78
-
79
- // 获取用户自定义黑名单与白名单及额外暴露的属性
80
- const blacklist = (window.__webmcpcli_interactiveBlacklist ?? []) as Element[]
81
- const whitelist = (window.__webmcpcli_interactiveWhitelist ?? []) as Element[]
82
- const exposedAttributes = (window.__webmcpcli_exposedAttributes ?? []) as string[]
83
-
84
- // 生成语义化 ARIA YAML 树 + 刷新 refMap
85
- const { yaml, refMap } = buildA11yTree(document.body, blacklist, whitelist, {
86
- exposedAttributes,
87
- errorSelectors: (window.__webmcpcli_errorSelectors ?? DEFAULT_ERROR_SELECTORS).join(', ')
88
- })
89
- currentRefMap = refMap
90
-
91
- // 高亮交互元素,且增加全局移除高亮的监听
92
- if (options?.enableHighlight) {
93
- highlight(refMap)
94
- globalRemoveListener()
95
- }
96
-
97
- // 计算 Diff
98
- const diff = stateCache.update(url, yaml)
99
-
100
- await pageController.hideMask()
101
-
102
- // 检测页面弹窗/遮罩层(确认框、提示框等),让 AI 优先处理
103
- const dialogAlert = detectPageDialog()
104
- // 检测表单校验错误,提醒 AI 优先修复
105
- const validationErrors = detectValidationErrors()
106
-
107
- // 根据 responseMode 组装 content
108
- let displayContent = ''
109
- if (responseMode === 'full') {
110
- displayContent = yaml
111
- } else if (responseMode === 'diff') {
112
- displayContent = diff.isFullRefresh ? yaml : diff.diffText
113
- } else if (responseMode === 'both') {
114
- displayContent = `【全量页面树】:\n${yaml}\n\n【增量差异】:\n${diff.isFullRefresh ? '(首次/刷新,无增量差异)' : diff.diffText}`
115
- }
116
-
117
- // 拼装 JSON 格式状态,与 webmcp-cli 的 state 提取逻辑对齐
118
- const stateObj = {
119
- url,
120
- title,
121
- content: displayContent
122
- }
123
- const text = `浏览器状态: ${JSON.stringify(stateObj)}${dialogAlert}${validationErrors}`
124
- return { content: [{ type: 'text', text }] }
125
- }
126
-
127
- // 组装上下文传递给 handlers
128
- const actionContext: ActionContext = {
129
- pageController,
130
- stateCache,
131
- getRefMap: () => currentRefMap,
132
- setRefMap: (map: RefMap) => {
133
- currentRefMap = map
134
- },
135
- buildBrowserStateResponse,
136
- refreshOnStaleRef,
137
- errContent
138
- }
139
-
140
- // ─── 工具注册(名称与 inputSchema 与原版完全一致)────────────────────────
141
- ;(document as any).modelContext.registerTool({
142
- name: 'page-agent-tool',
143
- description: pageAgentPrompt,
144
- // @ts-ignore
145
- inputSchema: zodToJsonSchema(inputSchema) as any,
146
- async execute(args: PageAgentToolInput) {
147
- await pageController.showMask()
148
- try {
149
- switch (args.action) {
150
- case 'browserState':
151
- return await handleBrowserState(args, actionContext)
152
- case 'click':
153
- return await handleClick(args, actionContext)
154
- case 'fill':
155
- return await handleFill(args, actionContext)
156
- case 'select':
157
- return await handleSelect(args, actionContext)
158
- case 'scroll':
159
- return await handleScroll(args, actionContext)
160
- case 'executeJavascript':
161
- return await handleExecuteJavascript(args, actionContext)
162
- case 'searchTree':
163
- return await handleSearchTree(args, actionContext)
164
- default:
165
- await pageController.hideMask()
166
- // @ts-ignore
167
- return { content: [{ type: 'text', text: `未知操作: ${args.action}` }] }
168
- }
169
- } catch (error) {
170
- await pageController.hideMask()
171
- return { content: [{ type: 'text', text: `异常: ${String(error)}` }] }
172
- }
173
- }
174
- })
175
- }
@@ -1,78 +0,0 @@
1
- /**
2
- * page-state-cache.ts
3
- *
4
- * 页面状态 Diff 缓存模块
5
- * - 缓存上一次 buildA11yTree 生成的 YAML 文本
6
- * - 每次操作后计算 diff,只返回 +/- 变化行,大幅节省 Token
7
- */
8
-
9
- import { diffLines } from 'diff'
10
-
11
- export interface PageSnapshot {
12
- url: string
13
- yaml: string
14
- }
15
-
16
- export interface DiffResult {
17
- /** 是否为全量刷新(首次加载或 URL 变化) */
18
- isFullRefresh: boolean
19
- /** 上一次的 URL(用于拼接 URL 变化提示) */
20
- prevUrl: string
21
- /** 新增行数 */
22
- addedLines: number
23
- /** 删除行数 */
24
- removedLines: number
25
- /** 只含 +/- 行的 diff 文本(不含相同行,节省 Token) */
26
- diffText: string
27
- }
28
-
29
- export class PageStateCache {
30
- private prev: PageSnapshot | null = null
31
-
32
- /** URL 变化或首次调用时,需要全量输出 */
33
- isFullRefresh(currentUrl: string): boolean {
34
- return !this.prev || this.prev.url !== currentUrl
35
- }
36
-
37
- /**
38
- * 更新缓存并返回 diff 结果
39
- * @param url 当前页面 URL
40
- * @param yaml 当前 YAML 树文本
41
- */
42
- update(url: string, yaml: string): DiffResult {
43
- const isFullRefresh = this.isFullRefresh(url)
44
- const prevUrl = this.prev?.url ?? ''
45
-
46
- let addedLines = 0
47
- let removedLines = 0
48
- let diffText = ''
49
-
50
- if (!isFullRefresh && this.prev) {
51
- const changes = diffLines(this.prev.yaml, yaml)
52
- const buf: string[] = []
53
- changes.forEach(part => {
54
- // 跳过相同行,只保留变化行,大幅节省传给 AI 的 Token 数量
55
- if (!part.added && !part.removed) return
56
- const lines = part.value.split('\n').filter(Boolean)
57
- if (part.added) {
58
- addedLines += lines.length
59
- lines.forEach(l => buf.push(`+ ${l}`))
60
- } else {
61
- removedLines += lines.length
62
- lines.forEach(l => buf.push(`- ${l}`))
63
- }
64
- })
65
- diffText = buf.join('\n')
66
- }
67
-
68
- // 更新缓存
69
- this.prev = { url, yaml }
70
-
71
- return { isFullRefresh, prevUrl, addedLines, removedLines, diffText }
72
- }
73
-
74
- /** 强制清空缓存(页面刷新 / 手动重置场景) */
75
- invalidate(): void {
76
- this.prev = null
77
- }
78
- }
@@ -1,51 +0,0 @@
1
- import { z } from 'zod'
2
-
3
- export const inputSchema = z.object({
4
- action: z.enum(['browserState', 'click', 'fill', 'select', 'scroll', 'executeJavascript', 'searchTree'] as const)
5
- .describe(`执行的动作名称, 每一次执行 'click', 'fill', 'select'动作之前,**必须**要先调用 'browserState' 去获取页面的最新状态。
6
- browserState: '查询整个页面的浏览器状态;返回页面的标题、URL、YAML格式的语义化页面树',
7
- click: '根据元素索引点击;',
8
- fill: '根据元素索引填写文本;';
9
- select: '根据元素索引选择下拉框选项;';
10
- scroll: '滚动页面的动作,可以指定水平滚动还是上下滚动; 不带元素索引时:滚动整个文档。带元素索引时:滚动该索引处的容器(或其最近的可滚动祖先元素)'
11
- executeJavascript: '执行javascript代码'
12
- searchTree: '按关键词搜索无障碍树,返回带行号的匹配节点及上下文,无需获取全量树。适合快速定位特定元素(如所有按钮、特定名称的链接等),显著减少上下文消耗。必须提供 query 参数。'
13
- `),
14
- index: z
15
- .number()
16
- .min(0)
17
- .optional()
18
- .describe('执行动作 of the element index, 动作为 click,fill,select时,必须提供元素索引'),
19
- text: z.string().optional().describe('执行动作的文本内容, 动作为 fill,select 时,必须提供文本内容'),
20
- down: z.boolean().optional().describe('执行上下滚动时,必须提供down参数'),
21
- right: z.boolean().optional().describe('执行水平滚动方向, 必须提供right参数'),
22
- numPages: z
23
- .number()
24
- .optional()
25
- .describe('执行动作的滚动页数, 动作为 scroll时,可以提供滚动页数,建议每次滚动0.1页,该值不要大于5.'),
26
- pixels: z.number().int().min(0).optional().describe('执行动作的滚动像素数,动作为 scroll时,可以提供滚动像素数'),
27
- script: z.string().optional().describe('执行的javascript代码,动作为 executeJavascript时,必须提供script参数'),
28
- query: z
29
- .string()
30
- .optional()
31
- .describe(
32
- '搜索关键词,动作为 searchTree 时必须提供。支持按 role(如 button、link)、节点名称、状态(如 checked)或 ref 索引(如 #3)搜索'
33
- ),
34
- contextLines: z
35
- .number()
36
- .int()
37
- .min(0)
38
- .max(10)
39
- .default(2)
40
- .describe('searchTree 时每个命中行前后保留的上下文行数,默认 2'),
41
- maxMatches: z.number().int().min(1).max(50).default(20).describe('searchTree 时最大返回分组数,默认 20'),
42
- responseMode: z
43
- .enum(['full', 'diff', 'both'] as const)
44
- .optional()
45
- .default('diff')
46
- .describe(
47
- '返回浏览器状态的模式。full: 仅返回当前全量 A11y 树;diff: 仅返回与上一次状态的增量差异;both: 同时返回全量 A11y 树与增量差异。默认值为 diff。'
48
- )
49
- })
50
-
51
- export type PageAgentToolInput = z.infer<typeof inputSchema>