首页/新闻资讯/正文详情

手把手实现一个装修在线报价系统:可编辑表格 + 实时算量引擎(纯前端 JS)

发布时间:2026/9/27 20:35:10 来源:云帆数科 栏目:资讯中心
手把手实现一个装修在线报价系统:可编辑表格 + 实时算量引擎(纯前端 JS)
做内容运营或自托管 Agent 的同学大概率遇到过这类需求要在多个平台百家号、知乎、微博、CSDN、公众号上自动写稿发文但每个平台都要扫码登录总不能每次跑脚本都重新登录一遍。本文讲一套可落地的方案用 Edge 的 CDPChrome DevTools Protocol远程控制一个常驻、已登录的浏览器实例Playwright 通过connect_over_cdp直接接管实现登录一次、长期复用。## 核心思路正常playwright.launch()每次都是全新浏览器cookie 全空。要保留登录态关键是两点1.固定用户数据目录启动时带上--user-data-dir让所有 cookie、localStorage 落盘到同一目录2.通过 CDP 接管而非新开启动参数加--remote-debugging-port9222再用connect_over_cdp(http://127.0.0.1:9222)连上。pythonimport sysfrom playwright.sync_api import sync_playwrightCDP http://127.0.0.1:9222with sync_playwright() as p: b p.chromium.connect_over_cdp(CDP) ctx b.contexts[0] # 复用已登录的上下文 page ctx.new_page() page.goto(https://baijiahao.baidu.com/builder/rc/edit?typenews) # 此时浏览器已经是登录态无需再扫码## 启动命令含登录态保持bashmsedge.exe --remote-debugging-port9222 \ --user-data-dirC:/path/to/edge-profile \ --no-first-run --no-default-browser-checkuser-data-dir 必须固定。只要这个目录不变哪怕浏览器进程被回收重启下次连上还是原来的登录态——这是整个方案能无人值守的关键。## 填稿SPA 编辑器要等 hydrate现代富文本编辑器如百家号、公众号大多是 SPAgoto 后 DOM 还没就绪直接找 contenteditable 会失败。正确做法是轮询等正文编辑区出现pythonbody_frame Nonefor _ in range(45): for fr in page.frames: try: if fr.evaluate(“() document.body.getAttribute(‘contenteditable’)‘true’): body_frame fr; break except Exception: pass if body_frame: break time.sleep(1)正文用 keyboard.insert_text 逐段写入比 type 稳定标题先 Controla 清空再填避免和上次内容叠加。## 发布时的坑按钮被遮罩盖住百家号点发布前编辑器会跑一段检测期间一个 .bjh-btn-disable-mask 层盖住发布按钮。不处理的话点击无效、毫无反应。解决办法是发布前轮询遮罩是否消失pythoncovered page.evaluate(‘’() { const pub […document.querySelectorAll(‘button’)].find(x x.innerText.trim()‘发布’); if (!pub) return true; const r pub.getBoundingClientRect(); const top document.elementFromPoint(r.xr.width/2, r.yr.height/2); return top ? !!top.closest(‘.bjh-btn-disable-mask’) : true;}‘’)并且发布按钮要用精确文本匹配innerText.trim()发布用has-text(发布)会误点到定时发布”。## 公众号封面的从正文选择陷阱公众号编辑器不让直接拖拽上传封面必须先把图插进正文再到封面区点从正文选择。而那个按钮藏在 hover 浮层里0×0 尺寸Playwright 的.click()会因元素不稳定超时得改用 JSel.click()强制触发。## 小结- 登录态 固定--user-data-dirconnect_over_cdp别用launch()- 填稿前等 SPA hydrate正文用insert_text- 发布按钮先等遮罩消失再精确匹配文本- 平台特有交互公众号封面、百家号封面确认按上面套路兜底。把这几条封装成启动 Edge → 轮询 CDP → 跑脚本的单一命令就能做到一键多发、无人值守。

相关推荐

网站开发包括网站的哪些部分?揭秘建站报价背后的技术真相
网站开发包括网站的哪些部分?揭秘建站报价背后的技术真相

网站开发包括网站的哪些部分?揭秘建站报价背后的技术真相 别被那些花里胡哨的模板网站骗了。你看着它好像挺快,其实丑得掉渣,后台乱成一锅粥,想改个按钮颜色都得找半天。这就是为什么很多人问 建站报价 时,我总会先反问一句:你真的知道… · 2026/9/27 20:35:10

CAN总线错误帧排查实战:从底层逻辑到ZCANPRO抓包定位
CAN总线错误帧排查实战:从底层逻辑到ZCANPRO抓包定位

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 20:35:03

AI 写长篇别靠玄学:我用 codebubby + Cursor 把《一纸洛阳》写到50章不崩的配置骨架
AI 写长篇别靠玄学:我用 codebubby + Cursor 把《一纸洛阳》写到50章不崩的配置骨架

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 20:34:51

SLVS-EC v2.0封包解析:ECC与CRC校验原理及FPGA调试避坑指南
SLVS-EC v2.0封包解析:ECC与CRC校验原理及FPGA调试避坑指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 21:04:57

Vue3 开发提效:Vscode 插件配 TaoToken 的 settings.json 骨架与验证
Vue3 开发提效:Vscode 插件配 TaoToken 的 settings.json 骨架与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 21:04:44

学习观深度解读:从认知科学到输出式学习实践
学习观深度解读:从认知科学到输出式学习实践

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 21:04:38

已有 Hermes Agent?7 分钟让 Agent 自主装好 hermes-web-ui + SenseNova Skill
已有 Hermes Agent?7 分钟让 Agent 自主装好 hermes-web-ui + SenseNova Skill

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 21:04:38

STM32CubeMX 6.14安装与配置避坑指南
STM32CubeMX 6.14安装与配置避坑指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 21:04:38

STM32F407+LAN8720以太网调试全指南:从CubeMX配置到LWIP与FreeRTOS实战
STM32F407+LAN8720以太网调试全指南:从CubeMX配置到LWIP与FreeRTOS实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 21:04:32

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码