通过浏览器cdp协议：DOM.getDocument -> DOM.querySelector (nodeId) -> DOM.getBoxModel (border坐标)，获取网页元素中心位置

var n={tabId: 753916623 }
chrome.debugger.attach(n, "1.3");
let l = await chrome.debugger.sendCommand(n, "DOM.getDocument", {});
l = await chrome.debugger.sendCommand(n,"DOM.querySelector", {"nodeId": l.root.nodeId,"selector":"#fileInput"});
l = await chrome.debugger.sendCommand(n, "DOM.getBoxModel", {"nodeId":l.nodeId});
await chrome.debugger.detach(n);
//计算中心点 (例如用于点击)
var centerX = (l.model.border[0] + l.model.border[2]) / 2;
var centerY = (l.model.border[1]+ l.model.border[7]) / 2;
console.log(centerX);
console.log(centerX);
console.log(l);

1. 方法概览
域名: DOM
方法名: getBoxModel
作用: 返回给定节点的盒模型，包括后端节点 ID 或节点 ID。
2. 请求参数
它接受以下三个参数中的任意一个（通常使用 nodeId）：

参数名    类型    描述
nodeId    NodeId    节点的 ID (通过 DOM.getDocument 或 DOM.querySelector 获取)。最常用。
backendNodeId    BackendNodeId    后端节点的 ID。
objectId    Runtime.RemoteObjectId    JavaScript 对象 ID (在运行时中使用)。

3. 返回结果
返回一个对象，包含一个 model 属性，model 内部包含以下字段：

content: quad 数组，内容区域的坐标。
padding: quad 数组，包含内边距区域的坐标。
border: quad 数组，包含边框区域的坐标。
margin: quad 数组，包含外边距区域的坐标。
width: 内容区域的宽度。
{"model":
{"border":[198.5,377,594.5,377,594.5,493,198.5,493],
"content":[198.5,377,594.5,377,594.5,493,198.5,493],
"height":116,
"margin":[198.5,377,594.5,377,594.5,493,198.5,493],
"padding":[198.5,377,594.5,377,594.5,493,198.5,493],
"width":396
}}
4. 使用步骤
建立与浏览器的 CDP 连接。
启用 DOM 域 (DOM.enable)。
获取文档根节点 (DOM.getDocument)。
查找目标节点 (DOM.querySelector)，获得 nodeId。
调用 DOM.getBoxModel 并传入 nodeId。
解析返回的四边形坐标。

关于 quad (四元组/四边形)
在 CDP 中，坐标通常不是一个简单的 {x, y, width, height}，而是一个包含 8 个数字 的数组：[x1, y1, x2, y2, x3, y3, x4, y4]。
这代表了矩形的四个角（顺时针：1.左上 -> 2.右上 -> 3.右下 -> 4.左下）。

如果元素没有旋转或倾斜，这 8 个数字描述的就是一个标准的矩形。
如果元素被 CSS 3D 变换了，这 8 个数字能准确描述变换后的形状。

计算中心点 (例如用于点击)
const centerX = (border[0] + border[2]) / 2;
const centerY = (border[1]+ border[7]) / 2;